ShogunIsHere/spotify-manager-web
1
0
Fork 0
mirror of https://github.com/20kaushik02/spotify-manager-web.git synced 2025-12-06 07:54:07 +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"> <html lang="en">
<head> <head>
<meta charset="utf-8" /> <meta charset="utf-8" />
<link rel="apple-touch-icon" sizes="180x180" href="%PUBLIC_URL%/apple-touch-icon.png"> <link
<link rel="icon" type="image/png" sizes="32x32" href="%PUBLIC_URL%/favicon-32x32.png"> rel="apple-touch-icon"
<link rel="icon" type="image/png" sizes="16x16" href="%PUBLIC_URL%/favicon-16x16.png"> sizes="180x180"
<meta name="theme-color" content="#ffffff"> 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="viewport" content="width=device-width, initial-scale=1" />
<meta <meta
name="description" name="description"
content="Web site created using create-react-app" content="Web site created using create-react-app"
/> />
<!-- <!--
manifest.json provides metadata used when your web app is installed on a 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", "display": "standalone",
"theme_color": "#ffffff", "theme_color": "#ffffff",
"background_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"; import { authHealthCheckURL, authRefreshURL } from "./paths";
export const apiAuthCheck = async () => { export const apiAuthCheck = async () => {
try { try {
const response = await axiosInstance.get(authHealthCheckURL); const response = await axiosInstance.get(authHealthCheckURL);
return response; return response;
} catch (error) { } catch (error) {
return error.response; return error.response;
} }
} }
export const apiAuthRefresh = async () => { export const apiAuthRefresh = async () => {
try { try {
const response = await axiosInstance.get(authRefreshURL); const response = await axiosInstance.get(authRefreshURL);
return response; return response;
} catch (error) { } catch (error) {
return error.response; return error.response;
} }
} }

12
src/api/axiosInstance.js
View File

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

34
src/boilerplates/apiResp.js
View File

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

2
src/boilerplates/media_query.css
View File

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

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

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

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

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

6
src/index.css
View File

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

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

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

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

@ -1,11 +1,11 @@
import React, { useCallback } from 'react'; import React, { useCallback } from 'react';
import { import {
ReactFlow, ReactFlow,
Controls, Controls,
Background, Background,
useNodesState, useNodesState,
useEdgesState, useEdgesState,
addEdge, addEdge,
} from '@xyflow/react'; } from '@xyflow/react';
import '@xyflow/react/dist/style.css'; import '@xyflow/react/dist/style.css';
@ -13,35 +13,35 @@ import styles from './Graph.module.css';
// const initialNodes = []; // const initialNodes = [];
const initialNodes = [ const initialNodes = [
{ id: '1', position: { x: 0, y: 0 }, data: { label: '1' } }, { id: '1', position: { x: 0, y: 0 }, data: { label: '1' } },
{ id: '2', position: { x: 0, y: 100 }, data: { label: '2' } }, { id: '2', position: { x: 0, y: 100 }, data: { label: '2' } },
]; ];
// const initialEdges = []; // const initialEdges = [];
const initialEdges = [ const initialEdges = [
{ id: 'e1-2', source: '1', target: '2' } { id: 'e1-2', source: '1', target: '2' }
]; ];
const Graph = () => { const Graph = () => {
const [playlistNodes, setNodes, onNodesChange] = useNodesState(initialNodes); const [playlistNodes, setNodes, onNodesChange] = useNodesState(initialNodes);
const [linkEdges, setEdges, onEdgesChange] = useEdgesState(initialEdges); const [linkEdges, setEdges, onEdgesChange] = useEdgesState(initialEdges);
const onConnect = useCallback((params) => { const onConnect = useCallback((params) => {
setEdges((eds) => addEdge(params, eds)); setEdges((eds) => addEdge(params, eds));
}, [setEdges]); }, [setEdges]);
return ( return (
<div className={styles.graph_wrapper}> <div className={styles.graph_wrapper}>
<ReactFlow <ReactFlow
nodes={playlistNodes} nodes={playlistNodes}
edges={linkEdges} edges={linkEdges}
onNodesChange={onNodesChange} onNodesChange={onNodesChange}
onEdgesChange={onEdgesChange} onEdgesChange={onEdgesChange}
onConnect={onConnect} onConnect={onConnect}
> >
<Controls /> <Controls />
<Background variant='dots' gap={36} size={3} /> <Background variant='dots' gap={36} size={3} />
</ReactFlow> </ReactFlow>
</div> </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 // auth through backend
const Login = () => { const Login = () => {
useEffect(() => { useEffect(() => {
const timeoutID = setTimeout(() => { const timeoutID = setTimeout(() => {
window.open(authLoginURL, "_self") window.open(authLoginURL, "_self")
}, 1000); }, 1000);
return () => clearTimeout(timeoutID); return () => clearTimeout(timeoutID);
}, []); }, []);
return ( return (
<div className={styles.login_wrapper}> <div className={styles.login_wrapper}>
Redirecting to Spotify... Redirecting to Spotify...
</div> </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'; import { authLogoutURL } from '../../api/paths';
const Logout = () => { const Logout = () => {
useEffect(() => { useEffect(() => {
const timeoutID = setTimeout(() => { const timeoutID = setTimeout(() => {
window.open(authLogoutURL, "_self") window.open(authLogoutURL, "_self")
}, 1000); }, 1000);
return () => clearTimeout(timeoutID); return () => clearTimeout(timeoutID);
}, []); }, []);
return ( return (
<div className={styles.logout_wrapper}> <div className={styles.logout_wrapper}>
See you soon! See you soon!
</div> </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'; import { showWarnToastNotification } from '../../components/ToastNotification';
const PageNotFound = () => { const PageNotFound = () => {
useEffect(() => { useEffect(() => {
showWarnToastNotification("Oops!") showWarnToastNotification("Oops!")
}, []); }, []);
return ( return (
<div className={styles.pnf_wrapper}> <div className={styles.pnf_wrapper}>
PageNotFound PageNotFound
</div> </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"; import Logout from "../pages/Logout";
const AllRoutes = () => { const AllRoutes = () => {
return ( return (
<Routes> <Routes>
{/* Routes that require user to be logged in */} {/* Routes that require user to be logged in */}
<Route element={<AuthOnlyRoutes />}> <Route element={<AuthOnlyRoutes />}>
<Route path="/logout" element={<Logout />} /> <Route path="/logout" element={<Logout />} />
<Route path="/graph" element={<Graph />} /> <Route path="/graph" element={<Graph />} />
{/* <Route path="/playlists" element={<Playlists />} /> */} {/* <Route path="/playlists" element={<Playlists />} /> */}
</Route> </Route>
{/* Routes that require user to be logged *out* */} {/* Routes that require user to be logged *out* */}
<Route element={<UnAuthOnlyRoutes />}> <Route element={<UnAuthOnlyRoutes />}>
<Route path="/login" element={<Login />} /> <Route path="/login" element={<Login />} />
</Route> </Route>
{/* Common routes */} {/* Common routes */}
<Route path="/" element={<Landing />} /> <Route path="/" element={<Landing />} />
{/* 404 */} {/* 404 */}
<Route path="/page-not-found" element={<PageNotFound />} /> <Route path="/page-not-found" element={<PageNotFound />} />
<Route path="*" element={<PageNotFound />} /> <Route path="*" element={<PageNotFound />} />
</Routes> </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"; import { showWarnToastNotification } from "../components/ToastNotification";
function AuthOnlyRoutes() { function AuthOnlyRoutes() {
let location = useLocation(); let location = useLocation();
const auth = useContext(AuthContext); const auth = useContext(AuthContext);
const handleRouteRender = () => { const handleRouteRender = () => {
if (auth !== true) { if (auth !== true) {
showWarnToastNotification(<p>Sign in, please!</p>); showWarnToastNotification(<p>Sign in, please!</p>);
return <Navigate to={"/login"} state={{ from: location }} />; return <Navigate to={"/login"} state={{ from: location }} />;
} else { } else {
return <Outlet />; 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"; import { showWarnToastNotification } from "../components/ToastNotification";
function UnAuthOnlyRoutes() { function UnAuthOnlyRoutes() {
let location = useLocation(); let location = useLocation();
const auth = useContext(AuthContext); const auth = useContext(AuthContext);
const handleRouteRender = () => { const handleRouteRender = () => {
if (auth !== true) { if (auth !== true) {
return <Outlet />; return <Outlet />;
} else { } else {
showWarnToastNotification(<p>Already logged in!</p>); showWarnToastNotification(<p>Already logged in!</p>);
return <Navigate to={"/graph"} state={{ from: location }} />; 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 * Returns a string with zero padding of the number
* *
* @param {number} num Input number (positive integer only, for now) * @param {number} num Input number (positive integer only, for now)
* @param {number} places Number of zeroes to pad * @param {number} places Number of zeroes to pad
* @param {"before" | "after"} position Position of zeroes * @param {"before" | "after"} position Position of zeroes
* @returns {string} Zero-padded string * @returns {string} Zero-padded string
*/ */
export const zeroPaddedString = (num, places, position) => { export const zeroPaddedString = (num, places, position) => {
if (num < 0) throw new Error("negative number"); if (num < 0) throw new Error("negative number");
if (places < 0) throw new Error("invalid number of zeroes"); 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 (position !== "before" && position !== "after") throw new Error("invalid position (before or after only)");
const zeroes = "0".repeat(places); const zeroes = "0".repeat(places);
return position === "before" ? '' + zeroes + num : '' + num + zeroes; return position === "before" ? '' + zeroes + num : '' + num + zeroes;
} }