diff --git a/src/Components/Api/Api.tsx b/src/Components/Api/Api.tsx index 18cce4c..d93144c 100644 --- a/src/Components/Api/Api.tsx +++ b/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 - .get("http://localhost:8000/api/v1/notes/", { + return instance + .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 - .get("http://localhost:8000/api/v1/notes/" + id + "/", { + return instance + .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 - .patch("http://localhost:8000/api/v1/notes/" + note.id + "/", note, { + return instance + .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 - .post("http://localhost:8000/api/v1/notes/", note, { + return instance + .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 - .delete("http://localhost:8000/api/v1/notes/" + id + "/", { + return instance + .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 - .post("http://localhost:8000/api/v1/accounts/users/", register) + return instance + .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 - .post("http://localhost:8000/api/v1/accounts/token/login/", user) + return instance + .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 - .get("http://localhost:8000/api/v1/accounts/users/me/", { + return instance + .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 - .post("http://localhost:8000/api/v1/accounts/users/activation/", activation) + return instance + .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; }); } diff --git a/src/Components/Header/Header.tsx b/src/Components/Header/Header.tsx index 3acb0b8..c33aaf3 100644 --- a/src/Components/Header/Header.tsx +++ b/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 (
+
state.logged_in.value - ); + const logged_in = useSelector((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", ""); }} diff --git a/src/Components/PreviousSessionChecker/PreviousSessionChecker.tsx b/src/Components/PreviousSessionChecker/PreviousSessionChecker.tsx new file mode 100644 index 0000000..fa6d0fc --- /dev/null +++ b/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
; +} diff --git a/src/Features/Redux/Slices/LoginSlice/LoginSlice.tsx b/src/Features/Redux/Slices/LoginSlice/LoginSlice.tsx index 5802c33..a1d52d1 100644 --- a/src/Features/Redux/Slices/LoginSlice/LoginSlice.tsx +++ b/src/Features/Redux/Slices/LoginSlice/LoginSlice.tsx @@ -6,16 +6,13 @@ export const LoginSlice = createSlice({ value: false, }, reducers: { - SetLoggedIn: (state) => { - state.value = !state.value; - }, - SetLoggedOut: (state) => { + Toggle_Login: (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; diff --git a/src/Features/Redux/Slices/OldSession/OldSessionSlice.tsx b/src/Features/Redux/Slices/OldSession/OldSessionSlice.tsx new file mode 100644 index 0000000..04e37e3 --- /dev/null +++ b/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; diff --git a/src/Features/Redux/Store/LoginSlice.tsx b/src/Features/Redux/Store/LoginSlice.tsx new file mode 100644 index 0000000..5802c33 --- /dev/null +++ b/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; diff --git a/src/Features/Redux/Store/Store.tsx b/src/Features/Redux/Store/Store.tsx index d1eabd2..e9f2f2c 100644 --- a/src/Features/Redux/Store/Store.tsx +++ b/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; -export type AppDispatch = typeof store.dispatch; \ No newline at end of file +export type AppDispatch = typeof store.dispatch; diff --git a/src/Routes/Login/Login.tsx b/src/Routes/Login/Login.tsx index 371e094..267fe16 100644 --- a/src/Routes/Login/Login.tsx +++ b/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 { diff --git a/src/Routes/ViewEditNote/ViewEditNote.tsx b/src/Routes/ViewEditNote/ViewEditNote.tsx index 9a82605..e8a0a9e 100644 --- a/src/Routes/ViewEditNote/ViewEditNote.tsx +++ b/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 (
@@ -47,8 +46,10 @@ export default function ViewNote() { } if (isLoading) { return ( -
-

Loading Note...

+
+
+

Loading Note...

+
); } @@ -112,4 +113,4 @@ export default function ViewNote() { ); } return
heh
; -} \ No newline at end of file +}