Merge pull request Dev-47#49 from struckchure/main

adds redux and connected sign in endpoint

web/package.json

@@ -8,10 +8,15 @@
   },
   "dependencies": {
     "@tailwindcss/forms": "^0.4.0",
+    "axios": "^0.24.0",
     "postcss-import": "^14.0.2",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
-    "react-router-dom": "6"
+    "react-redux": "^7.2.6",
+    "react-router-dom": "6",
+    "redux": "^4.1.2",
+    "redux-devtools-extension": "^2.13.9",
+    "redux-thunk": "^2.4.1"
   },
   "devDependencies": {
     "@vitejs/plugin-react": "^1.0.7",

web/src/App.jsx

@@ -3,11 +3,13 @@ import React from "react";
 import "./assets/scss/style.scss";
 
 import Router from "./router";
-import { Provider } from "./context";
+import store from "./store";
+
+import { Provider } from "react-redux";
 
 export default function App() {
   return (
-    <Provider>
+    <Provider store={store}>
       <Router />
     </Provider>
   );

web/src/pages/auth/SignIn.jsx

@@ -1,11 +1,43 @@
-import AuthLayout from "../../layouts/AuthLayout";
-import InputGroup from "../../components/auth/InputGroup";
+import React, { useState } from "react";
+import { connect } from "react-redux";
+
+import { loginUser } from "../../store/actions/auth";
+
+function SignIn({ loginUser }) {
+  const [username, set_username] = useState("");
+  const [password, set_password] = useState("");
+
+  const __login_user = (username, password) => {
+    loginUser({ username, password });
+  };
 
-export default function SignIn() {
   return (
-    <AuthLayout pgtitle="Login">
-      <InputGroup type="text" contenttitle="Username" />
-      <InputGroup type="password" contenttitle="Password" />
-    </AuthLayout>
+    <div>
+      <form
+        onSubmit={(e) => {
+          e.preventDefault();
+          __login_user(username, password);
+        }}
+      >
+        <input
+          type="text"
+          value={username}
+          onChange={(e) => {
+            set_username(e.target.value);
+          }}
+        />
+        <input
+          type="password"
+          value={password}
+          onChange={(e) => {
+            set_password(e.target.value);
+          }}
+        />
+
+        <button>Login</button>
+      </form>
+    </div>
   );
 }
+
+export default connect(null, { loginUser })(SignIn);

web/src/store/actions/auth.js

@@ -0,0 +1,23 @@
+import { AUTH_LOGIN } from "../types";
+import { api } from "../utils";
+
+export const loginUser = (user_creds) => async (dispatch) => {
+  await api({
+    url: "/accounts/login/",
+    method: "POST",
+    data: user_creds,
+  })
+    .then((response) => {
+      dispatch({
+        type: AUTH_LOGIN,
+        payload: response.data,
+      });
+    })
+    .catch((err) => {
+      // dispatch({
+      //   action: SET_ERROR,
+      //   payload: err.response.data
+      // })
+      console.log(err);
+    });
+};

web/src/store/index.jsx

@@ -0,0 +1,16 @@
+import { createStore, applyMiddleware } from "redux";
+import { composeWithDevTools } from "redux-devtools-extension";
+import thunk from "redux-thunk";
+
+import reducers from "./reducers";
+
+const initialState = {};
+const middleware = [thunk];
+
+const store = createStore(
+  reducers,
+  initialState,
+  composeWithDevTools(applyMiddleware(...middleware))
+);
+
+export default store;

web/src/store/reducers/auth.js

@@ -0,0 +1,21 @@
+import { AUTH_LOGIN } from "../types";
+import { Storage } from "../utils";
+
+const storage = new Storage();
+
+const initialState = {
+  is_authenticated: JSON.parse(storage.get("token"))?.access ? true : false,
+};
+
+export default (state = initialState, action) => {
+  switch (action.type) {
+    case AUTH_LOGIN:
+      storage.set("token", JSON.stringify(action.payload));
+      return {
+        ...state,
+        is_authenticated: true,
+      };
+    default:
+      return state;
+  }
+};

web/src/context/reducers/common.js → web/src/store/reducers/common.js

@@ -1,16 +1,17 @@
 import { SET_LOADING } from "../types";
 
-export default (state, action) => {
+const initialState = {
+  is_loading: false,
+};
+
+export default (state = initialState, action) => {
   const { common } = state;
 
   switch (action.type) {
     case SET_LOADING:
       return {
         ...state,
-        common: {
-          ...common,
-          is_loading: action.payload,
-        },
+        is_loading: action.payload,
       };
     default:
       return state;

web/src/store/reducers/index.js

@@ -0,0 +1,11 @@
+import { combineReducers } from "redux";
+
+import auth from "./auth";
+import common from "./common";
+
+const rootReducer = combineReducers({
+  auth,
+  common,
+});
+
+export default rootReducer;

web/src/store/types.js

@@ -0,0 +1,5 @@
+export const AUTH_LOGIN = "AUTH_LOGIN";
+export const AUTH_REGISTER = "AUTH_REGISTER";
+export const AUTH_LOGOUT = "AUTH_LOGOUT";
+
+export const SET_LOADING = "SET_LOADING";

web/src/store/utils.js

@@ -0,0 +1,51 @@
+import axios from "axios";
+
+export const combineReducers =
+  (...reducers) =>
+  (state, action) => {
+    for (let i = 0; i < reducers.length; i++) {
+      state = reducers[i](state, action);
+    }
+
+    return state;
+  };
+
+export function getCookie(name) {
+  let cookieValue = null;
+  if (document.cookie && document.cookie !== "") {
+    const cookies = document.cookie.split(";");
+    for (let i = 0; i < cookies.length; i++) {
+      const cookie = cookies[i].trim();
+      // Does this cookie string begin with the name we want?
+      if (cookie.substring(0, name.length + 1) === name + "=") {
+        cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
+        break;
+      }
+    }
+  }
+  return cookieValue;
+}
+
+// axios settings
+
+var API_URL = "https://dev-47-quiz-app-api.herokuapp.com/api/v1/";
+
+axios.defaults.baseURL = API_URL;
+axios.defaults.xsrfHeaderName = "X-CSRFToken";
+axios.defaults.responseEncoding = "utf8";
+
+export const api = axios.create({});
+
+export class Storage {
+  set(key, value) {
+    localStorage.setItem(key, value);
+  }
+
+  get(key) {
+    return localStorage.getItem(key);
+  }
+
+  remove(key) {
+    localStorage.removeItem(key);
+  }
+}