Merge pull request #54 from fdhhhdjd/release-#2-frontend

Release #2 frontend

frontend/package.json

@@ -73,5 +73,6 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
-  }
+  },
+  "proxy": "http://localhost:5000"
 }

frontend/src/App.js

@@ -1,27 +1,34 @@
+import React, { Suspense } from "react";
+import { Route, Routes } from "react-router-dom";
+import { ToastContainer } from "react-toastify";
 import "./App.css";
-import logo from "./logo.svg";
-import { API_ADMIN } from "./v1/admin_ui/contexts/GlobalStateAdmin";
-import CONFIGS from "./v1/configs/config";
-import { API_USER } from "./v1/user_ui/contexts/GlobalStateUser";
+import RoutesDataUser from "./v1/router/index";
+import { Loading_Pages_Users } from "./v1/user_ui/imports/General_Global_Import";
+import { NotFound } from "./v1/user_ui/imports/Page_Layout_Main_Import";
 function App() {
   return (
-    <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Edit <code>src/App.js</code> and save to reload.
-        </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          <h1>{API_USER}</h1>
-          <h1>{API_ADMIN}</h1>
-        </a>
-      </header>
-    </div>
+    <React.Fragment>
+      <Suspense fallback={<Loading_Pages_Users />}>
+        <ToastContainer position="top-center" />
+        <Routes>
+          {/* User */}
+          {RoutesDataUser.map((item, key) => {
+            return (
+              <React.Fragment key={key}>
+                {item.private === null ? (
+                  <Route path={`/${item.path}`} element={item.main} />
+                ) : (
+                  <Route element={item.private}>
+                    <Route path={`/${item.path}`} element={item.main} />
+                  </Route>
+                )}
+              </React.Fragment>
+            );
+          })}
+          <Route path="*" element={<NotFound />} />
+        </Routes>
+      </Suspense>
+    </React.Fragment>
   );
 }
 

frontend/src/index.js

@@ -1,9 +1,12 @@
 import React from "react";
 import ReactDOM from "react-dom";
+import "react-phone-number-input/style.css";
 import { Provider } from "react-redux";
 import { BrowserRouter as Router } from "react-router-dom";
+import "react-toastify/dist/ReactToastify.css";
 import App from "./App";
 import "./index.css";
+import "./v1/styles/responsive.css";
 import reportWebVitals from "./reportWebVitals";
 import { DataProviderAdmin } from "./v1/admin_ui/contexts/GlobalStateAdmin";
 import store from "./v1/redux/store";

frontend/src/v1/configs/Apis/User_Api/Api_Users.js

@@ -0,0 +1,15 @@
+const API_USERS = {
+  //* Login
+  LOGIN_EMAIL_PHONE: "/api/user/login",
+  LOGIN_PHONE_OTP: "/api/user/login/mobile",
+  LOGIN_GOOGLE: "/api/user/login/google",
+  LOGIN_FACEBOOK: "/api/user/login/facebook",
+
+  //* New Accept Token
+  NEW_ACCESS_TOKEN: "api/user/new/accessToken",
+  //* Logout
+  LOGOUT_USERS: "/api/user/logout",
+  //* Profile
+  GET_PROFILE_USER: "/api/user/profile",
+};
+export default API_USERS;

frontend/src/v1/configs/contants.js

@@ -2,6 +2,7 @@ const CONSTANTS = {
   //* millisecond/ second
   _1_MINUTES: 60 * 1000,
   _5_MINUTES: 5 * 60 * 1000,
+  _15_MINUTES: 15 * 60 * 1000,
   _45_MINUTES: 45 * 60 * 1000,
   _1_DAY: 24 * 60 * 60 * 1000,
   _7_DAY: 7 * 24 * 60 * 60 * 1000,

frontend/src/v1/redux/authentication_slice/Api_Redux_Thunk.js

@@ -0,0 +1,117 @@
+import { createAsyncThunk } from "@reduxjs/toolkit";
+import axios from "axios";
+import API_USERS from "../../configs/Apis/User_Api/Api_Users";
+export const Login_Email_Phone_Initial = createAsyncThunk(
+  "Users/Login/Email/Phone",
+  async ({ email, password, token }, { rejectWithValue }) => {
+    try {
+      const response = await axios.post(`${API_USERS.LOGIN_EMAIL_PHONE}`, {
+        email_phone: email,
+        password,
+      });
+      return response.data;
+    } catch (error) {
+      if (!error.response) {
+        throw error;
+      }
+      return rejectWithValue(error.response.data);
+    }
+  }
+);
+export const Login_Phone_Otp_Initial = createAsyncThunk(
+  "Users/Login/Mobile/Phone",
+  async (phone_number, { rejectWithValue }) => {
+    try {
+      const response = await axios.post(`${API_USERS.LOGIN_PHONE_OTP}`, {
+        phone_number,
+      });
+      return response.data;
+    } catch (error) {
+      if (!error.response) {
+        throw error;
+      }
+      return rejectWithValue(error.response.data);
+    }
+  }
+);
+export const Login_Google_Initial = createAsyncThunk(
+  "Users/Login/Google",
+  async (response_google, { rejectWithValue }) => {
+    try {
+      const response = await axios.post(`${API_USERS.LOGIN_GOOGLE}`, {
+        tokenId: response_google.tokenId,
+      });
+      return response.data;
+    } catch (error) {
+      if (!error.response) {
+        throw error;
+      }
+      return rejectWithValue(error.response.data);
+    }
+  }
+);
+export const Login_Facebook_Initial = createAsyncThunk(
+  "Users/Login/Facebook",
+  async (response_facebook, { rejectWithValue }) => {
+    try {
+      const response = await axios.post(`${API_USERS.LOGIN_FACEBOOK}`, {
+        accessToken: response_facebook.accessToken,
+        userID: response_facebook.userID,
+      });
+      return response.data;
+    } catch (error) {
+      if (!error.response) {
+        throw error;
+      }
+      return rejectWithValue(error.response.data);
+    }
+  }
+);
+export const New_Accept_Token_Initial = createAsyncThunk(
+  "Users/New/Accept/Token",
+  async (token, { rejectWithValue }) => {
+    try {
+      const response = await axios.get(`${API_USERS.NEW_ACCESS_TOKEN}`);
+      return response.data;
+    } catch (error) {
+      if (!error.response) {
+        throw error;
+      }
+      return rejectWithValue(error.response.data);
+    }
+  }
+);
+export const Logout_Users_Initial = createAsyncThunk(
+  "Users/Logout",
+  async (token, { rejectWithValue }) => {
+    const config = {
+      headers: { Authorization: `Bearer Token ${token}` },
+    };
+    try {
+      const response = await axios.get(`${API_USERS.LOGOUT_USERS}`, config);
+      return response.data;
+    } catch (error) {
+      if (!error.response) {
+        throw error;
+      }
+      return rejectWithValue(error.response.data);
+    }
+  }
+);
+export const Profile_Users_Initial = createAsyncThunk(
+  "Users/Profile",
+  async ({ token }, { rejectWithValue }) => {
+    const config = {
+      headers: { Authorization: `Bearer ${token}` },
+    };
+    try {
+      const response = await axios.get(`${API_USERS.GET_PROFILE_USER}`, config);
+      return response.data;
+    } catch (error) {
+      if (!error.response) {
+        throw error;
+      }
+      return rejectWithValue(error.response.data);
+    }
+  }
+);

frontend/src/v1/redux/authentication_slice/AuthenticationSlice.js

@@ -1,20 +1,117 @@
-import { createAsyncThunk, createSlice } from "@reduxjs/toolkit";
-import axios from "axios";
+import { createSlice } from "@reduxjs/toolkit";
+import {
+  Login_Email_Phone_Initial,
+  Login_Facebook_Initial,
+  Login_Google_Initial,
+  Login_Phone_Otp_Initial,
+  Logout_Users_Initial,
+  New_Accept_Token_Initial,
+  Profile_Users_Initial,
+} from "../authentication_slice/Api_Redux_Thunk";
 const initialState = {
   loading: false,
   error: null,
   auth: [],
+  accessToken: null,
+  profile: null,
 };
 const Authentication = createSlice({
-  name: "auth",
+  name: "Authentication_Users",
   initialState,
   reducers: {
-    reset: (state) => {
+    reset_auth: (state) => {
       state.auth = [];
+      state.accessToken = null;
+      state.profile = null;
+    },
+  },
+  extraReducers: {
+    //* Login Email_Phone have Password
+    [Login_Email_Phone_Initial.pending]: (state, action) => {
+      state.loading = true;
+    },
+    [Login_Email_Phone_Initial.fulfilled]: (state, action) => {
+      state.loading = false;
+      state.auth = action.payload;
+    },
+    [Login_Email_Phone_Initial.rejected]: (state, action) => {
+      state.loading = false;
+      state.error = action.payload;
+    },
+    //* Login Phone OTP
+    [Login_Phone_Otp_Initial.pending]: (state, action) => {
+      state.loading = true;
+    },
+    [Login_Phone_Otp_Initial.fulfilled]: (state, action) => {
+      state.loading = false;
+      state.auth = action.payload;
+    },
+    [Login_Phone_Otp_Initial.rejected]: (state, action) => {
+      state.loading = false;
+      state.error = action.payload;
+    },
+    //* Login Google
+    [Login_Google_Initial.pending]: (state, action) => {
+      state.loading = true;
+    },
+    [Login_Google_Initial.fulfilled]: (state, action) => {
+      state.loading = false;
+      state.auth = action.payload;
+    },
+    [Login_Google_Initial.rejected]: (state, action) => {
+      state.loading = false;
+      state.error = action.payload;
+    },
+    //* Login Facebook
+    [Login_Facebook_Initial.pending]: (state, action) => {
+      state.loading = true;
+    },
+    [Login_Facebook_Initial.fulfilled]: (state, action) => {
+      state.loading = false;
+      state.auth = action.payload;
+    },
+    [Login_Facebook_Initial.rejected]: (state, action) => {
+      state.loading = false;
+      state.error = action.payload;
+    },
+    //* Logout Users
+    [Logout_Users_Initial.pending]: (state, action) => {
+      state.loading = true;
+    },
+    [Logout_Users_Initial.fulfilled]: (state, action) => {
+      state.loading = false;
+      state.auth = action.payload;
+    },
+    [Logout_Users_Initial.rejected]: (state, action) => {
+      state.loading = false;
+      state.error = action.payload;
+    },
+    //* New Accept Token
+    [New_Accept_Token_Initial.pending]: (state, action) => {
+      state.loading = true;
+    },
+    [New_Accept_Token_Initial.fulfilled]: (state, action) => {
+      state.loading = false;
+      state.accessToken = action.payload.element.accessToken;
+    },
+    [New_Accept_Token_Initial.rejected]: (state, action) => {
+      state.loading = false;
+      state.error = action.payload;
+    },
+    //* New Accept Token
+    [Profile_Users_Initial.pending]: (state, action) => {
+      state.loading = true;
+    },
+    [Profile_Users_Initial.fulfilled]: (state, action) => {
+      state.loading = false;
+      state.profile = action.payload;
+    },
+    [Profile_Users_Initial.rejected]: (state, action) => {
+      state.loading = false;
+      state.error = action.payload;
     },
   },
-  extraReducers: {},
 });
 const AuthenticationSlice = Authentication.reducer;
-export const { reset } = Authentication.actions;
+export const { reset_auth } = Authentication.actions;
 export default AuthenticationSlice;

frontend/src/v1/redux/store.js

@@ -10,25 +10,15 @@ const rootReducer = (state, action) => {
   return AuthenticationSlice(state, action);
 };
 let store;
-if (CONFIGS.NODE_ENV === "development") {
-  store = configureStore({
-    reducer: {
-      auth_user: AuthenticationSlice,
-      reducer: rootReducer,
-    },
+store = configureStore({
+  reducer: {
+    auth_user: AuthenticationSlice,
+    reducer: rootReducer,
+  },
 
-    middleware: (getDefaultMiddleware) => getDefaultMiddleware().concat(logger),
-    // middleware: (getDefaultMiddleware) => getDefaultMiddleware(),
-    // devTools: process.env.NODE_ENV !== "production",
-  });
-} else {
-  store = configureStore({
-    reducer: {
-      reducer: rootReducer,
-    },
-
-    middleware: (getDefaultMiddleware) => getDefaultMiddleware().concat(thunk),
-  });
-}
+  middleware: (getDefaultMiddleware) => getDefaultMiddleware().concat(logger),
+  // middleware: (getDefaultMiddleware) => getDefaultMiddleware(),
+  // devTools: process.env.NODE_ENV !== "production",
+});
 
 export default store;