Homework

client/src/pages/account.tsx

@@ -5,14 +5,15 @@ import {SAPIBase} from "../tools/api";
 import "./css/account.css";
 
 const AccountPage = () => {
-  const [ SAPIKEY, setSAPIKEY ] = React.useState<string>("");
+  const [ SUserId, setSUserId ] = React.useState<string>("");
+  const [ SUserPW, setSUserPW ] = 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', { credential: {SUserId, SUserPW} });
       setNBalance(data.balance);
     }
     asyncFun().catch((e) => window.alert(`AN ERROR OCCURED: ${e}`));
@@ -22,7 +23,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', { credential: {SUserId, SUserPW}, amount: amount });
       setNTransaction(0);
       if (!data.success) {
         window.alert('Transaction Failed:' + data.msg);
@@ -40,7 +41,10 @@ const AccountPage = () => {
       <Header/>
       <h2>Account</h2>
       <div className={"account-token-input"}>
-        Enter API Key: <input type={"text"} value={SAPIKEY} onChange={e => setSAPIKEY(e.target.value)}/>
+        Enter API Key: <input type={"text"} value={SUserId} onChange={e => setSUserId(e.target.value)}/>
+        <br />
+        Enter API Key: <input type={"text"} value={SUserPW} onChange={e => setSUserPW(e.target.value)}/>
+        <br />
         <button onClick={e => getAccountInformation()}>GET</button>
       </div>
       <div className={"account-bank"}>

client/src/pages/css/feed.css

@@ -30,6 +30,19 @@
     font-weight: 700;
 }
 
+.duplicate-item {
+    position: absolute;
+    right: 40px;
+    top: 15px;
+    color: blue;
+    font-size: 18px;
+}
+
+.duplicate-item:hover {
+    font-weight: bold;
+    cursor: pointer;
+}
+
 .delete-item {
     position: absolute;
     right: 15px;

client/src/pages/feed.tsx

@@ -8,9 +8,11 @@ interface IAPIResponse  { id: number, title: string, content: string }
 
 const FeedPage = (props: {}) => {
   const [ LAPIResponse, setLAPIResponse ] = React.useState<IAPIResponse[]>([]);
-  const [ NPostCount, setNPostCount ] = React.useState<number>(0);
+  const [ NPostCount, setNPostCount ] = React.useState<number>(1);
+  const [ NEditPostId, setNEditPostId ] = React.useState<number>(0);
   const [ SNewPostTitle, setSNewPostTitle ] = React.useState<string>("");
   const [ SNewPostContent, setSNewPostContent ] = React.useState<string>("");
+  const [ SEditPostContent, setSEditPostContent ] = React.useState<string>("");
 
   React.useEffect( () => {
     let BComponentExited = false;
@@ -35,6 +37,27 @@ const FeedPage = (props: {}) => {
     asyncFun().catch(e => window.alert(`AN ERROR OCCURED! ${e}`));
   }
 
+  const editPost = () => {
+    const asyncFun = async () => {
+      await axios.post( SAPIBase + '/feed/updateFeed', { id: NEditPostId, content: SEditPostContent } );
+      const { data } = await axios.get<IAPIResponse[]>( SAPIBase + `/feed/getFeed?count=${ NPostCount }`);
+      setLAPIResponse(data);
+    }
+    asyncFun().catch(e => window.alert(`AN ERROR OCCURED! ${e}`));
+  }
+
+  const duplicatePost = (id: string) => {
+    const asyncFun = async () => {
+      await axios.post( SAPIBase + '/feed/duplicateFeed', { id: id } );
+      setNPostCount(NPostCount + 1);
+      setSNewPostTitle("");
+      setSNewPostContent("");
+      const { data } = await axios.get<IAPIResponse[]>( SAPIBase + `/feed/getFeed?count=${ NPostCount }`);
+      setLAPIResponse(data);
+    }
+    asyncFun().catch(e => window.alert(`AN ERROR OCCURED! ${e}`));
+  }
+
   const deletePost = (id: string) => {
     const asyncFun = async () => {
       // One can set X-HTTP-Method header to DELETE to specify deletion as well
@@ -50,13 +73,22 @@ const FeedPage = (props: {}) => {
       <h2>Feed</h2>
       <div className={"feed-length-input"}>
         Number of posts to show: &nbsp;&nbsp;
-        <input type={"number"} value={ NPostCount } id={"post-count-input"} min={0}
+        <input type={"number"} value={ NPostCount } id={"post-count-input"} min={0} readOnly={true}
                onChange={ (e) => setNPostCount( parseInt(e.target.value) ) }
         />
+        <br />
+        Edit Post #id: &nbsp;&nbsp;
+        <input type={"number"} id={"post-edit-id-input"} value={NEditPostId} onChange={(e) => setNEditPostId(parseInt(e.target.value))} />
+        <br />
+        New content: &nbsp;&nbsp;
+        <input type={"text"} id={"post-edit-content-input"} value={SEditPostContent} onChange={(e) => setSEditPostContent(e.target.value)} />
+        <br />
+        <button onClick={(e) => editPost()}>Edit Post!</button>
       </div>
       <div className={"feed-list"}>
         { LAPIResponse.map( (val, i) =>
           <div key={i} className={"feed-item"}>
+            <div className={"duplicate-item"} onClick={(e) => duplicatePost(`${val.id}`)}>⎘</div>
             <div className={"delete-item"} onClick={(e) => deletePost(`${val.id}`)}>ⓧ</div>
             <h3 className={"feed-title"}>{ val.title }</h3>
             <p className={"feed-body"}>{ val.content }</p>

seminar/.env.example

@@ -1,3 +1,5 @@
 PORT=8080
 NODE_ENV=DEVELOPMENT
-API_KEY=
+API_KEY=
+USER_ID=admin
+USER_PW=password

seminar/src/middleware/auth.js

@@ -1,5 +1,5 @@
 const authMiddleware = (req, res, next) => {
-    if (req.body.credential === process.env.API_KEY) {
+    if (req.body.credential.SUserId === process.env.USER_ID && req.body.credential.SUserPW === process.env.USER_PW) {
         console.log("[AUTH-MIDDLEWARE] Authorized User");
         next();
     }

seminar/src/routes/feed.js

@@ -26,6 +26,35 @@ class FeedDB {
         return true;
     }
 
+    updateItem = ( id, content ) => {
+        let BItemEdited = false;
+        this.#LDataDB = this.#LDataDB.map((value) => {
+            if (value.id === id) {
+                value.content = content;
+                BItemEdited = true;
+            }
+            return value;
+        });
+        return BItemEdited;
+    }
+
+    duplicateItem = ( id ) => {
+        let BItemFound = false;
+        let OItem = null;
+        this.#LDataDB = this.#LDataDB.map((value) => {
+            if (value.id === id) {
+                BItemFound = true;
+                OItem = value;
+            }
+            return value;
+        });
+        if (BItemFound) {
+            this.#LDataDB.push({id: this.#id, title: OItem.title, content: OItem.content});
+            this.#id++; this.#itemCount++;
+        }
+        return BItemFound;
+    }
+
     deleteItem = ( id ) => {
         let BItemDeleted = false;
         this.#LDataDB = this.#LDataDB.filter((value) => {
@@ -62,6 +91,30 @@ router.post('/addFeed', (req, res) => {
    }
 });
 
+router.post('/updateFeed', (req, res) => {
+    try {
+        const { id, content } = req.body;
+        const Nid = parseInt(id);
+        const updateResult = feedDBInst.updateItem( Nid, content );
+        if (!updateResult) return res.status(500).json({ error: { Nid, content, updateResult } })
+        else return res.status(200).json({ isOK: true });
+    } catch (e) {
+        return res.status(500).json({ error: e });
+    }
+});
+
+router.post('/duplicateFeed', (req, res) => {
+    try {
+        const { id } = req.body;
+        const Nid = parseInt(id);
+        const updateResult = feedDBInst.duplicateItem( Nid );
+        if (!updateResult) return res.status(500).json({ error: { Nid, updateResult } })
+        else return res.status(200).json({ isOK: true });
+    } catch (e) {
+        return res.status(500).json({ error: e });
+    }
+});
+
 router.post('/deleteFeed', (req, res) => {
     try {
         const { id } = req.body;
@@ -71,6 +124,6 @@ router.post('/deleteFeed', (req, res) => {
     } catch (e) {
         return res.status(500).json({ error: e });
     }
-})
+});
 
 module.exports = router;