Express Homework Submission by 안채연(chacha)

client/src/pages/account.tsx

@@ -4,15 +4,39 @@ import axios from "axios";
 import {SAPIBase} from "../tools/api";
 import "./css/account.css";
 
+interface IAPIResponse  { id: number, spend: string, purpose: string }
+
 const AccountPage = () => {
-  const [ SAPIKEY, setSAPIKEY ] = React.useState<string>("");
+  const [ password, setPASSWORD ] = React.useState<string>("");
+  const [ username, setUSERNAME ] = React.useState<string>("");
+  const [ spend, setSPEND ] = React.useState<string>("");
+  const [ purpose, setPURPOSE ] = React.useState<string>("");
   const [ NBalance, setNBalance ] = React.useState<number | "Not Authorized">("Not Authorized");
   const [ NTransaction, setNTransaction ] = React.useState<number | ''>(0);
+  const [ LAPIResponse, setLAPIResponse ] = React.useState<IAPIResponse[]>([]);
+  const [ NPostCount, setNPostCount ] = React.useState<number>(0);
+  const [ NModifyCount, setNModifyCount ] = React.useState<number>(0);
+
+
+  React.useEffect( () => {
+    let BComponentExited = false;
+    const asyncFun = async () => {
+      const { data } = await axios.get<IAPIResponse[]>( SAPIBase + '/account/getBook');
+      console.log(data);
+      // const data = [ { id: 0, title: "test1", content: "Example body" }, { id: 1, title: "test2", content: "Example body" }, { id: 2, title: "test3", content: "Example body" } ].slice(0, NPostCount);
+      if (BComponentExited) return;
+      setLAPIResponse(data);
+    };
+    asyncFun().catch((e) => window.alert(`Error while running API Call: ${e}`));
+    return () => { BComponentExited = true; }
+  }, [ NPostCount, NModifyCount ]);
+
+
 
   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: password });
       setNBalance(data.balance);
     }
     asyncFun().catch((e) => window.alert(`AN ERROR OCCURED: ${e}`));
@@ -22,7 +46,10 @@ 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: password, amount: amount });
+
+      setSPEND("" + amount);
+
       setNTransaction(0);
       if (!data.success) {
         window.alert('Transaction Failed:' + data.msg);
@@ -35,12 +62,43 @@ const AccountPage = () => {
     asyncFun().catch((e) => window.alert(`AN ERROR OCCURED: ${e}`));
   }
 
+  const createNewPost = () => {
+    const asyncFun = async () => {
+      await axios.post( SAPIBase + '/account/addBook', { spend: spend, purpose: purpose } );
+      setNPostCount(NPostCount + 1);
+      setSPEND("");
+      setPURPOSE("");
+    }
+    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
+      await axios.post( SAPIBase + '/account/deleteBook', { id: id } );
+      setNPostCount(Math.max(NPostCount - 1, 0));
+    }
+    asyncFun().catch(e => window.alert(`AN ERROR OCCURED! ${e}`));
+  }
+
+  const modifyPost = (id: string) => {
+    const asyncFun = async () => {
+      await axios.post( SAPIBase + '/account/modifyBook', { id: id, spend: spend, purpose: purpose } );
+      setSPEND("");
+      setPURPOSE("");
+      setNModifyCount(NModifyCount + 1);
+    }
+    asyncFun().catch(e => window.alert(`AN ERROR OCCURED! ${e}`));
+  }
+
   return (
     <div className={"account"}>
       <Header/>
-      <h2>Account</h2>
+      <div className = {"title"}><h2>Account</h2></div>
       <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)}/>
+        <br />
+        Enter Password: <input type={"text"} value={password} onChange={e => setPASSWORD(e.target.value)}/>
         <button onClick={e => getAccountInformation()}>GET</button>
       </div>
       <div className={"account-bank"}>
@@ -55,6 +113,32 @@ const AccountPage = () => {
           <button onClick={e => performTransaction(NTransaction === '' ? '' : NTransaction * -1)}>WITHDRAW</button>
         </div>
       </div>
+
+      <div className={"account-book-title"}>
+        <h2>가계부</h2>
+        <p>수입 / 지출을 기록해 보세요.</p>
+      </div>
+      <div className={"account-book-input"}>
+        금액 <input type={"number"} value={spend} onChange={e => setSPEND(e.target.value)} className={"input-spend"}/> 원
+        <br />
+        내역 <input type={"text"} value={purpose} onChange={e => setPURPOSE(e.target.value)} className={"input-purpose"}/>
+        <button className={"book-add-button"} onClick={(e) => createNewPost()}>OK</button>
+      </div>
+
+      <div className={"added-books"}>
+      { LAPIResponse.map( (val, i) =>
+          <div key={i} className={"book-item"}>
+            <div className={"modify-book-item"} onClick={(e) => modifyPost(`${val.id}`)}>✎</div>
+            <div className={"delete-book-item"} onClick={(e) => deletePost(`${val.id}`)}>ⓧ</div>
+
+            <h3 className={"book-title"}>{ val.spend } 원</h3>
+            <p className={"book-body"}>{ val.purpose }</p>
+          </div>
+        ) 
+      }
+      </div>
+
+
     </div>
   );
 }

client/src/pages/css/account.css

@@ -1,3 +1,5 @@
+
+
 .account-bank {
     margin: 20px auto;
     border: solid 1px rgba(0,0,0,0.3);
@@ -30,4 +32,101 @@
 
 .transaction {
     margin: 30px 0 10px 0;
-}
+}
+
+.account-book-title p {
+    color: gray;
+}
+
+.account-book-input {
+
+    border: 1px solid black;
+    border-radius: 8px;
+    width: 40%;
+    justify-content: space-between;
+    align-items: center;
+    margin-left: 30%;
+    margin-right: 30%;
+    margin-bottom: 40px;
+
+
+}
+
+.input-spend {
+    border: 1pt solid #ccc;
+    border-radius: 5px;
+    height: 25px;
+    width: 150px;
+    margin: 10px;
+
+
+}
+
+.input-purpose {
+    border: 1pt solid #ccc;
+    border-radius: 5px;
+    height: 25px;
+    width: 300px;
+    margin: 10px;
+}
+
+.book-add-button {
+    border: 1px solid #ccc;
+    background-color: #ccc;
+    border-radius: 5px;
+    height: 30px;
+    width: 40px;
+}
+
+
+.book-item {
+    position: relative;
+    border: 1px solid black;
+    border-radius: 5px;
+    width: 40%;
+    margin-left: 30%;
+    margin-right: 30%;
+    height: 100px;
+    margin-top: 10px;
+
+}
+
+.book-title {
+
+    position: absolute;
+    left: 40px;
+    top: 12px;
+    margin: 10px;
+}
+
+.book-body {
+    position: absolute;
+    left: 40px;
+    top: 50px;
+    margin: 10px;
+}
+
+.delete-book-item {
+    position: absolute;
+    right: 15px;
+    top: 12px;
+    color: red;
+    font-size: 18px;
+    font-weight: 300;
+}
+
+.modify-book-item {
+    color: blue;
+    position: absolute;
+    right: 45px;
+    top: 12px;
+    font-size: 18px;
+}
+
+.delete-book-item:hover, .modify-book-item:hover {
+    cursor: pointer;
+    font-weight: bolder;
+    font-size:larger
+}
+
+

client/src/pages/css/feed.css

@@ -38,7 +38,15 @@
     font-size: 18px;
 }
 
-.delete-item:hover {
+.modify-item {
+    position: absolute;
+    right: 45px;
+    top: 12px;
+    color: blue;
+    font-size: 18px;
+}
+
+.delete-item, .modify-item:hover {
     font-weight: bold;
     cursor: pointer;
 }

client/src/pages/feed.tsx

@@ -9,6 +9,7 @@ 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 [ NModifyCount, setNModifyCount ] = React.useState<number>(0);
   const [ SNewPostTitle, setSNewPostTitle ] = React.useState<string>("");
   const [ SNewPostContent, setSNewPostContent ] = React.useState<string>("");
 
@@ -23,7 +24,7 @@ const FeedPage = (props: {}) => {
     };
     asyncFun().catch((e) => window.alert(`Error while running API Call: ${e}`));
     return () => { BComponentExited = true; }
-  }, [ NPostCount ]);
+  }, [ NPostCount, NModifyCount ]);
 
   const createNewPost = () => {
     const asyncFun = async () => {
@@ -44,6 +45,16 @@ const FeedPage = (props: {}) => {
     asyncFun().catch(e => window.alert(`AN ERROR OCCURED! ${e}`));
   }
 
+  const modifyPost = (id: string) => {
+    const asyncFun = async () => {
+      await axios.post( SAPIBase + '/feed/modifyFeed', { id: id, title: SNewPostTitle, content: SNewPostContent } );
+      setSNewPostTitle("");
+      setSNewPostContent("");
+      setNModifyCount(NModifyCount + 1);
+    }
+    asyncFun().catch(e => window.alert(`AN ERROR OCCURED! ${e}`));
+  }
+
   return (
     <div className="Feed">
       <Header/>
@@ -58,6 +69,7 @@ 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={"modify-item"} onClick={(e) => modifyPost(`${val.id}`)}>✎</div>
             <h3 className={"feed-title"}>{ val.title }</h3>
             <p className={"feed-body"}>{ val.content }</p>
           </div>

seminar/.env.example

@@ -1,3 +1,5 @@
 PORT=8080
 NODE_ENV=DEVELOPMENT
-API_KEY=
+USERNAME="chacha"
+PASSWORD="chacha"
+MONGO_URI="mongodb://localhost:27017/todos"

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.credentialID == process.env.USERNAME) && (req.body.credentialPW == process.env.PASSWORD)) {
         console.log("[AUTH-MIDDLEWARE] Authorized User");
         next();
     }