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

formatting

Browse Source
This commit is contained in:
Kaushik Narayan R 2024-12-29 18:39:31 -07:00
parent 41c3f26829
commit 9894a0da59
18 changed files with 186 additions and 172 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
public/index.html
View File

@ -2,15 +2,29 @@
<html lang="en">
<head>
<meta charset="utf-8" />
<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">
<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="description"
content="Web site created using create-react-app"
name="description"
content="Web site created using create-react-app"
/>
<!--
manifest.json provides metadata used when your web app is installed on a

2
public/manifest.json
View File

@ -17,4 +17,4 @@
"display": "standalone",
"theme_color": "#ffffff",
"background_color": "#ffffff"
}
}

26
src/api/auth.js
View File

@ -2,19 +2,19 @@ import { axiosInstance } from "./axiosInstance";
import { authHealthCheckURL, authRefreshURL } from "./paths";
export const apiAuthCheck = async () => {
try {
const response = await axiosInstance.get(authHealthCheckURL);
return response;
} catch (error) {
return error.response;
}
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;
}
}
try {
const response = await axiosInstance.get(authRefreshURL);
return response;
} catch (error) {
return error.response;
}
}

12
src/api/axiosInstance.js
View File

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

34
src/boilerplates/apiResp.js
View File

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

2
src/boilerplates/media_query.css
View File

@ -21,4 +21,4 @@
}
@media (prefers-color-scheme: light) {
}
}

4
src/components/Navbar/index.jsx
View File

@ -11,13 +11,13 @@ const Navbar = () => {
return (
<nav className={styles.navbar_wrapper}>
<StyledNavLink path="/" text="Home" />
<StyledNavLink path="/graph" text="Graph" />
<StyledNavLink path="/about" text="About" />
{
auth === true ?
<StyledNavLink path="/logout" text="Logout" /> :
<StyledNavLink path="/login" text="Login" />
}
<StyledNavLink path="/graph" text="Graph" />
<StyledNavLink path="/about" text="About" />
</nav>
)
}

10
src/components/ToastNotification/index.jsx
View File

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

6
src/index.css
View File

@ -92,9 +92,9 @@ img {
}
body {
font-family: var(--primaryFont),-apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
"Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
sans-serif;
font-family: var(--primaryFont), -apple-system, BlinkMacSystemFont, "Segoe UI",
"Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans",
"Helvetica Neue", sans-serif;
font-size: var(--normalFontSize);
color: var(--text);
background-color: var(--bgBlue);

8
src/pages/Graph/Graph.module.css
View File

@ -1,5 +1,5 @@
.graph_wrapper {
display: flex;
width: 100%;
height: 100vh;
}
display: flex;
width: 100%;
height: 100vh;
}

58
src/pages/Graph/index.jsx
View File

@ -1,11 +1,11 @@
import React, { useCallback } from 'react';
import {
ReactFlow,
Controls,
Background,
useNodesState,
useEdgesState,
addEdge,
ReactFlow,
Controls,
Background,
useNodesState,
useEdgesState,
addEdge,
} from '@xyflow/react';
import '@xyflow/react/dist/style.css';
@ -13,35 +13,35 @@ 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' } },
{ 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' }
{ id: 'e1-2', source: '1', target: '2' }
];
const Graph = () => {
const [playlistNodes, setNodes, onNodesChange] = useNodesState(initialNodes);
const [linkEdges, setEdges, onEdgesChange] = useEdgesState(initialEdges);
const [playlistNodes, setNodes, onNodesChange] = useNodesState(initialNodes);
const [linkEdges, setEdges, onEdgesChange] = useEdgesState(initialEdges);
const onConnect = useCallback((params) => {
setEdges((eds) => addEdge(params, eds));
}, [setEdges]);
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>
)
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;
export default Graph;

24
src/pages/Login/index.jsx
View File

@ -4,18 +4,18 @@ import { authLoginURL } from '../../api/paths';
// auth through backend
const Login = () => {
useEffect(() => {
const timeoutID = setTimeout(() => {
window.open(authLoginURL, "_self")
}, 1000);
useEffect(() => {
const timeoutID = setTimeout(() => {
window.open(authLoginURL, "_self")
}, 1000);
return () => clearTimeout(timeoutID);
}, []);
return (
<div className={styles.login_wrapper}>
Redirecting to Spotify...
</div>
)
return () => clearTimeout(timeoutID);
}, []);
return (
<div className={styles.login_wrapper}>
Redirecting to Spotify...
</div>
)
}
export default Login;
export default Login;

24
src/pages/Logout/index.jsx
View File

@ -3,18 +3,18 @@ import styles from './Logout.module.css';
import { authLogoutURL } from '../../api/paths';
const Logout = () => {
useEffect(() => {
const timeoutID = setTimeout(() => {
window.open(authLogoutURL, "_self")
}, 1000);
useEffect(() => {
const timeoutID = setTimeout(() => {
window.open(authLogoutURL, "_self")
}, 1000);
return () => clearTimeout(timeoutID);
}, []);
return (
<div className={styles.logout_wrapper}>
See you soon!
</div>
)
return () => clearTimeout(timeoutID);
}, []);
return (
<div className={styles.logout_wrapper}>
See you soon!
</div>
)
}
export default Logout;
export default Logout;

18
src/pages/PageNotFound/index.jsx
View File

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

40
src/routes/AllRoutes.jsx
View File

@ -10,28 +10,28 @@ import Login from "../pages/Login";
import Logout from "../pages/Logout";
const AllRoutes = () => {
return (
<Routes>
{/* Routes that require user to be logged in */}
<Route element={<AuthOnlyRoutes />}>
<Route path="/logout" element={<Logout />} />
<Route path="/graph" element={<Graph />} />
{/* <Route path="/playlists" element={<Playlists />} /> */}
</Route>
return (
<Routes>
{/* Routes that require user to be logged in */}
<Route element={<AuthOnlyRoutes />}>
<Route path="/logout" element={<Logout />} />
<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>
{/* Routes that require user to be logged *out* */}
<Route element={<UnAuthOnlyRoutes />}>
<Route path="/login" element={<Login />} />
</Route>
{/* Common routes */}
<Route path="/" element={<Landing />} />
{/* Common routes */}
<Route path="/" element={<Landing />} />
{/* 404 */}
<Route path="/page-not-found" element={<PageNotFound />} />
<Route path="*" element={<PageNotFound />} />
</Routes>
);
{/* 404 */}
<Route path="/page-not-found" element={<PageNotFound />} />
<Route path="*" element={<PageNotFound />} />
</Routes>
);
};
export default AllRoutes;
export default AllRoutes;

24
src/routes/AuthOnlyRoutes.jsx
View File

@ -5,19 +5,19 @@ import { AuthContext } from "../App";
import { showWarnToastNotification } from "../components/ToastNotification";
function AuthOnlyRoutes() {
let location = useLocation();
const auth = useContext(AuthContext);
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 />;
}
};
const handleRouteRender = () => {
if (auth !== true) {
showWarnToastNotification(<p>Sign in, please!</p>);
return <Navigate to={"/login"} state={{ from: location }} />;
} else {
return <Outlet />;
}
};
return handleRouteRender();
return handleRouteRender();
}
export default AuthOnlyRoutes;
export default AuthOnlyRoutes;

24
src/routes/UnAuthOnlyRoutes.jsx
View File

@ -5,19 +5,19 @@ import { AuthContext } from "../App";
import { showWarnToastNotification } from "../components/ToastNotification";
function UnAuthOnlyRoutes() {
let location = useLocation();
const auth = useContext(AuthContext);
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 }} />;
}
};
const handleRouteRender = () => {
if (auth !== true) {
return <Outlet />;
} else {
showWarnToastNotification(<p>Already logged in!</p>);
return <Navigate to={"/graph"} state={{ from: location }} />;
}
};
return handleRouteRender();
return handleRouteRender();
}
export default UnAuthOnlyRoutes;
export default UnAuthOnlyRoutes;

14
src/utils/numFormatter.js
View File

@ -1,16 +1,16 @@
/**
* Returns a string with zero padding of the number
*
*
* @param {number} num Input number (positive integer only, for now)
* @param {number} places Number of zeroes to pad
* @param {"before" | "after"} position Position of zeroes
* @returns {string} Zero-padded string
*/
export const zeroPaddedString = (num, places, position) => {
if (num < 0) throw new Error("negative number");
if (places < 0) throw new Error("invalid number of zeroes");
if (position !== "before" && position !== "after") throw new Error("invalid position (before or after only)");
if (num < 0) throw new Error("negative number");
if (places < 0) throw new Error("invalid number of zeroes");
if (position !== "before" && position !== "after") throw new Error("invalid position (before or after only)");
const zeroes = "0".repeat(places);
return position === "before" ? '' + zeroes + num : '' + num + zeroes;
}
const zeroes = "0".repeat(places);
return position === "before" ? '' + zeroes + num : '' + num + zeroes;
}