Backend Seminar 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 User ID: <input type={"text"} value={SUSERID} onChange={e => setSUSERID(e.target.value)}/>
+        <br/>
+        Enter User Password: <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,12 +30,25 @@
     font-weight: 700;
 }
 
+.edit-item {
+    position: absolute;
+    right: 20px;
+    top: 12px;
+    color: green;
+    font-size: 18px;
+}
+
+.edit-item:hover {
+    font-weight: bold;
+    cursor: pointer;
+}
+
 .delete-item {
     position: absolute;
     right: 15px;
     top: 12px;
     color: red;
-    font-size: 18px;
+    font-size: 50px;
 }
 
 .delete-item:hover {

client/src/pages/feed.tsx

@@ -4,14 +4,16 @@ import { SAPIBase } from "../tools/api";
 import Header from "../components/header";
 import "./css/feed.css";
 
-interface IAPIResponse  { _id: string, title: string, content: string, itemViewCnt: number }
+interface IAPIResponse  { _id: string, title: string, content: string, itemViewCnt: number, star: binary}
 
 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 [ SNewPostContent, setSNewPostContent ] = React.useState<string>("");  
   const [ SSearchItem, setSSearchItem ] = React.useState<string>("");
+  const [ NEditPostID, setNEditPostID ] = React.useState<number>(0);
+  const [ SEditPostContent, setSEditPostContent ] = React.useState<string>("");
 
   React.useEffect( () => {
     let BComponentExited = false;
@@ -36,6 +38,22 @@ const FeedPage = (props: {}) => {
     asyncFun().catch(e => window.alert(`AN ERROR OCCURED! ${e}`));
   }
 
+  const editPost = () => {
+    const asyncFun = async () => {
+      await axios.post( SAPIBase + '/feed/editFeed', {id: NEditPostID, content: SEditPostContent});
+      setNEditPostID(NEditPostID + 1);
+      setSEditPostContent("");
+    }
+    asyncFun().catch(e => window.alert(`AN ERROR OCCURED! ${e}`))
+  }
+
+  const starPost = (id) => {
+    const asyncFun = async () => {
+      await axios.post( SAPIBase + '/feed/starFeed', {id: id} );
+    }
+    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
@@ -67,6 +85,13 @@ const FeedPage = (props: {}) => {
             <div className={"delete-item"} onClick={(e) => deletePost(`${val._id}`)}>ⓧ</div>
             <h3 className={"feed-title"}>{ val.title }</h3>
             <p className={"feed-body"}>{ val.content }</p>
+            <div className={"edit-post"}>
+              <input type={"text"} value={SEditPostContent} onChange={(e) => setSEditPostContent(e.target.value)}/>
+              <button onClick={(e) => editPost(`${val.id}`, SEditPostContent)}>✎</button>
+            </div>
+            <div className={'star-post'}>
+              <button onClick={(e) => starPost(`${val.id}`)}>☆</button>
+            </div>
           </div>
         ) }
         <div className={"feed-item-add"}>

seminar/.env.example

@@ -1,4 +1,5 @@
 PORT=8080
 NODE_ENV=DEVELOPMENT
-API_KEY=
+USER_ID=mightyian03
+USER_PW=password
 MONGO_URI="mongodb://localhost:27017/todos"

seminar/src/middleware/auth.js

@@ -1,9 +1,8 @@
 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();
-    }
-    else {
+    } else {
         console.log("[AUTH-MIDDLEWARE] Not Authorized User");
         res.status(401).json({ error: "Not Authorized" });
     }

seminar/src/routes/feed.js

@@ -44,6 +44,28 @@ class FeedDB {
         }
     }
 
+    editItem = async ( id, content ) => {
+        try {
+            const OEditFiler = { _id: id };
+            const res = await FeedModel.updateOne(OEditFiler, content);
+            return true;
+        } catch (e) {
+            console.log(`[Feed-DB] Edit Error: ${ e }`);
+            return false;
+        }
+    }
+
+    starItem = async ( id, star ) => {
+        try {
+            const OStarFiler = { _id: id };
+            const res = await FeedModel.updateOne(OStarFiler, star);
+            return true;
+        } catch (e) {
+            console.log(`[Feed-DB] Star Error: ${ e }`);
+            return false;
+        }
+    }
+
     deleteItem = async ( id ) => {
         try {
             const ODeleteFiler = { _id: id };
@@ -81,6 +103,28 @@ router.post('/addFeed', async (req, res) => {
    }
 });
 
+router.post('/editFeed', async (req, res) => {
+    try {
+        const { title, content } = req.body
+        const editResult = await feedDBInst.editItem(id);
+        if(!editResult) return res.status(500).json({ error: dbRes.data })
+        else return res.status(200).json({ isOK: true });
+    } catch (e) {
+        return res.status(500).json({ error: e });
+    }
+});
+
+router.post('/starFeed', async (req, res) => {
+    try {
+        const { title, content } = req.body
+        const starResult = await feedDBInst.starItem(id, star);
+        if(!starResult) return res.status(500).json({ error: dbRes.data })
+        else return res.status(200).json({ isOK: true });
+    } catch (e) {
+        return res.status(500).json({ error: e });
+    }
+});
+
 router.post('/deleteFeed', async (req, res) => {
     try {
         const { id } = req.body;