diff --git a/src/Components/Api/Api.tsx b/src/Components/Api/Api.tsx index be99e4c..000b057 100644 --- a/src/Components/Api/Api.tsx +++ b/src/Components/Api/Api.tsx @@ -1,4 +1,10 @@ import axios from "axios"; +import { + ActivationParams, + AddNoteParams, + LoginParams, + RegistrationParams, +} from "../../Interfaces/Interfaces"; // Note APIs @@ -15,12 +21,7 @@ export function GetNotes() { }); } -export interface note { - title: string; - content: string; -} - -export function AddNote(note: note) { +export function AddNote(note: AddNoteParams) { const token = JSON.parse(localStorage.getItem("token") || ""); return axios .post("http://localhost:8000/api/v1/notes/", note, { @@ -43,13 +44,8 @@ export function DeleteNote(id: number) { } // User APIs -export interface register { - email: string; - username: string; - password: string; -} -export function UserRegister(register: register) { +export function UserRegister(register: RegistrationParams) { return axios .post("http://localhost:8000/api/v1/accounts/users/", register) .then(async (response) => { @@ -62,12 +58,7 @@ export function UserRegister(register: register) { }); } -export interface user { - username: string; - password: string; -} - -export function UserLogin(user: user) { +export function UserLogin(user: LoginParams) { return axios .post("http://localhost:8000/api/v1/accounts/token/login/", user) .then(async (response) => { @@ -101,12 +92,7 @@ export function UserInfo() { }); } -export interface activation { - uid: string; - token: string; -} - -export function UserActivate(activation: activation) { +export function UserActivate(activation: ActivationParams) { return axios .post("http://localhost:8000/api/v1/accounts/users/activation/", activation) .then(async (response) => { diff --git a/src/Components/AppIcon/AppIcon.tsx b/src/Components/AppIcon/AppIcon.tsx index 56d5c80..78e60e2 100644 --- a/src/Components/AppIcon/AppIcon.tsx +++ b/src/Components/AppIcon/AppIcon.tsx @@ -1,11 +1,7 @@ import * as React from "react"; +import { IconProps } from "../../Interfaces/Interfaces"; -export interface props { - size: number; - color: string; -} - -export default function AppIcon(props: props) { +export default function AppIcon(props: IconProps) { return ( <> -
state.Login.logged_in + const logged_in = useSelector((state: LoginState) => state.Login.logged_in); + const logged_in_user = useSelector( + (state: LoggedInUserState) => state.LoggedInUser.value ); - const logged_in_user = useSelector((state: user) => state.LoggedInUser.value); const navigate = useNavigate(); if (!logged_in) { return ( diff --git a/src/Components/Note/Note.tsx b/src/Components/Note/Note.tsx index 153e424..b8bd090 100644 --- a/src/Components/Note/Note.tsx +++ b/src/Components/Note/Note.tsx @@ -3,14 +3,9 @@ import styles from "../../styles"; import { Button } from "@mui/material"; import { useMutation, useQueryClient } from "react-query"; import { DeleteNote } from "../Api/Api"; +import { NoteProps } from "../../Interfaces/Interfaces"; -export interface props { - title: string; - content: string; - id: number; - date_created: string; -} -export default function Note(props: props) { +export default function Note(props: NoteProps) { const queryClient = useQueryClient(); const mutation = useMutation({ mutationFn: DeleteNote, diff --git a/src/Components/Notes/Notes.tsx b/src/Components/Notes/Notes.tsx index 96b7ada..e1c2d2a 100644 --- a/src/Components/Notes/Notes.tsx +++ b/src/Components/Notes/Notes.tsx @@ -6,6 +6,7 @@ import { Button } from "@mui/material"; import { useQuery } from "react-query"; import { GetNotes } from "../Api/Api"; import { useSelector } from "react-redux"; +import { LoginState } from "../../Interfaces/Interfaces"; export default function Notes() { const navigate = useNavigate(); @@ -14,9 +15,7 @@ export default function Notes() { isLoading, error, } = useQuery("notes", GetNotes, { retry: 0 }); - const logged_in = useSelector( - (state: { Login: { logged_in: boolean } }) => state.Login.logged_in - ); + const logged_in = useSelector((state: LoginState) => state.Login.logged_in); if (!logged_in) { return (
diff --git a/src/Interfaces/Interfaces.tsx b/src/Interfaces/Interfaces.tsx new file mode 100644 index 0000000..ea68b14 --- /dev/null +++ b/src/Interfaces/Interfaces.tsx @@ -0,0 +1,51 @@ +// Redux Interfaces +export interface LoginState { + Login: { logged_in: boolean }; +} + +export interface LoggedInUserState { + LoggedInUser: { + value: { + email: string; + id: number; + username: string; + }; + }; +} + +// Component Props Interfaces + +export interface NoteProps { + title: string; + content: string; + id: number; + date_created: string; +} + +export interface IconProps { + size: number; + color: string; +} + +// API Interfaces + +export interface RegistrationParams { + email: string; + username: string; + password: string; +} + +export interface LoginParams { + username: string; + password: string; +} + +export interface ActivationParams { + uid: string; + token: string; +} + +export interface AddNoteParams { + title: string; + content: string; +} diff --git a/src/Routes/Activation/Activation.tsx b/src/Routes/Activation/Activation.tsx index 972baf5..18d1629 100644 --- a/src/Routes/Activation/Activation.tsx +++ b/src/Routes/Activation/Activation.tsx @@ -3,15 +3,12 @@ import Header from "../../Components/Header/Header"; import { useParams } from "react-router-dom"; import { useEffect, useState } from "react"; import { UserActivate } from "../../Components/Api/Api"; +import { ActivationParams } from "../../Interfaces/Interfaces"; -export interface activation { - uid: string; - token: string; -} export default function Activation() { let { uid, token } = useParams(); const [status, setStatus] = useState(0); - async function verify(activation: activation) { + async function verify(activation: ActivationParams) { let status = await UserActivate(activation); if (status) { setStatus(1); @@ -23,7 +20,7 @@ export default function Activation() { if (uid && token) { verify({ uid, token }); } - }, []); + }, [uid, token]); if (status === 1) { return (
diff --git a/src/Routes/Login/Login.tsx b/src/Routes/Login/Login.tsx index a4ed28b..371e094 100644 --- a/src/Routes/Login/Login.tsx +++ b/src/Routes/Login/Login.tsx @@ -7,7 +7,7 @@ import { useState } from "react"; import { Button } from "@mui/material"; import { UserInfo, UserLogin } from "../../Components/Api/Api"; -import { useSelector, useDispatch } from "react-redux"; +import { useDispatch } from "react-redux"; import { SetUser } from "../../Features/Redux/Slices/LoggedInUserSlice/LoggedInUserSlice"; import { SetLoggedIn } from "../../Features/Redux/Slices/LoginSlice/LoginSlice"; @@ -29,7 +29,7 @@ export default function Login() {
{ + onChange={(e: React.ChangeEvent) => { setUser({ ...user, username: e.target.value }); }} maxLength={20} @@ -41,7 +41,7 @@ export default function Login() { { + onChange={(e: React.ChangeEvent) => { setUser({ ...user, password: e.target.value }); }} maxLength={20} diff --git a/src/Routes/Register/Register.tsx b/src/Routes/Register/Register.tsx index ecff80a..147f2f0 100644 --- a/src/Routes/Register/Register.tsx +++ b/src/Routes/Register/Register.tsx @@ -1,16 +1,12 @@ import * as React from "react"; import styles from "../../styles"; -import { useNavigate } from "react-router-dom"; import Header from "../../Components/Header/Header"; import { useState } from "react"; import { Button } from "@mui/material"; -import { UserInfo, UserLogin } from "../../Components/Api/Api"; - import { UserRegister } from "../../Components/Api/Api"; export default function Register() { - const navigate = useNavigate(); const [user, setUser] = useState({ email: "", username: "", @@ -27,7 +23,7 @@ export default function Register() {
{ + onChange={(e: React.ChangeEvent) => { setUser({ ...user, email: e.target.value }); }} maxLength={20} @@ -38,7 +34,7 @@ export default function Register() {
{ + onChange={(e: React.ChangeEvent) => { setUser({ ...user, username: e.target.value }); }} maxLength={20} @@ -50,7 +46,7 @@ export default function Register() { { + onChange={(e: React.ChangeEvent) => { setUser({ ...user, password: e.target.value }); }} maxLength={20} @@ -61,9 +57,7 @@ export default function Register() { variant="contained" onClick={async () => { setUser({ - email: "", - username: "", - password: "", + ...user, }); if (await UserRegister(user)) { setFeedback(