HW Done (malloc)

README.md

@@ -2,12 +2,13 @@
 Repository for Node / Express Seminar @ SPARCS
 
 Code by [Jiho Park](https://github.com/UrWrstNightmare) (Night @ SPARCS)
+Task Done by [Jeeyun Choi]() (malloc @ SPARCS)
 
 ---
 ### Folder Structure
 |- client :  Example client for seminar\
-|- seminar:  Files used in seminar\
-|- homework : Homework Directory
+|- seminar:  Files used in seminar
 
 
 ### How to Run
+Do `npm install` and `npm start` on both client & seminar directory

client/src/components/Type.tsx

@@ -0,0 +1,21 @@
+import React from "react";
+
+interface TypeDropDownProps {
+    value: string;
+    setSNewPostType: React.Dispatch<React.SetStateAction<string>>;
+    setIsOpen: React.Dispatch<React.SetStateAction<boolean>>;
+    isOpen: boolean;
+}
+
+const Type: React.FC<TypeDropDownProps> = ({ value, setSNewPostType, setIsOpen, isOpen }) => {
+    const handleValueClick = () => {
+        setSNewPostType(value);
+        setIsOpen(!isOpen);
+    };
+
+    return (
+        <li  className={"type-dropdown-list"}   onClick={handleValueClick}>{value}</li>
+    );
+};
+
+export default Type;

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 [ username, setUsername ] = 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', { credentialID: username, credentialPW: 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', { credentialID: username, credentialPW: 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 Username: <input type={"text"} value={username} onChange={e => setUsername(e.target.value)}/>
+        Enter Password: <input type={"text"} value={pw} onChange={e => setPw(e.target.value)}/>
         <button onClick={e => getAccountInformation()}>GET</button>
       </div>
       <div className={"account-bank"}>

client/src/pages/css/feed.css

@@ -38,7 +38,37 @@
     font-size: 18px;
 }
 
+.edit-item {
+    position: absolute;
+    border: 1px solid black;
+    border-radius: 4px;
+    padding: 2px;
+    background-color: lightgray;
+    font-size: 12px;
+    right: 15px;
+    top: 50px;
+}
+
+.edit-item:hover {
+    font-weight: bold;
+    cursor: pointer;
+}
+
 .delete-item:hover {
     font-weight: bold;
     cursor: pointer;
+}
+
+ul {
+    list-style: none;
+}
+
+.feed-type-dropdown {
+    display:inline;
+}
+
+.type-dropdown-list:hover {
+    background-color: lightgray;
+    font-weight: bold;
+    cursor: pointer;
 }

client/src/pages/feed.tsx

@@ -2,15 +2,41 @@ import React from "react";
 import axios from "axios";
 import { SAPIBase } from "../tools/api";
 import Header from "../components/header";
+import Type from "../components/Type";
 import "./css/feed.css";
 
-interface IAPIResponse  { id: number, title: string, content: string }
+interface IAPIResponse  { id: number, title: string, content: string, type: string }
 
 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 [ SNewPostType, setSNewPostType] = React.useState<string>("");
+
+  const dropDownRef = React.useRef(null);
+  const typeList:string[] =["BLOG", "INFO", "OTHERS"];
+  const useTypeState = (ref: React.MutableRefObject<HTMLDivElement | null>) => {
+    const [isOpen, setIsOpen] = React.useState<boolean>(false);
+
+    React.useEffect(() => {
+      const pageClickEvent = (e: MouseEvent) => {
+        if (ref.current && !ref.current.contains(e.target as Node)) {
+          setIsOpen(!isOpen);
+        }
+      };
+
+      if (isOpen) {
+        window.addEventListener('click', pageClickEvent);
+      }
+
+      return () => {
+        window.removeEventListener('click', pageClickEvent);
+      };
+    }, [isOpen, ref]);
+    return [isOpen, setIsOpen];
+  }
+  const [isOpen, setIsOpen] = useTypeState(dropDownRef) as [boolean, React.Dispatch<React.SetStateAction<boolean>>];;
 
   React.useEffect( () => {
     let BComponentExited = false;
@@ -27,10 +53,11 @@ 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, type: SNewPostType } );
       setNPostCount(NPostCount + 1);
       setSNewPostTitle("");
       setSNewPostContent("");
+      setSNewPostType("");
     }
     asyncFun().catch(e => window.alert(`AN ERROR OCCURED! ${e}`));
   }
@@ -44,6 +71,22 @@ const FeedPage = (props: {}) => {
     asyncFun().catch(e => window.alert(`AN ERROR OCCURED! ${e}`));
   }
 
+  const editPost = (id: string, newTitle: string, newContent: string, type: string) => {
+    const asyncFun = async () => {
+      await axios.post( SAPIBase + '/feed/editFeed', { id: id, title: newTitle, content: newContent, type: type } );
+      const posts = LAPIResponse.map((tmp)=>{
+        if (tmp.id===parseInt(id)) {
+          tmp.title=newTitle;
+          tmp.content=newContent;
+          tmp.type=type;
+        }
+        return tmp;
+      });
+      setLAPIResponse(posts);
+    }
+    asyncFun().catch(e => window.alert(`AN ERROR OCCURED! ${e}`));
+  }
+
   return (
     <div className="Feed">
       <Header/>
@@ -55,14 +98,39 @@ const FeedPage = (props: {}) => {
         />
       </div>
       <div className={"feed-list"}>
-        { LAPIResponse.map( (val, i) =>
-          <div key={i} className={"feed-item"}>
-            <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>
-        ) }
+        {LAPIResponse.map((val, i) =>
+            <div key={i} className={"feed-item"}>
+              <div className={"feed-type"}>{val.type}</div>
+              <div className={"delete-item"} onClick={(e) => deletePost(`${val.id}`)}>ⓧ</div>
+              <div className={"edit-item"} onClick={(e) => {
+                const newTitle = window.prompt("Enter new title: ", val.title);
+                const newContent = window.prompt("Enter new content: ", val.content);
+                if (newTitle && newContent) editPost(`${val.id}`, newTitle, newContent, `${val.type}`);
+              }}>Edit
+              </div>
+              <h3 className={"feed-title"}>{val.title}</h3>
+              <p className={"feed-body"}>{val.content}</p>
+            </div>
+        )}
         <div className={"feed-item-add"}>
+          Category:&nbsp;&nbsp;
+        <div className={"feed-type-dropdown"} ref={dropDownRef}>
+            <input
+                onClick={() => setIsOpen((open: boolean) => !open)}
+                type='button'
+                value={SNewPostType}
+            />
+            ...
+            {isOpen &&
+                <ul>
+                  {typeList.map((value, index) => (
+                      <Type key={index} value={value} setIsOpen={setIsOpen}
+                            setSNewPostType={setSNewPostType} isOpen={isOpen}/>
+                  ))}
+                </ul>
+            }
+          </div>
+          <br/>
           Title: <input type={"text"} value={SNewPostTitle} onChange={(e) => setSNewPostTitle(e.target.value)}/>
           &nbsp;&nbsp;&nbsp;&nbsp;
           Content: <input type={"text"} value={SNewPostContent} onChange={(e) => setSNewPostContent(e.target.value)}/>

seminar/.env.example

@@ -1,3 +1,4 @@
 PORT=8080
 NODE_ENV=DEVELOPMENT
-API_KEY=
+USERNAME="sample"
+PASSWORD="sample"

seminar/package.json

@@ -14,7 +14,8 @@
     "cors": "^2.8.5",
     "dotenv": "^16.0.0",
     "ejs": "^3.1.7",
-    "express": "^4.17.3"
+    "express": "^4.17.3",
+    "prettier": "^3.2.5"
   },
   "devDependencies": {
     "nodemon": "^2.0.15"

seminar/src/middleware/auth.js

@@ -1,9 +1,12 @@
+require('dotenv').config()
+
 const authMiddleware = (req, res, next) => {
-    if (req.body.credential === process.env.API_KEY) {
+    if (req.body.credentialID === process.env.id && req.body.credentialPW === process.env.pw) {
         console.log("[AUTH-MIDDLEWARE] Authorized User");
         next();
     }
     else {
+        console.log(process.env.id, process.env.pw);
         console.log("[AUTH-MIDDLEWARE] Not Authorized User");
         res.status(401).json({ error: "Not Authorized" });
     }