HW Done (finally)

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 [ ID, setID ] = React.useState<string>("");
+  const [ PW, setPW ] = 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: ID, pw: PW });
       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', { id: ID, pw: PW, amount: amount });
       setNTransaction(0);
       if (!data.success) {
         window.alert('Transaction Failed:' + data.msg);
@@ -40,7 +41,8 @@ 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 ID: <input type={"text"} value={ID} onChange={e => setID(e.target.value)}/>
+        Enter PW: <input type={"text"} value={PW} onChange={f => setPW(f.target.value)}/>
         <button onClick={e => getAccountInformation()}>GET</button>
       </div>
       <div className={"account-bank"}>

client/src/pages/css/feed.css

@@ -38,7 +38,19 @@
     font-size: 18px;
 }
 
+.edit-item {
+    position: absolute;
+    right: 15px;
+    top: 30px;
+    color: red;
+    font-size: 18px;
+}
+
 .delete-item:hover {
     font-weight: bold;
     cursor: pointer;
+}
+
+.editinput {
+    margin-bottom: 20px;
 }

client/src/pages/feed.tsx

@@ -4,13 +4,16 @@ 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, joayo: 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 [ EditDummy, setEditDummy ] = React.useState<number>(0);
+  const [ EditContent, setEditContent ] = React.useState<string>("");
 
   React.useEffect( () => {
     let BComponentExited = false;
@@ -23,7 +26,7 @@ const FeedPage = (props: {}) => {
     };
     asyncFun().catch((e) => window.alert(`Error while running API Call: ${e}`));
     return () => { BComponentExited = true; }
-  }, [ NPostCount ]);
+  }, [ NPostCount, EditDummy]);
 
   const createNewPost = () => {
     const asyncFun = async () => {
@@ -44,6 +47,23 @@ const FeedPage = (props: {}) => {
     asyncFun().catch(e => window.alert(`AN ERROR OCCURED! ${e}`));
   }
 
+  const editPost = (id: string, content:string) => {
+    const asyncFun = async () => {
+      // One can set X-HTTP-Method header to DELETE to specify deletion as well
+      await axios.post( SAPIBase + '/feed/editFeed', { id: id, content: content } );
+      setEditDummy(EditDummy + 1);
+    }
+    asyncFun().catch(e => window.alert(`AN ERROR OCCURED! ${e}`));
+    setEditContent("");
+  }
+  const plusJoayo = (id: string) => {
+    const asyncFun = async () => {
+      // One can set X-HTTP-Method header to DELETE to specify deletion as well
+      await axios.post( SAPIBase + '/feed/joayo', { id: id } );
+      setEditDummy(EditDummy+1);
+    }
+    asyncFun().catch(e => window.alert(`AN ERROR OCCURED! ${e}`));
+  }
   return (
     <div className="Feed">
       <Header/>
@@ -59,7 +79,15 @@ const FeedPage = (props: {}) => {
           <div key={i} className={"feed-item"}>
             <div className={"delete-item"} onClick={(e) => deletePost(`${val.id}`)}>ⓧ</div>
             <h3 className={"feed-title"}>{ val.title }</h3>
+            <div className={"joayo"}>
+              <button onClick={(e) => plusJoayo(`${val.id}`)}>👍</button>
+              <h3 className={"joayo-num"}>{ `${val.joayo}` }</h3>
+            </div>
             <p className={"feed-body"}>{ val.content }</p>
+            <div className="editinput">
+              <input type={"text"} value={EditContent} onChange={(e) => setEditContent(e.target.value)} placeholder="Wanna Edit?" />
+              <button onClick={(e) => editPost(`${val.id}`, EditContent)}>✏️</button>
+            </div>
           </div>
         ) }
         <div className={"feed-item-add"}>

seminar/.env.example

@@ -1,3 +1,4 @@
 PORT=8080
 NODE_ENV=DEVELOPMENT
-API_KEY=
+API_KEY=
+ACCOUNT={"id" : "", "pw": "" }

seminar/package.json

@@ -13,7 +13,7 @@
   "dependencies": {
     "cors": "^2.8.5",
     "dotenv": "^16.0.0",
-    "ejs": "^3.1.7",
+    "ejs": "^3.1.10",
     "express": "^4.17.3"
   },
   "devDependencies": {

seminar/src/middleware/auth.js

@@ -1,6 +1,9 @@
 const authMiddleware = (req, res, next) => {
-    if (req.body.credential === process.env.API_KEY) {
+    const json = process.env.ACCOUNT;
+    const obj = JSON.parse(json);
+    if (req.body.id === obj.id && req.body.pw === obj.pw) {
         console.log("[AUTH-MIDDLEWARE] Authorized User");
+        console.log(obj.id);
         next();
     }
     else {

seminar/src/routes/feed.js

@@ -9,10 +9,12 @@ 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", joayo: 0}];
 
     constructor() { console.log("[Feed-DB] DB Init Completed"); }
 
+
+
     selectItems = ( count ) => {
         if (count > this.#itemCount) return { success: false, data: "Too many items queried"  };
         if (count < 0) return { success: false, data: "Invalid count provided" };
@@ -21,11 +23,16 @@ class FeedDB {
 
     insertItem = ( item ) => {
         const { title, content } = item;
-        this.#LDataDB.push({ id: this.#id, title, content });
+        this.#LDataDB.push({ id: this.#id, title, content, joayo: 0 });
         this.#id++; this.#itemCount++;
         return true;
     }
 
+    editItem = ( id, content ) => {
+        this.#LDataDB.find(x => x.id == parseInt(id)).content = content;
+        return true;
+    }
+
     deleteItem = ( id ) => {
         let BItemDeleted = false;
         this.#LDataDB = this.#LDataDB.filter((value) => {
@@ -36,6 +43,11 @@ class FeedDB {
         if (BItemDeleted) id--;
         return BItemDeleted;
     }
+
+    joayo = ( id ) => {
+        this.#LDataDB.find(x => x.id == parseInt(id)).joayo += 1;
+        return true;
+    }
 }
 
 const feedDBInst = FeedDB.getInst();
@@ -62,6 +74,18 @@ router.post('/addFeed', (req, res) => {
    }
 });
 
+router.post('/editFeed', (req, res) => {
+
+    try {   
+        const { id, content } = req.body;
+        const editResult = feedDBInst.editItem(id, content);
+        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('/deleteFeed', (req, res) => {
     try {
         const { id } = req.body;
@@ -73,4 +97,15 @@ router.post('/deleteFeed', (req, res) => {
     }
 })
 
+
+router.post('/joayo', (req, res) => {
+    try {
+        const { id } = req.body;
+        const joayoResult = feedDBInst.joayo(id);
+        if (!joayoResult) return res.status(500).json({ error: "Joayo Failed.." })
+        else return res.status(200).json({ isOK: true });
+    } catch (e) {
+        return res.status(500).json({ error: e });
+    }
+})
 module.exports = router;