Merge pull request #11 from lemeow125/feature/deploy_online

Feature/deploy online

src/Components/Api/Api.tsx

@@ -9,10 +9,14 @@ import {
 
 // Note APIs
 
+const instance = axios.create({
+  baseURL: "https://keannu126.pythonanywhere.com",
+});
+
 export function GetNotes() {
   const token = JSON.parse(localStorage.getItem("token") || "{}");
-  return axios
+  return instance
-    .get("http://localhost:8000/api/v1/notes/", {
+    .get("/api/v1/notes/", {
       headers: {
         Authorization: "Token " + token,
       },
@@ -24,8 +28,8 @@ export function GetNotes() {
 
 export function GetNote(id: number) {
   const token = JSON.parse(localStorage.getItem("token") || "{}");
-  return axios
+  return instance
-    .get("http://localhost:8000/api/v1/notes/" + id + "/", {
+    .get("/api/v1/notes/" + id + "/", {
       headers: {
         Authorization: "Token " + token,
       },
@@ -37,8 +41,8 @@ export function GetNote(id: number) {
 
 export function UpdateNote(note: UpdateNoteParams) {
   const token = JSON.parse(localStorage.getItem("token") || "{}");
-  return axios
+  return instance
-    .patch("http://localhost:8000/api/v1/notes/" + note.id + "/", note, {
+    .patch("/api/v1/notes/" + note.id + "/", note, {
       headers: {
         Authorization: "Token " + token,
       },
@@ -47,15 +51,14 @@ export function UpdateNote(note: UpdateNoteParams) {
       return response.data;
     })
     .catch((error) => {
-      console.log("Error updating note", error);
       return error;
     });
 }
 
 export function AddNote(note: AddNoteParams) {
   const token = JSON.parse(localStorage.getItem("token") || "{}");
-  return axios
+  return instance
-    .post("http://localhost:8000/api/v1/notes/", note, {
+    .post("/api/v1/notes/", note, {
       headers: {
         Authorization: "Token " + token,
       },
@@ -64,21 +67,19 @@ export function AddNote(note: AddNoteParams) {
       return response.data;
     })
     .catch((error) => {
-      console.log("Error adding note", error);
       return error;
     });
 }
 
 export function DeleteNote(id: number) {
   const token = JSON.parse(localStorage.getItem("token") || "{}");
-  return axios
+  return instance
-    .delete("http://localhost:8000/api/v1/notes/" + id + "/", {
+    .delete("/api/v1/notes/" + id + "/", {
       headers: {
         Authorization: "Token " + token,
       },
     })
     .catch((error) => {
-      console.log("Error deleting note", error);
       return error;
     });
 }
@@ -86,58 +87,48 @@ export function DeleteNote(id: number) {
 // User APIs
 
 export function UserRegister(register: RegistrationParams) {
-  return axios
+  return instance
-    .post("http://localhost:8000/api/v1/accounts/users/", register)
+    .post("/api/v1/accounts/users/", register)
     .then(async (response) => {
-      console.log(response.data);
       return true;
     })
     .catch((error) => {
-      console.log("Registration failed: " + error);
       return false;
     });
 }
 
 export function UserLogin(user: LoginParams) {
-  return axios
+  return instance
-    .post("http://localhost:8000/api/v1/accounts/token/login/", user)
+    .post("/api/v1/accounts/token/login/", user)
     .then(async (response) => {
       localStorage.setItem("token", JSON.stringify(response.data.auth_token));
-      console.log(
-        "Login Success! Stored Token: ",
-        JSON.parse(localStorage.getItem("token") || "{}")
-      );
       return true;
     })
     .catch((error) => {
-      console.log("Login Failed: " + error);
       return false;
     });
 }
 
 export function UserInfo() {
   const token = JSON.parse(localStorage.getItem("token") || "{}");
-  return axios
+  return instance
-    .get("http://localhost:8000/api/v1/accounts/users/me/", {
+    .get("/api/v1/accounts/users/me/", {
       headers: {
         Authorization: "Token " + token,
       },
     })
     .then((response) => {
-      console.log(response.data);
       return response.data;
     });
 }
 
 export function UserActivate(activation: ActivationParams) {
-  return axios
+  return instance
-    .post("http://localhost:8000/api/v1/accounts/users/activation/", activation)
+    .post("/api/v1/accounts/users/activation/", activation)
     .then(async (response) => {
-      console.log("Activation Success");
       return true;
     })
     .catch((error) => {
-      console.log("Activation failed: " + error);
       return false;
     });
 }

src/Components/Header/Header.tsx

@@ -5,10 +5,11 @@ import AppIcon from "../AppIcon/AppIcon";
 import Login from "../LoginButton/LoginButton";
 import HomeIcon from "../HomeIcon/HomeIcon";
 import UserIcon from "../UserIcon/UserIcon";
-
+import PreviousSessionChecker from "../PreviousSessionChecker/PreviousSessionChecker";
 export default function Header() {
   return (
     <div style={styles.header}>
+      <PreviousSessionChecker />
       <div style={styles.flex_row}>
         <div
           style={{

src/Components/LoginButton/LoginButton.tsx

@@ -3,18 +3,16 @@ import { Button } from "@mui/material";
 import { useNavigate } from "react-router-dom";
 import styles from "../../styles";
 import { useDispatch, useSelector } from "react-redux";
-import { SetLoggedOut } from "../../Features/Redux/Slices/LoginSlice/LoginSlice";
+import { Toggle_Login } from "../../Features/Redux/Slices/LoginSlice/LoginSlice";
 import { UnsetUser } from "../../Features/Redux/Slices/LoggedInUserSlice/LoggedInUserSlice";
 import { RootState } from "../../Features/Redux/Store/Store";
 
 export default function LoginButton() {
   const dispatch = useDispatch();
-  const logged_in = useSelector(
+  const logged_in = useSelector((state: RootState) => state.logged_in.value);
-    (state: RootState) => state.logged_in.value
-    );
   const logged_in_user = useSelector(
     (state: RootState) => state.logged_in_user.value
-    );
+  );
   const navigate = useNavigate();
   if (!logged_in) {
     return (
@@ -42,7 +40,7 @@ export default function LoginButton() {
         variant="contained"
         onClick={() => {
           console.log("Logged out...");
-          dispatch(SetLoggedOut());
+          dispatch(Toggle_Login());
           dispatch(UnsetUser());
           localStorage.setItem("token", "");
         }}

src/Components/PreviousSessionChecker/PreviousSessionChecker.tsx

@@ -0,0 +1,32 @@
+import * as React from "react";
+import { useEffect, useCallback } from "react";
+import { useDispatch, useSelector } from "react-redux";
+import { UserInfo } from "../Api/Api";
+import { Toggle_Login } from "../../Features/Redux/Slices/LoginSlice/LoginSlice";
+import { SetUser } from "../../Features/Redux/Slices/LoggedInUserSlice/LoggedInUserSlice";
+import { set_checked } from "../../Features/Redux/Slices/OldSession/OldSessionSlice";
+import { RootState } from "../../Features/Redux/Store/Store";
+export default function PreviousSessionChecker() {
+  const dispatch = useDispatch();
+  const logged_in = useSelector((state: RootState) => state.logged_in.value);
+  // Function to check for previous login session
+  const check = useCallback(async () => {
+    if (await UserInfo()) {
+      if (logged_in !== true) {
+        console.log("Previous session found. Restoring");
+        await dispatch(Toggle_Login());
+        await dispatch(SetUser(await UserInfo()));
+      }
+    } else {
+      console.log("No old session found");
+      localStorage.removeItem("token");
+    }
+    await dispatch(set_checked());
+  }, [dispatch, logged_in]);
+  useEffect(() => {
+    if (!logged_in) {
+      check();
+    }
+  }, [check, logged_in]);
+  return <div />;
+}

src/Features/Redux/Slices/LoginSlice/LoginSlice.tsx

@@ -6,16 +6,13 @@ export const LoginSlice = createSlice({
     value: false,
   },
   reducers: {
-    SetLoggedIn: (state) => {
+    Toggle_Login: (state) => {
-      state.value = !state.value;
-    },
-    SetLoggedOut: (state) => {
       state.value = !state.value;
     },
   },
 });
 
 // Action creators are generated for each case reducer function
-export const { SetLoggedIn, SetLoggedOut } = LoginSlice.actions;
+export const { Toggle_Login } = LoginSlice.actions;
 
 export default LoginSlice.reducer;

src/Features/Redux/Slices/OldSession/OldSessionSlice.tsx

@@ -0,0 +1,17 @@
+import { createSlice } from "@reduxjs/toolkit";
+
+export const OldSessionSlice = createSlice({
+  name: "old_session_checked",
+  initialState: {
+    value: false,
+  },
+  reducers: {
+    set_checked: (state) => {
+      state.value = !state.value;
+    },
+  },
+});
+
+export const { set_checked } = OldSessionSlice.actions;
+
+export default OldSessionSlice.reducer;

src/Features/Redux/Store/LoginSlice.tsx

@@ -0,0 +1,21 @@
+import { createSlice } from "@reduxjs/toolkit";
+
+export const LoginSlice = createSlice({
+  name: "Login",
+  initialState: {
+    value: false,
+  },
+  reducers: {
+    SetLoggedIn: (state) => {
+      state.value = !state.value;
+    },
+    SetLoggedOut: (state) => {
+      state.value = !state.value;
+    },
+  },
+});
+
+// Action creators are generated for each case reducer function
+export const { SetLoggedIn, SetLoggedOut } = LoginSlice.actions;
+
+export default LoginSlice.reducer;

src/Features/Redux/Store/Store.tsx

@@ -1,11 +1,13 @@
 import { configureStore } from "@reduxjs/toolkit";
 import LoginReducer from "../Slices/LoginSlice/LoginSlice";
 import LoggedInUserReucer from "../Slices/LoggedInUserSlice/LoggedInUserSlice";
+import OldSessionReducer from "../Slices/OldSession/OldSessionSlice";
 
 const store = configureStore({
   reducer: {
     logged_in: LoginReducer,
     logged_in_user: LoggedInUserReucer,
+    old_session_checked: OldSessionReducer,
   },
 });
 
@@ -13,4 +15,4 @@ export default store;
 
 // Infer the `RootState` and `AppDispatch` types from the store itself
 export type RootState = ReturnType<typeof store.getState>;
-export type AppDispatch = typeof store.dispatch;
+export type AppDispatch = typeof store.dispatch;

src/Routes/Login/Login.tsx

@@ -9,7 +9,7 @@ import { UserInfo, UserLogin } from "../../Components/Api/Api";
 
 import { useDispatch } from "react-redux";
 import { SetUser } from "../../Features/Redux/Slices/LoggedInUserSlice/LoggedInUserSlice";
-import { SetLoggedIn } from "../../Features/Redux/Slices/LoginSlice/LoginSlice";
+import { Toggle_Login } from "../../Features/Redux/Slices/LoginSlice/LoginSlice";
 
 export default function Login() {
   const navigate = useNavigate();
@@ -56,7 +56,7 @@ export default function Login() {
               password: "",
             });
             if (await UserLogin(user)) {
-              await dispatch(SetLoggedIn());
+              await dispatch(Toggle_Login());
               await dispatch(SetUser(await UserInfo()));
               navigate("/");
             } else {

src/Routes/ViewEditNote/ViewEditNote.tsx

@@ -3,9 +3,8 @@ import { Button } from "@mui/material";
 import { useNavigate, useParams } from "react-router-dom";
 import { useEffect, useState } from "react";
 import Header from "../../Components/Header/Header";
-import { AddNote, GetNote, UpdateNote } from "../../Components/Api/Api";
+import { GetNote, UpdateNote } from "../../Components/Api/Api";
 import { useMutation, useQuery, useQueryClient } from "react-query";
-import { NoteProps } from "../../Interfaces/Interfaces";
 
 export interface input {
   e: React.ChangeEvent;
@@ -34,7 +33,7 @@ export default function ViewNote() {
   });
   useEffect(() => {
     setNote(data);
-  }, []);
+  }, [data]);
   if (error) {
     return (
       <div style={styles.background}>
@@ -47,8 +46,10 @@ export default function ViewNote() {
   }
   if (isLoading) {
     return (
-      <div style={styles.note}>
+      <div style={styles.background}>
-        <p style={styles.text_medium}>Loading Note...</p>
+        <div style={styles.note}>
+          <p style={styles.text_medium}>Loading Note...</p>
+        </div>
       </div>
     );
   }
@@ -112,4 +113,4 @@ export default function ViewNote() {
     );
   }
   return <div>heh</div>;
-}
+}