ShogunIsHere/spotify-manager-web
1
0
Fork 0
mirror of https://github.com/20kaushik02/spotify-manager-web.git synced 2025-12-06 08:04:06 +00:00
Code Issues Packages Projects Releases Wiki Activity

back. WiP

Browse Source 
graph package (reactflow), updates. assets, some of the SEO. started with some basic components, login, navbar, etc.
This commit is contained in:
Kaushik Narayan R 2024-12-28 12:12:17 -07:00
parent cc682254df
commit c1bc6177d8
36 changed files with 5423 additions and 18018 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
.env.development Normal file
View File

@ -0,0 +1 @@
REACT_APP_API_BASE_URL = "http://localhost:9001"

22873
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

19
package.json
View File

@ -3,18 +3,19 @@
"version": "0.1.0",
"private": true,
"dependencies": {
"@testing-library/jest-dom": "^5.17.0",
"@testing-library/react": "^13.4.0",
"@testing-library/user-event": "^13.5.0",
"axios": "^1.5.0",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"@testing-library/jest-dom": "^6.6.3",
"@testing-library/react": "^16.1.0",
"@testing-library/user-event": "^14.5.2",
"@xyflow/react": "^12.3.6",
"axios": "^1.7.9",
"react": "^18.3.1",
"react-dom": "^18.3.1",
"react-router-dom": "^6.16.0",
"react-toastify": "^9.1.3",
"react-tooltip": "^5.21.4",
"web-vitals": "^2.1.4"
"react-toastify": "^11.0.2",
"web-vitals": "^4.2.4"
},
"devDependencies": {
"cross-env": "^7.0.3",
"react-scripts": "5.0.1"
},
"scripts": {

BIN
public/android-chrome-192x192.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.9 KiB

BIN
public/android-chrome-512x512.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.5 KiB

BIN
public/apple-touch-icon.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.5 KiB

BIN
public/favicon-16x16.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 638 B

BIN
public/favicon-32x32.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 759 B

BIN
public/favicon.ico
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 3.8 KiB

8
public/index.html
View File

@ -2,14 +2,16 @@
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<link rel="apple-touch-icon" sizes="180x180" href="%PUBLIC_URL%/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="%PUBLIC_URL%/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="%PUBLIC_URL%/favicon-16x16.png">
<meta name="theme-color" content="#ffffff">
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta
name="description"
content="Web site created using create-react-app"
/>
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
<!--
manifest.json provides metadata used when your web app is installed on a
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/

BIN
public/logo192.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 5.2 KiB

BIN
public/logo512.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 9.4 KiB

19
public/manifest.json
View File

@ -3,23 +3,18 @@
"name": "Create React App Sample",
"icons": [
{
"src": "favicon.ico",
"sizes": "64x64 32x32 24x24 16x16",
"type": "image/x-icon"
"src": "android-chrome-192x192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "logo192.png",
"type": "image/png",
"sizes": "192x192"
},
{
"src": "logo512.png",
"type": "image/png",
"sizes": "512x512"
"src": "android-chrome-512x512.png",
"sizes": "512x512",
"type": "image/png"
}
],
"start_url": ".",
"display": "standalone",
"theme_color": "#000000",
"theme_color": "#ffffff",
"background_color": "#ffffff"
}

33
src/App.css
View File

@ -1,38 +1,9 @@
.App {
text-align: center;
}
.App-logo {
height: 40vmin;
pointer-events: none;
}
@media (prefers-reduced-motion: no-preference) {
.App-logo {
animation: App-logo-spin infinite 20s linear;
}
}
.App-header {
background-color: #282c34;
min-height: 100vh;
display: flex;
flex-direction: column;
text-align: center;
align-items: center;
justify-content: center;
font-size: calc(10px + 2vmin);
background-color: #282c34;
color: white;
}
.App-link {
color: #61dafb;
}
@keyframes App-logo-spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}

122
src/App.js
View File

@ -1,24 +1,116 @@
import logo from './logo.svg';
// Libraries
import { createContext, useEffect, useState } from 'react';
import { BrowserRouter } from "react-router-dom";
import { ToastContainer } from "react-toastify";
// Styles
import './App.css';
// Assets
// Utils
import ScrollToTop from './utils/ScrollToTop';
// Components
import Navbar from './components/Navbar';
// Routes
import AllRoutes from './routes/AllRoutes';
import { showErrorToastNotification, showInfoToastNotification, showWarnToastNotification } from './components/ToastNotification';
import { apiAuthCheck, apiAuthRefresh } from './api/auth';
// Contexts
export const WidthContext = createContext();
export const AuthContext = createContext();
export const RefreshAuthContext = createContext();
function App() {
// States
const [width, setWidth] = useState(0);
const [auth, setAuth] = useState(false);
const refreshAuth = async () => {
const resp = await apiAuthCheck();
if (resp === undefined) {
showErrorToastNotification("Please try again after sometime");
setAuth(false);
return false;
}
if (resp.status === 200) {
// Success
setAuth(true);
return true;
}
if (resp.status >= 500) {
setAuth(false);
showErrorToastNotification(resp.data.message);
return false;
}
if (resp.status === 401) {
// reauth
const refreshResp = await apiAuthRefresh();
if (refreshResp === undefined) {
showErrorToastNotification("Please try again after sometime");
setAuth(false);
return false;
}
if (refreshResp.status === 200) {
// Success
showInfoToastNotification("Refreshed session.");
setAuth(true);
return true;
}
setAuth(false);
return false;
}
setAuth(false);
showWarnToastNotification(resp.data.message);
return false;
}
useEffect(() => {
(async () => {
await refreshAuth();
})();
}, []);
const updateWindowDimensions = () => {
setWidth(window.innerWidth);
};
// Get window dimensions on resize
useEffect(() => {
window.addEventListener("resize", updateWindowDimensions);
return () => {
window.removeEventListener("resize", updateWindowDimensions);
};
}, []);
useEffect(() => {
updateWindowDimensions();
}, []);
return (
<WidthContext.Provider value={width}>
<AuthContext.Provider value={auth}>
<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"
>
Learn React
</a>
</header>
<BrowserRouter>
<ScrollToTop />
<Navbar />
<AllRoutes />
</BrowserRouter>
<ToastContainer
id={"notif-container"}
position={"bottom-center"}
theme={"dark"}
stacked
newestOnTop
draggable
/>
</div>
</AuthContext.Provider>
</WidthContext.Provider>
);
}

22
src/api/auth.js Normal file
View File

@ -0,0 +1,22 @@
import { axiosInstance } from "./axiosInstance";
const authHealthCheckURL = "auth-health";
const authRefreshURL = "api/auth/refresh";
export const apiAuthCheck = async () => {
try {
const response = await axiosInstance.get(authHealthCheckURL);
return response;
} catch (error) {
return error.response;
}
}
export const apiAuthRefresh = async () => {
try {
const response = await axiosInstance.get(authRefreshURL);
return response;
} catch (error) {
return error.response;
}
}

10
src/api/axiosInstance.js Normal file
View File

@ -0,0 +1,10 @@
import axios from "axios";
export const axiosInstance = axios.create({
baseURL: process.env.REACT_APP_API_BASE_URL,
withCredentials: true,
timeout: 20000,
headers: {
"Content-Type": "application/json"
},
});

BIN
src/assets/fonts/Aileron-Black.otf Normal file
View File

Binary file not shown.

BIN
src/assets/fonts/Aileron-Light.otf Normal file
View File

Binary file not shown.

28
src/assets/icons/logo.svg Normal file
View File

@ -0,0 +1,28 @@
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
width="512.000000pt" height="512.000000pt" viewBox="0 0 512.000000 512.000000"
preserveAspectRatio="xMidYMid meet">
<g transform="translate(0.000000,512.000000) scale(0.100000,-0.100000)"
fill="#000000" stroke="none">
<path d="M1480 4540 c-20 -20 -20 -33 -20 -611 0 -379 4 -597 10 -609 19 -36
72 -40 548 -40 l462 0 0 -275 0 -275 -881 0 c-650 0 -886 -3 -902 -12 -46 -24
-46 -26 -47 -375 l0 -333 -289 0 c-159 0 -301 -4 -314 -9 -47 -18 -48 -23 -45
-734 l3 -669 24 -19 c22 -18 49 -19 696 -19 665 0 673 0 699 21 l26 20 0 683
c0 681 0 683 -21 702 -20 18 -42 19 -320 22 l-299 3 0 279 0 280 835 0 835 0
0 -280 0 -279 -300 -3 c-296 -3 -300 -3 -322 -26 l-23 -23 0 -680 0 -681 24
-19 c22 -18 49 -19 701 -19 652 0 679 1 701 19 l24 19 0 681 0 680 -23 23
c-22 23 -26 23 -322 26 l-300 3 0 279 0 280 835 0 835 0 0 -280 0 -279 -300
-3 c-296 -3 -300 -3 -322 -26 l-23 -23 -3 -647 c-2 -356 0 -662 3 -680 3 -18
15 -42 26 -53 18 -18 39 -19 698 -19 653 0 680 1 702 19 l24 19 0 681 0 680
-23 23 c-22 23 -26 23 -322 26 l-300 3 0 329 c0 180 -3 336 -6 345 -18 45 -9
45 -944 45 l-880 0 0 275 0 275 463 0 c475 0 528 4 547 40 6 12 10 230 10 607
0 579 0 590 -20 611 l-21 22 -1059 0 c-1047 0 -1060 0 -1080 -20z m2020 -615
l0 -475 -940 0 -940 0 0 475 0 475 940 0 940 0 0 -475z m-2202 -2642 l2 -563
-570 0 -570 0 0 565 0 565 568 -2 567 -3 3 -562z m1832 2 l0 -565 -570 0 -570
0 0 565 0 565 570 0 570 0 0 -565z m1830 0 l0 -565 -570 0 -570 0 0 558 c0
307 3 562 7 565 3 4 260 7 570 7 l563 0 0 -565z"/>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.6 KiB

8
src/boilerplates/apiResp.js
View File

@ -6,21 +6,21 @@ import LocalStorage from "../utils/localStorageHelper";
const refreshAuth = useContext(RefreshAuthContext);
if (resp === undefined) {
showErrorToastNotification(<p>Please try again after sometime</p>);
showErrorToastNotification("Please try again after sometime");
return;
} else {
if (resp.status === 200) {
showSuccessToastNotification(<p>{resp.data.message}</p>);
showSuccessToastNotification(resp.data.message);
// proceed with data
} else if (resp.status >= 400 && resp.status < 500) {
if (resp.data.auth === false) {
LocalStorage.clear();
refreshAuth();
}
showErrorToastNotification(<p>{resp.data.message}</p>);
showErrorToastNotification(resp.data.message);
return;
} else if (resp.status >= 500 && resp.status < 600) {
showErrorToastNotification(<p>{resp.data.message}</p>);
showErrorToastNotification(resp.data.message);
return;
}
}

11
src/components/Navbar/Navbar.module.css Normal file
View File

@ -0,0 +1,11 @@
.navbar_wrapper {
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-evenly;
position: sticky;
top: 0;
left: 0;
height: 100vh;
width: 10vw;
}

16
src/components/Navbar/index.jsx Normal file
View File

@ -0,0 +1,16 @@
import React from 'react'
import styles from "./Navbar.module.css";
import { NavLink } from 'react-router-dom';
const Navbar = () => {
return (
<nav className={styles.navbar_wrapper}>
<NavLink to="/">Home</NavLink>
<NavLink to="/login">Login</NavLink>
<NavLink to="/graph">Graph</NavLink>
<NavLink to="/graph2">Graph2</NavLink>
</nav>
)
}
export default Navbar

17
src/components/ToastNotification/index.jsx Normal file
View File

@ -0,0 +1,17 @@
import { toast } from "react-toastify";
export const showErrorToastNotification = (message) => {
toast.error(message || "Server Error");
};
export const showSuccessToastNotification = (message) => {
toast.success(message || "Success");
};
export const showWarnToastNotification = (message) => {
toast.warn(message || "Warning");
};
export const showInfoToastNotification = (message) => {
toast.info(message || "Info");
};

1
src/logo.svg
View File

@ -1 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 841.9 595.3"><g fill="#61DAFB"><path d="M666.3 296.5c0-32.5-40.7-63.3-103.1-82.4 14.4-63.6 8-114.2-20.2-130.4-6.5-3.8-14.1-5.6-22.4-5.6v22.3c4.6 0 8.3.9 11.4 2.6 13.6 7.8 19.5 37.5 14.9 75.7-1.1 9.4-2.9 19.3-5.1 29.4-19.6-4.8-41-8.5-63.5-10.9-13.5-18.5-27.5-35.3-41.6-50 32.6-30.3 63.2-46.9 84-46.9V78c-27.5 0-63.5 19.6-99.9 53.6-36.4-33.8-72.4-53.2-99.9-53.2v22.3c20.7 0 51.4 16.5 84 46.6-14 14.7-28 31.4-41.3 49.9-22.6 2.4-44 6.1-63.6 11-2.3-10-4-19.7-5.2-29-4.7-38.2 1.1-67.9 14.6-75.8 3-1.8 6.9-2.6 11.5-2.6V78.5c-8.4 0-16 1.8-22.6 5.6-28.1 16.2-34.4 66.7-19.9 130.1-62.2 19.2-102.7 49.9-102.7 82.3 0 32.5 40.7 63.3 103.1 82.4-14.4 63.6-8 114.2 20.2 130.4 6.5 3.8 14.1 5.6 22.5 5.6 27.5 0 63.5-19.6 99.9-53.6 36.4 33.8 72.4 53.2 99.9 53.2 8.4 0 16-1.8 22.6-5.6 28.1-16.2 34.4-66.7 19.9-130.1 62-19.1 102.5-49.9 102.5-82.3zm-130.2-66.7c-3.7 12.9-8.3 26.2-13.5 39.5-4.1-8-8.4-16-13.1-24-4.6-8-9.5-15.8-14.4-23.4 14.2 2.1 27.9 4.7 41 7.9zm-45.8 106.5c-7.8 13.5-15.8 26.3-24.1 38.2-14.9 1.3-30 2-45.2 2-15.1 0-30.2-.7-45-1.9-8.3-11.9-16.4-24.6-24.2-38-7.6-13.1-14.5-26.4-20.8-39.8 6.2-13.4 13.2-26.8 20.7-39.9 7.8-13.5 15.8-26.3 24.1-38.2 14.9-1.3 30-2 45.2-2 15.1 0 30.2.7 45 1.9 8.3 11.9 16.4 24.6 24.2 38 7.6 13.1 14.5 26.4 20.8 39.8-6.3 13.4-13.2 26.8-20.7 39.9zm32.3-13c5.4 13.4 10 26.8 13.8 39.8-13.1 3.2-26.9 5.9-41.2 8 4.9-7.7 9.8-15.6 14.4-23.7 4.6-8 8.9-16.1 13-24.1zM421.2 430c-9.3-9.6-18.6-20.3-27.8-32 9 .4 18.2.7 27.5.7 9.4 0 18.7-.2 27.8-.7-9 11.7-18.3 22.4-27.5 32zm-74.4-58.9c-14.2-2.1-27.9-4.7-41-7.9 3.7-12.9 8.3-26.2 13.5-39.5 4.1 8 8.4 16 13.1 24 4.7 8 9.5 15.8 14.4 23.4zM420.7 163c9.3 9.6 18.6 20.3 27.8 32-9-.4-18.2-.7-27.5-.7-9.4 0-18.7.2-27.8.7 9-11.7 18.3-22.4 27.5-32zm-74 58.9c-4.9 7.7-9.8 15.6-14.4 23.7-4.6 8-8.9 16-13 24-5.4-13.4-10-26.8-13.8-39.8 13.1-3.1 26.9-5.8 41.2-7.9zm-90.5 125.2c-35.4-15.1-58.3-34.9-58.3-50.6 0-15.7 22.9-35.6 58.3-50.6 8.6-3.7 18-7 27.7-10.1 5.7 19.6 13.2 40 22.5 60.9-9.2 20.8-16.6 41.1-22.2 60.6-9.9-3.1-19.3-6.5-28-10.2zM310 490c-13.6-7.8-19.5-37.5-14.9-75.7 1.1-9.4 2.9-19.3 5.1-29.4 19.6 4.8 41 8.5 63.5 10.9 13.5 18.5 27.5 35.3 41.6 50-32.6 30.3-63.2 46.9-84 46.9-4.5-.1-8.3-1-11.3-2.7zm237.2-76.2c4.7 38.2-1.1 67.9-14.6 75.8-3 1.8-6.9 2.6-11.5 2.6-20.7 0-51.4-16.5-84-46.6 14-14.7 28-31.4 41.3-49.9 22.6-2.4 44-6.1 63.6-11 2.3 10.1 4.1 19.8 5.2 29.1zm38.5-66.7c-8.6 3.7-18 7-27.7 10.1-5.7-19.6-13.2-40-22.5-60.9 9.2-20.8 16.6-41.1 22.2-60.6 9.9 3.1 19.3 6.5 28.1 10.2 35.4 15.1 58.3 34.9 58.3 50.6-.1 15.7-23 35.6-58.4 50.6zM320.8 78.4z"/><circle cx="420.9" cy="296.5" r="45.7"/><path d="M520.5 78.1z"/></g></svg>
Side by Side

Before

Width:  |  Height:  |  Size: 2.6 KiB

6
src/pages/Graph/Graph.module.css Normal file
View File

@ -0,0 +1,6 @@
.graph_wrapper {
display: flex;
position: inherit;
width: 100%;
height: 80vh;
}

47
src/pages/Graph/index.jsx Normal file
View File

@ -0,0 +1,47 @@
import React, { useCallback } from 'react';
import {
ReactFlow,
Controls,
Background,
useNodesState,
useEdgesState,
addEdge,
} from '@xyflow/react';
import '@xyflow/react/dist/style.css';
import styles from './Graph.module.css';
// const initialNodes = [];
const initialNodes = [
{ id: '1', position: { x: 0, y: 0 }, data: { label: '1' } },
{ id: '2', position: { x: 0, y: 100 }, data: { label: '2' } },
];
// const initialEdges = [];
const initialEdges = [
{ id: 'e1-2', source: '1', target: '2' }
];
const Graph = () => {
const [playlistNodes, setNodes, onNodesChange] = useNodesState(initialNodes);
const [linkEdges, setEdges, onEdgesChange] = useEdgesState(initialEdges);
const onConnect = useCallback((params) => {
setEdges((eds) => addEdge(params, eds));
}, [setEdges]);
return (
<div className={styles.graph_wrapper}>
<ReactFlow
nodes={playlistNodes}
edges={linkEdges}
onNodesChange={onNodesChange}
onEdgesChange={onEdgesChange}
onConnect={onConnect}
>
<Controls />
<Background variant='dots' gap={36} size={3} />
</ReactFlow>
</div>
)
}
export default Graph;

27
src/pages/Landing/Landing.module.css Normal file
View File

@ -0,0 +1,27 @@
.app_header {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-size: calc(10px + 2vmin);
}
.app_logo {
height: 40vmin;
pointer-events: none;
}
@media (prefers-reduced-motion: no-preference) {
.app_logo {
animation: App-logo-spin infinite 20s linear;
}
}
@keyframes App-logo-spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}

28
src/pages/Landing/index.jsx Normal file
View File

@ -0,0 +1,28 @@
import React, { useEffect } from "react"
import { useSearchParams } from "react-router-dom";
import styles from "./Landing.module.css"
import logo from '../../assets/icons/logo.svg';
import { showSuccessToastNotification } from "../../components/ToastNotification";
const Landing = () => {
// eslint-disable-next-line no-unused-vars
const [searchParams, setSearchParams] = useSearchParams();
useEffect(() => {
if (searchParams.get("login") === "success") {
showSuccessToastNotification("Logged in!");
}
}, [searchParams]);
return (
<header className={styles.app_header}>
<img src={logo} className={styles.app_logo} alt="logo" />
<h1>Organize your Spotify playlists as a graph.</h1>
<h5>Features:</h5>
<ul>
<li>blah 1</li>
</ul>
</header>
)
}
export default Landing

6
src/pages/Login/Login.module.css Normal file
View File

@ -0,0 +1,6 @@
.login_wrapper {
display: flex;
align-items: center;
justify-content: center;
font-size: calc(10px + 2vmin);
}

18
src/pages/Login/index.jsx Normal file
View File

@ -0,0 +1,18 @@
import React, { useEffect } from 'react';
import styles from './Login.module.css';
// auth through backend
const Login = () => {
useEffect(() => {
const timeoutID = setTimeout(() => {
window.open(process.env.REACT_APP_API_BASE_URL + "/api/auth/login", "_self")
}, 1000);
return () => clearTimeout(timeoutID);
}, []);
return (
<div className={styles.login_wrapper}>Redirecting to Spotify...</div>
)
}
export default Login;

0
src/pages/PageNotFound/PageNotFound.module.css Normal file
View File

17
src/pages/PageNotFound/index.jsx Normal file
View File

@ -0,0 +1,17 @@
import React, { useEffect } from 'react';
import styles from "./PageNotFound.module.css";
import { showWarnToastNotification } from '../../components/ToastNotification';
const PageNotFound = () => {
useEffect(() => {
showWarnToastNotification("Oops!")
}, []);
return (
<div className={styles.pnf_wrapper}>
PageNotFound
</div>
)
}
export default PageNotFound

36
src/routes/AllRoutes.jsx Normal file
View File

@ -0,0 +1,36 @@
import { Route, Routes } from "react-router-dom";
import AuthOnlyRoutes from "./AuthOnlyRoutes";
import UnAuthOnlyRoutes from "./UnAuthOnlyRoutes";
import Landing from "../pages/Landing";
import PageNotFound from "../pages/PageNotFound";
import Graph from "../pages/Graph";
import Login from "../pages/Login";
const AllRoutes = () => {
return (
<Routes>
{/* Routes that require user to be logged in */}
<Route element={<AuthOnlyRoutes />}>
<Route path="/graph" element={<Graph />} />
{/* <Route path="/playlists" element={<Playlists />} /> */}
</Route>
{/* Routes that require user to be logged *out* */}
<Route element={<UnAuthOnlyRoutes />}>
<Route path="/login" element={<Login />} />
</Route>
{/* Common routes */}
<Route path="/" element={<Landing />} />
<Route path="/graph2" element={<Graph />} />
{/* 404 */}
<Route path="/page-not-found" element={<PageNotFound />} />
<Route path="*" element={<PageNotFound />} />
</Routes>
);
};
export default AllRoutes;

23
src/routes/AuthOnlyRoutes.jsx Normal file
View File

@ -0,0 +1,23 @@
import React, { useContext } from "react";
import { Navigate, Outlet, useLocation } from "react-router-dom";
import { AuthContext } from "../App";
import { showWarnToastNotification } from "../components/ToastNotification";
function AuthOnlyRoutes() {
let location = useLocation();
const auth = useContext(AuthContext);
const handleRouteRender = () => {
if (auth !== true) {
showWarnToastNotification(<p>Sign in, please!</p>);
return <Navigate to={"/login"} state={{ from: location }} />;
} else {
return <Outlet />;
}
};
return handleRouteRender();
}
export default AuthOnlyRoutes;

23
src/routes/UnAuthOnlyRoutes.jsx Normal file
View File

@ -0,0 +1,23 @@
import React, { useContext } from "react";
import { Navigate, Outlet, useLocation } from "react-router-dom";
import { AuthContext } from "../App";
import { showWarnToastNotification } from "../components/ToastNotification";
function UnAuthOnlyRoutes() {
let location = useLocation();
const auth = useContext(AuthContext);
const handleRouteRender = () => {
if (auth !== true) {
return <Outlet />;
} else {
showWarnToastNotification(<p>Already logged in!</p>);
return <Navigate to={"/graph"} state={{ from: location }} />;
}
};
return handleRouteRender();
}
export default UnAuthOnlyRoutes;