Pull request (ellen)

client/src/pages/account.tsx

@@ -6,13 +6,15 @@ import "./css/account.css";
 
 const AccountPage = () => {
   const [ SAPIKEY, setSAPIKEY ] = React.useState<string>("");
+  const [ SID, setID ] = React.useState<string>("");
+  const [ SPASSWD, setPASSWD ] = React.useState<string>("");
   const [ NBalance, setNBalance ] = React.useState<number | "Not Authorized">("Not Authorized");
   const [ NTransaction, setNTransaction ] = React.useState<number | ''>(0);
 
   const getAccountInformation = () => {
     const asyncFun = async() => {
       interface IAPIResponse { balance: number };
-      const { data } = await axios.post<IAPIResponse>(SAPIBase + '/account/getInfo', { credential: SAPIKEY });
+      const { data } = await axios.post<IAPIResponse>(SAPIBase + '/account/getInfo', { id: SID, passwd: SPASSWD });
       setNBalance(data.balance);
     }
     asyncFun().catch((e) => window.alert(`AN ERROR OCCURED: ${e}`));
@@ -22,7 +24,7 @@ const AccountPage = () => {
     const asyncFun = async() => {
       if (amount === '') return;
       interface IAPIResponse { success: boolean, balance: number, msg: string };
-      const { data } = await axios.post<IAPIResponse>(SAPIBase + '/account/transaction', { credential: SAPIKEY, amount: amount });
+      const { data } = await axios.post<IAPIResponse>(SAPIBase + '/account/transaction', {id: SID, passwd: SPASSWD, amount: amount });
       setNTransaction(0);
       if (!data.success) {
         window.alert('Transaction Failed:' + data.msg);
@@ -39,9 +41,16 @@ const AccountPage = () => {
     <div className={"account"}>
       <Header/>
       <h2>Account</h2>
-      <div className={"account-token-input"}>
+      {/* <div className={"account-token-input"}>
         Enter API Key: <input type={"text"} value={SAPIKEY} onChange={e => setSAPIKEY(e.target.value)}/>
         <button onClick={e => getAccountInformation()}>GET</button>
+      </div> */}
+      <div className={"account-id-input"}>
+        Enter User Name: <input type={"text"} value={SID} onChange={e => setID(e.target.value)}/>
+      </div>
+      <div className={"account-passwd-input"}>
+        Enter Password: <input type={"text"} value={SPASSWD} onChange={e => setPASSWD(e.target.value)}/>
+        <button onClick={e => getAccountInformation()}>GET</button>
       </div>
       <div className={"account-bank"}>
         <h3>The National Bank of SPARCS API</h3>

client/src/pages/css/feed.css

@@ -6,13 +6,39 @@
 }
 
 .feed-item {
+    position: relative;
     border: solid 1px rgba(0,0,0,0.2);
     border-radius: 15px;
     width: 100%;
     margin: 10px 0;
     position: relative;
 }
 
+.edit-item {
+    position: absolute;
+    right: 50px;
+    top: 12px;
+    color: red;
+    font-size: 18px;
+}
+
+.like-button{
+    position: absolute;
+    right: 85px;
+    top: 7px;
+    color: red;
+    align-items: center;
+    background-color: rgb(255, 131, 131);
+    font-size: 14px;
+    color:rgb(255, 255, 255);
+    border-radius: 15px;
+    border: none;
+    padding: 7px;
+    font-weight: bold;
+    box-shadow: 1px 1px 1px rgb(220, 220, 220);
+}
+
+
 .feed-item-add {
     border: dotted 1px black;
     border-radius: 15px;

client/src/pages/feed.tsx

@@ -4,13 +4,14 @@ import { SAPIBase } from "../tools/api";
 import Header from "../components/header";
 import "./css/feed.css";
 
-interface IAPIResponse  { id: number, title: string, content: string }
+interface IAPIResponse  { id: number, title: string, content: string, likes: number }
 
 const FeedPage = (props: {}) => {
   const [ LAPIResponse, setLAPIResponse ] = React.useState<IAPIResponse[]>([]);
   const [ NPostCount, setNPostCount ] = React.useState<number>(0);
   const [ SNewPostTitle, setSNewPostTitle ] = React.useState<string>("");
   const [ SNewPostContent, setSNewPostContent ] = React.useState<string>("");
+  const [ LikeCounts, setLikeCounts ] = React.useState<number>(0);
 
   React.useEffect( () => {
     let BComponentExited = false;
@@ -27,7 +28,7 @@ const FeedPage = (props: {}) => {
 
   const createNewPost = () => {
     const asyncFun = async () => {
-      await axios.post( SAPIBase + '/feed/addFeed', { title: SNewPostTitle, content: SNewPostContent } );
+      await axios.post( SAPIBase + '/feed/addFeed', { title: SNewPostTitle, content: SNewPostContent, likes: 0 } );
       setNPostCount(NPostCount + 1);
       setSNewPostTitle("");
       setSNewPostContent("");
@@ -44,6 +45,24 @@ const FeedPage = (props: {}) => {
     asyncFun().catch(e => window.alert(`AN ERROR OCCURED! ${e}`));
   }
 
+  const editPost = (id: string, editedTitle: string, editedContent: string) => {
+    const asyncFun = async () => {
+      await axios.post( SAPIBase + '/feed/editFeed', { id: id, title: editedTitle, content: editedContent } );
+      const { data } = await axios.get<IAPIResponse[]>( SAPIBase + `/feed/getFeed?count=${ NPostCount }`);
+      setLAPIResponse(data);
+    }
+    asyncFun().catch(e => window.alert(`AN ERROR OCCURED! ${e}`));
+  }
+
+  const updateLikes = (id: string, likes: number) => {
+    const asyncFun = async () => {
+      // One can set X-HTTP-Method header to DELETE to specify deletion as well
+      await axios.post( SAPIBase + '/feed/updateLikes', { id, likes } );
+      const { data } = await axios.get<IAPIResponse[]>( SAPIBase + `/feed/getFeed?count=${ NPostCount }`);
+      setLAPIResponse(data);
+    }
+    asyncFun().catch(e => window.alert(`AN ERROR OCCURED! ${e}`));
+  }
   return (
     <div className="Feed">
       <Header/>
@@ -58,8 +77,14 @@ const FeedPage = (props: {}) => {
         { LAPIResponse.map( (val, i) =>
           <div key={i} className={"feed-item"}>
             <div className={"delete-item"} onClick={(e) => deletePost(`${val.id}`)}>ⓧ</div>
+            <div className={"edit-item"} onClick={(e) => {
+              const editedTitle = window.prompt("Enter the new title", val.title);
+              const editedContent = window.prompt("Enter the new content", val.content);
+              if (editedTitle !== null && editedContent !== null) editPost(`${val.id}`, editedTitle, editedContent);
+            }}>✏️</div>
             <h3 className={"feed-title"}>{ val.title }</h3>
             <p className={"feed-body"}>{ val.content }</p>
+            <button className="like-button" onClick={() => updateLikes(`${val.id}`, val.likes)}>{val.likes} ❤️</button>
           </div>
         ) }
         <div className={"feed-item-add"}>

seminar/.env.example

@@ -1,3 +1,5 @@
 PORT=8080
 NODE_ENV=DEVELOPMENT
-API_KEY=
+API_KEY=
+ID=name
+PASSWD=1234

seminar/src/middleware/auth.js

@@ -1,5 +1,6 @@
 const authMiddleware = (req, res, next) => {
-    if (req.body.credential === process.env.API_KEY) {
+    const { id, passwd } = req.body;
+    if (id === process.env.ID && passwd === process.env.PASSWD) {
         console.log("[AUTH-MIDDLEWARE] Authorized User");
         next();
     }

seminar/src/routes/feed.js

@@ -9,7 +9,7 @@ class FeedDB {
         return FeedDB._inst_;
     }
 
-    #id = 1; #itemCount = 1; #LDataDB = [{ id: 0, title: "test1", content: "Example body" }];
+    #id = 1; #itemCount = 1; #LDataDB = [{ id: 0, title: "test1", content: "Example body", likes: 0 }];
 
     constructor() { console.log("[Feed-DB] DB Init Completed"); }
 
@@ -20,8 +20,8 @@ class FeedDB {
     }
 
     insertItem = ( item ) => {
-        const { title, content } = item;
-        this.#LDataDB.push({ id: this.#id, title, content });
+        const { title, content, likes } = item;
+        this.#LDataDB.push({ id: this.#id, title, content, likes });
         this.#id++; this.#itemCount++;
         return true;
     }
@@ -36,6 +36,25 @@ class FeedDB {
         if (BItemDeleted) id--;
         return BItemDeleted;
     }
+
+    editItem = ( id, title, content ) => {
+        this.#LDataDB = this.#LDataDB.map((value) => {
+            if (value.id === id) {
+                value.title = title;
+                value.content = content;
+            }
+            return value;
+        });
+    }
+
+    updateLikes = (id , likes) => {
+        this.#LDataDB = this.#LDataDB.map((value) => {
+            if (value.id === id) {
+                value.likes += 1;
+            }
+            return value;
+        });
+    }
 }
 
 const feedDBInst = FeedDB.getInst();
@@ -53,8 +72,8 @@ router.get('/getFeed', (req, res) => {
 
 router.post('/addFeed', (req, res) => {
    try {
-       const { title, content } = req.body;
-       const addResult = feedDBInst.insertItem({ title, content });
+       const { title, content, likes } = req.body;
+       const addResult = feedDBInst.insertItem({ title, content, likes });
        if (!addResult) return res.status(500).json({ error: dbRes.data })
        else return res.status(200).json({ isOK: true });
    } catch (e) {
@@ -73,4 +92,24 @@ router.post('/deleteFeed', (req, res) => {
     }
 })
 
+router.post('/editFeed', (req, res) => {
+    try {
+        const { id, title, content } = req.body;
+        feedDBInst.editItem(parseInt(id), title, content);
+        return res.status(200).json({ isOK: true });
+    } catch (e) {
+        return res.status(500).json({ error: e });
+    }
+})
+
+router.post('/updateLikes', (req, res) => {
+    try {
+        const { id, likes } = req.body;
+        feedDBInst.updateLikes(parseInt(id), likes);
+        return res.status(200).json({ isOK: true });
+    } catch (e) {
+        return res.status(500).json({ error: e });
+    }
+})
+
 module.exports = router;