fix: API controller simplify

package.json

@@ -9,6 +9,7 @@
     "axios": "^0.26.1",
     "react": "^18.0.0",
     "react-dom": "^18.0.0",
+    "react-router-dom": "^6.3.0",
     "react-scripts": "5.0.1",
     "semantic-ui-css": "^2.4.1",
     "semantic-ui-react": "^2.1.2",

src/App.js → src/App.jsx

@@ -10,6 +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';
 
 const tempOriginal = [
   {
@@ -64,6 +65,7 @@ function App() {
   // }, []);
   return (
     <div className="App">
+      <AddPost />
       <ListNavBar />
       <WantedList list={tempWantedListData} />
     </div>

src/Routers.jsx

@@ -0,0 +1,52 @@
+/* eslint-disable prettier/prettier */
+/* eslint-disable no-unused-vars */
+import React, {
+  createContext,
+  useState,
+  useMemo,
+} from 'react';
+
+import {
+  BrowserRouter as Router,
+  Routes,
+  Route,
+} from 'react-router-dom';
+
+import App from './App';
+import Redirect from './pages/Redirect';
+
+export const UserContext = createContext({
+  token: '',
+  setToken: () => {},
+});
+
+const Routers = () => {
+  const [token, setToken] = useState('');
+
+  const value = useMemo(() => ({ token, setToken }), [token, setToken]);
+
+  return (
+    <UserContext.Provider value={value}>
+      <Router>
+        <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} /> */}
+        </Routes>
+      </Router>
+    </UserContext.Provider>
+  );
+};
+
+export default Routers;

src/api/config.js

@@ -1,5 +1,5 @@
 const config = {
-  API_SERVER: 'http://localhost:3000/api', // api server url
+  API_SERVER: 'http://3.39.151.74/api', // api server url
   BASE_URL: 'http://localhost:3000', // production url
 };
 

src/api/Api.js → src/api/index.js

@@ -17,23 +17,14 @@ class Api {
    *  }
    *  ```
    */
-  signin() {
-    return new Promise((resolve, reject) => {
-      Interceptor.getInstance()
-        .get(CONFIG.API_SERVER + '/authenticate/github', {
-          params: { redirect: CONFIG.BASE_URL },
-        })
-        .then((res) => res.data)
-        .then((res) => {
-          if (!res.error) resolve(res.data);
-          throw new Error(res.error);
-        })
-        .catch((e) => reject(e));
+  async signin() {
+    return await handlePromiseGet('/authenticate/github', {
+      redirect: CONFIG.BASE_URL,
     });
   }
 
   /**
-   *  get Information of Cards
+   *  get Information of Posts
    *  @param {Date} required_date - required_date of cards
    *  @return {Object} response
    *  @example
@@ -53,29 +44,20 @@ class Api {
    *  }
    *  ```
    */
-  getCards(required_date = new Date()) {
-    return new Promise((resolve, reject) => {
-      Interceptor.getInstance()
-        .get(CONFIG.API_SERVER + '/cards', {
-          params: { date: required_date },
-        })
-        .then((res) => res.data)
-        .then((res) => {
-          if (!res.error) resolve(res.data);
-          throw new Error(res.error);
-        })
-        .catch((e) => reject(e));
-    });
+  async getPosts(tags) {
+    return await handlePromiseGet('/posts', tags ? { tag: tags } : {});
+  }
+
+  async toggleEye() {
+    return await handlePromiseGet('/toggleEye');
   }
 
-  // authenticated zone below
-  // getStat(survey_id) {
-  //   return new Promise((resolve, reject) => {
-  //     Interceptor.getInstance()
-  //       .post(CONFIG.API_SERVER + '/result/stats', survey_id, authHeader({}))
-  //       .then((res) => resolve(res.data))
-  //       .catch(reject);
-  //   });
+  async toggleHand() {
+    return await handlePromiseGet('/toggleHand');
+  }
+
+  // async addPost(post) {
+  //   return await handlePromisePost('/posts', post);
   // }
 }
 
@@ -89,8 +71,22 @@ export default new Api();
 //   const tokenStr = localStorage.getItem('accessToken');
 //   return tokenStr
 //     ? {
-//       headers: { 'x-access-token': tokenStr },
+//       headers: { 'Authorization': tokenStr },
 //       ...Iany,
 //     }
 //     : { ...Iany };
 // }
+
+// eslint-disable-next-line no-unused-vars
+const handlePromiseGet = async (url, params = {}) => {
+  return new Promise((resolve, reject) => {
+    Interceptor.getInstance()
+      .get(CONFIG.API_SERVER + url, { params: params })
+      .then((res) => res.data)
+      .then((res) => {
+        if (!res.error) resolve(res.data);
+        throw new Error(res.error);
+      })
+      .catch((e) => reject(e));
+  });
+};

src/components/AddPost/index.css

@@ -0,0 +1,7 @@
+#add_post {
+  position: fixed;
+  font-size: 3em;
+  right: 10px;
+  bottom: 10px;
+  cursor: pointer;
+}

src/components/AddPost/index.jsx

@@ -0,0 +1,15 @@
+import React from 'react';
+import { useNavigate } from 'react-router-dom';
+import './index.css';
+
+const AddPost = () => {
+  const navigate = useNavigate();
+
+  const handleClick = () => {
+    return navigate('/add-post');
+  };
+
+  return <i className="plus circle icon" id="add_post" onClick={handleClick} />;
+};
+
+export default AddPost;

src/index.js

@@ -1,13 +1,13 @@
 import React from 'react';
 import ReactDOM from 'react-dom/client';
 import './index.css';
-import App from './App';
+import Routers from './Routers';
 import reportWebVitals from './reportWebVitals';
 
 const root = ReactDOM.createRoot(document.getElementById('root'));
 root.render(
   <React.StrictMode>
-    <App />
+    <Routers />
   </React.StrictMode>,
 );
 

src/pages/Redirect.jsx

@@ -0,0 +1,16 @@
+/* eslint-disable no-unused-vars */
+import React, { useContext } from 'react';
+import { useSearchParams } from 'react-router-dom';
+import { UserContext } from '../Routers';
+
+function Redirect() {
+  const [searchParams, setSearchParams] = useSearchParams();
+  const { token, setToken } = useContext(UserContext);
+
+  if (searchParams.get('access_token'))
+    setToken(searchParams.get('access_token'));
+
+  return <div />;
+}
+
+export default Redirect;