feat: add post

soma-miniproject22 · Apr 27, 2022 · 27f63a4 · 27f63a4
1 parent e7c4644
commit 27f63a4
Show file tree

Hide file tree

Showing 9 changed files with 169 additions and 112 deletions.
diff --git a/src/App.jsx b/src/App.jsx
@@ -1,5 +1,5 @@
-// import { useEffect } from 'react';
-// import Api from './api/Api';
+import { useEffect } from 'react';
+import Api from './Api';
 
 import WantedList from './components/WantedList';
 import ListNavBar from './components/ListNavBar';
@@ -10,7 +10,7 @@ import kSoup from './assets/img/k-soup.png';
 import board2 from './assets/img/board2.jpg';
 import subway from './assets/img/subway.png';
 import walk from './assets/img/walk.jpg';
-import AddPost from './components/AddPost';
+import AddPostBtn from './components/AddPostBtn';
 
 const tempOriginal = [
   {
@@ -60,12 +60,12 @@ const tempWantedListData = [0, 1, 2, 3, 4, 5].reduce((prev, idx) => {
 }, []);
 
 function App() {
-  // useEffect(() => {
-  //   data = await Api.getCards(); <- 이런거 부르면됩니다.
-  // }, []);
+  useEffect(() => {
+    console.log(Api.getPosts()); // TODO: Post 업데이트
+  }, []);
   return (
     <div className="App">
-      <AddPost />
+      <AddPostBtn />
       <ListNavBar />
       <WantedList list={tempWantedListData} />
     </div>

diff --git a/src/Routers.jsx b/src/Routers.jsx
@@ -1,18 +1,9 @@
-/* eslint-disable prettier/prettier */
-/* eslint-disable no-unused-vars */
-import React, {
-  createContext,
-  useState,
-  useMemo,
-} from 'react';
+import React, { createContext, useState, useMemo } from 'react';
 
-import {
-  BrowserRouter as Router,
-  Routes,
-  Route,
-} from 'react-router-dom';
+import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
 
 import App from './App';
+import AddPost from './pages/AddPost';
 import Redirect from './pages/Redirect';
 
 export const UserContext = createContext({
@@ -31,18 +22,8 @@ const Routers = () => {
         <Routes>
           <Route path="/" element={<App />} />
           <Route path="/redirect" element={<Redirect />} />
-          {/* <Route  path="/about" component={About} />
-          <Route  path="/login" component={Login} />
-          <Route  path="/register" component={Register} />
-          <Route  path="/profile" component={Profile} />
-          <Route  path="/add-post" component={AddPost} />
-          <Route  path="/edit-post/:id" component={EditPost} />
-          <Route  path="/post/:id" component={Post} />
-          <Route  path="/posts" component={Posts} />
-          <Route  path="/users" component={Users} />
-          <Route  path="/user/:id" component={User} />
-          <Route  path="/search" component={Search} /> */}
-          {/* <Route  path="*" component={404_page} /> */}
+          <Route path="/addpost" element={<AddPost />} />
+          {/* <Route  path="*" component={<404_page/>} /> */}
         </Routes>
       </Router>
     </UserContext.Provider>

diff --git a/src/api/index.js b/src/api/index.js
@@ -48,6 +48,10 @@ class Api {
     return await handlePromiseGet('/posts', tags ? { tag: tags } : {});
   }
 
+  async pushPost(info) {
+    return await handlePromisePost('/posts', info);
+  }
+
   async toggleEye() {
     return await handlePromiseGet('/toggleEye');
   }
@@ -63,19 +67,18 @@ class Api {
 
 export default new Api();
 
-// /*
-//   {headers: authHeader()}
-//   Record<string, string>
-// */
-// function authHeader(Iany) {
-//   const tokenStr = localStorage.getItem('accessToken');
-//   return tokenStr
-//     ? {
-//       headers: { 'Authorization': tokenStr },
-//       ...Iany,
-//     }
-//     : { ...Iany };
-// }
+/*
+  {headers: authHeader()}
+  Record<string, string>
+*/
+function authHeader(token) {
+  // eslint-disable-next-line no-unused-vars
+  return token
+    ? {
+        headers: { Authorization: token },
+      }
+    : {};
+}
 
 // eslint-disable-next-line no-unused-vars
 const handlePromiseGet = async (url, params = {}) => {
@@ -90,3 +93,16 @@ const handlePromiseGet = async (url, params = {}) => {
       .catch((e) => reject(e));
   });
 };
+
+const handlePromisePost = async (url, params = {}, token = '') => {
+  return new Promise((resolve, reject) => {
+    Interceptor.getInstance()
+      .post(CONFIG.API_SERVER + url, params, authHeader(token))
+      .then((res) => res.data)
+      .then((res) => {
+        if (!res.error) resolve(res.data);
+        throw new Error(res.error);
+      })
+      .catch((e) => reject(e));
+  });
+};
diff --git a/src/components/AddPost/index.css → src/components/AddPostBtn/index.css b/src/components/AddPost/index.css → src/components/AddPostBtn/index.css
diff --git a/src/components/AddPost/index.jsx → src/components/AddPostBtn/index.jsx b/src/components/AddPost/index.jsx → src/components/AddPostBtn/index.jsx
@@ -2,14 +2,14 @@ import React from 'react';
 import { useNavigate } from 'react-router-dom';
 import './index.css';
 
-const AddPost = () => {
+const AddPostBtn = () => {
   const navigate = useNavigate();
 
   const handleClick = () => {
-    return navigate('/add-post');
+    return navigate('/addpost');
   };
 
   return <i className="plus circle icon" id="add_post" onClick={handleClick} />;
 };
 
-export default AddPost;
+export default AddPostBtn;
diff --git a/src/components/ListNavBar/index.jsx b/src/components/ListNavBar/index.jsx
@@ -1,14 +1,25 @@
 import React from 'react';
+import Api from '../../Api';
 import './index.css';
 
 const NavBar = () => {
+  const handleSignin = () => {
+    Api.signin().then((res) => {
+      if (res) window.location.href = res.response;
+      //TODO : handle login
+    });
+  };
+
   return (
     <header className="l-list-navbar-root">
       <div className="l-list-navbar-logo-container">
         <span className="ec ec-zap l-list-navbar-logo" />
         <h1 className="l-list-navbar-title title-1">소마</h1>
         <h1 className="l-list-navbar-title title-2">번</h1>
         <h1 className="l-list-navbar-title title-3">개</h1>
+        <span className="cursor-pointer" onClick={handleSignin}>
+          로그인 버튼
+        </span>
       </div>
     </header>
   );

diff --git a/src/components/WantedList/index.jsx b/src/components/WantedList/index.jsx
@@ -2,77 +2,94 @@ import './index.css';
 
 import React from 'react';
 import { List } from 'semantic-ui-react';
+import Api from '../../Api';
 
-const CURRENT_CATEGORY = '모두 표시';
+const CURRENT_CATEGORY = '모두 표시'; // MEAL, COFFEE, ALCOHOL, GAME, ETC
 const MAX_NAMES_TO_DISPLAY = 2;
 
-const WantedList = ({ list }) => (
-  <List divided relaxed className="b-list-root">
-    <div className="b-list-root-category-title">{CURRENT_CATEGORY}</div>
+const WantedList = ({ list }) => {
+  const handleEye = () => {
+    Api.toggleEye().then((res) => {
+      if (res) console.log('toggle eye success'); // TODO: update Eye
+    });
+  };
 
-    {list.map(({ id, thumbnailImage, authorName, messageBody, beginAt }) => {
-      // 각 라인 별 더미 데이터 생성 로직
-      const isEyesSelected = authorName !== '김성빈' && Math.random() > 0.5;
-      const isParticipating = isEyesSelected && Math.random() > 0.5;
-      const eyesCount =
-        Math.floor(Math.random() * 5) + (isEyesSelected ? 1 : 0);
-      const handsCount =
-        Math.floor(Math.random() * 10) + (isParticipating ? 1 : 0);
-      const _names = '이상빈 김민겸 김수홍 이형창'
-        .split(' ')
-        .slice(0, Math.min(handsCount, MAX_NAMES_TO_DISPLAY)) // MAX 혹은 카운터 이상으로 표시 x
-        .map((e) => (Math.random() > 0.5 ? e : '')) // 50% 확률로 선택
-        .filter((e) => !!e) // 빈 값 제외
-        .join(' '); // 문자열로 반환
+  const handleHand = () => {
+    Api.toggleHand().then((res) => {
+      if (res) console.log('toggle handle success'); // TODO: update handle
+    });
+  };
 
-      const names =
-        _names + (_names.length > 0 && handsCount > 1 ? ' ...' : '');
+  return (
+    <List divided relaxed className="b-list-root">
+      <div className="b-list-root-category-title">{CURRENT_CATEGORY}</div>
 
-      const isClosed = Math.random() < 0.25;
+      {list.map(({ id, thumbnailImage, authorName, messageBody, beginAt }) => {
+        // 각 라인 별 더미 데이터 생성 로직
+        const isEyesSelected = authorName !== '김성빈' && Math.random() > 0.5;
+        const isParticipating = isEyesSelected && Math.random() > 0.5;
+        const eyesCount =
+          Math.floor(Math.random() * 5) + (isEyesSelected ? 1 : 0);
+        const handsCount =
+          Math.floor(Math.random() * 10) + (isParticipating ? 1 : 0);
+        const _names = '이상빈 김민겸 김수홍 이형창'
+          .split(' ')
+          .slice(0, Math.min(handsCount, MAX_NAMES_TO_DISPLAY)) // MAX 혹은 카운터 이상으로 표시 x
+          .map((e) => (Math.random() > 0.5 ? e : '')) // 50% 확률로 선택
+          .filter((e) => !!e) // 빈 값 제외
+          .join(' '); // 문자열로 반환
 
-      return (
-        <List.Item
-          className={'b-list-item' + (isClosed ? ' b-list-item-closed' : '')}
-          key={id}
-        >
-          <div className="thumb-container">
-            <img src={thumbnailImage} className="thumb" alt="thumbnail" />
-          </div>
-          <List.Content className="b-list-item-content">
-            <List.Header className="b-list-item-header">
-              {authorName}
-            </List.Header>
-            <List.Description className="b-list-item-body">
-              {messageBody}
-            </List.Description>
-            <List.Description className="b-list-item-date">
-              {beginAt}
-            </List.Description>
-            <List.Description className="b-list-item-emoji-root-container">
-              <div
-                className={`b-list-item-emoji-each-container${
-                  isEyesSelected ? '-selected' : ''
-                }`}
-              >
-                <span className="ec ec-eyes"></span>
-                <span>{eyesCount}</span>
-              </div>
-              <div
-                className={`b-list-item-emoji-each-container${
-                  isParticipating ? '-selected' : ''
-                }`}
-              >
-                <span className="ec ec-raised-hand-with-fingers-splayed"></span>
-                <span>
-                  {handsCount} {names}
-                </span>
-              </div>
-            </List.Description>
-          </List.Content>
-        </List.Item>
-      );
-    })}
-  </List>
-);
+        const names =
+          _names + (_names.length > 0 && handsCount > 1 ? ' ...' : '');
+
+        const isClosed = Math.random() < 0.25;
+
+        return (
+          <List.Item
+            className={'b-list-item' + (isClosed ? ' b-list-item-closed' : '')}
+            key={id}
+          >
+            <div className="thumb-container">
+              <img src={thumbnailImage} className="thumb" alt="thumbnail" />
+            </div>
+            <List.Content className="b-list-item-content">
+              <List.Header className="b-list-item-header">
+                {authorName}
+              </List.Header>
+              <List.Description className="b-list-item-body">
+                {messageBody}
+              </List.Description>
+              <List.Description className="b-list-item-date">
+                {beginAt}
+              </List.Description>
+              <List.Description className="b-list-item-emoji-root-container">
+                <div
+                  className={`cursor-pointer b-list-item-emoji-each-container${
+                    isEyesSelected ? '-selected' : ''
+                  }`}
+                  onClick={handleEye}
+                >
+                  <span className="ec ec-eyes"></span>
+                  <span>{eyesCount}</span>
+                </div>
+                <div
+                  className={`cursor-pointer b-list-item-emoji-each-container${
+                    isParticipating ? '-selected' : ''
+                  }`}
+                  onClick={handleHand}
+                >
+                  <span className="ec ec-raised-hand-with-fingers-splayed"></span>
+                  <span>
+                    {handsCount} {names}
+                  </span>
+                </div>
+              </List.Description>
+            </List.Content>
+          </List.Item>
+        );
+      })}
+    </List>
+  );
+};
 
 export default WantedList;
diff --git a/src/index.css b/src/index.css
@@ -9,3 +9,7 @@ code {
   font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
     monospace;
 }
+
+.cursor-pointer {
+  cursor: pointer;
+}
diff --git a/src/pages/AddPost.jsx b/src/pages/AddPost.jsx
@@ -0,0 +1,28 @@
+import React from 'react';
+import { Container, Input, Button } from 'semantic-ui-react';
+import Api from '../Api';
+import NavBar from '../components/ListNavBar';
+
+const AddPost = () => {
+  const handleSubmit = () => {
+    Api.pushPost('input 정보');
+  };
+
+  return (
+    <>
+      <NavBar />
+      <Container fluid>
+        <Input fluid placeholder="내용" />
+        <Input fluid placeholder="약속 시각" />
+        <Input fluid placeholder="종류" />
+        <Input fluid placeholder="모집최대인원" />
+
+        <Button fluid color="blue" onClick={handleSubmit}>
+          올리기
+        </Button>
+      </Container>
+    </>
+  );
+};
+
+export default AddPost;