This commit is contained in:
Roj Serbest
parent
955a1cd137
commit
b13d1ff7df
|
|
@ -2,13 +2,6 @@ import { Client } from "socialvoid";
|
|||
|
||||
export const client = new Client();
|
||||
|
||||
export const authenticated = async () => {
|
||||
if (!client.sessionExists) return false;
|
||||
|
||||
const session = await client.session.get();
|
||||
return session.authenticated;
|
||||
};
|
||||
|
||||
export const logout = async () => {
|
||||
if (!client.sessionExists) return;
|
||||
|
||||
|
|
|
|||
|
|
@ -1,49 +0,0 @@
|
|||
import { useNProgress } from "@tanem/react-nprogress";
|
||||
|
||||
const Loading: React.FC<{ loading: boolean }> = ({ loading }) => {
|
||||
const { animationDuration, isFinished, progress } = useNProgress({
|
||||
isAnimating: loading,
|
||||
});
|
||||
|
||||
return (
|
||||
<>
|
||||
<style jsx>{`
|
||||
.container {
|
||||
opacity: ${isFinished ? 0 : 1};
|
||||
pointerevents: none;
|
||||
transition: opacity ${animationDuration}ms linear;
|
||||
}
|
||||
|
||||
.bar {
|
||||
background: #29d;
|
||||
height: 2px;
|
||||
left: 0;
|
||||
margin-left: ${(-1 + progress) * 100}%;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
transition: margin-left ${animationDuration}ms linear;
|
||||
width: 100%;
|
||||
z-index: 1031;
|
||||
}
|
||||
|
||||
.spinner {
|
||||
box-shadow: 0 0 10px #29d, 0 0 5px #29d;
|
||||
display: block;
|
||||
height: 100%;
|
||||
opacity: 1;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
transform: rotate(3deg) translate(0px, -4px);
|
||||
width: 100px;
|
||||
}
|
||||
`}</style>
|
||||
<div className="container">
|
||||
<div className="bar">
|
||||
<div className="spinner" />
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default Loading;
|
||||
|
|
@ -1,19 +1,12 @@
|
|||
import { useMemo, useState, useEffect } from "react";
|
||||
import { useRouter } from "next/router";
|
||||
import { useMemo } from "react";
|
||||
import { AppProps } from "next/app";
|
||||
import useMediaQuery from "@mui/material/useMediaQuery";
|
||||
import CssBaseline from "@mui/material/CssBaseline";
|
||||
import Container from "@mui/material/Container";
|
||||
import { createTheme, ThemeProvider } from "@mui/material/styles";
|
||||
import { SnackbarProvider } from "notistack";
|
||||
import Loading from "../components/Loading";
|
||||
import { useLoadingState, loadingStore } from "../stores";
|
||||
|
||||
function App({ Component, pageProps }: AppProps) {
|
||||
const router = useRouter();
|
||||
|
||||
const { loading, key } = useLoadingState();
|
||||
|
||||
const prefersDarkMode = useMediaQuery("(prefers-color-scheme: dark)");
|
||||
|
||||
const theme = useMemo(
|
||||
|
|
@ -26,28 +19,11 @@ function App({ Component, pageProps }: AppProps) {
|
|||
[prefersDarkMode]
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
const handleRouteChangeStart = () => {
|
||||
loadingStore.update((state) => ({
|
||||
...state,
|
||||
loading: true,
|
||||
key: state.key ^ 1,
|
||||
}));
|
||||
};
|
||||
|
||||
router.events.on("routeChangeStart", handleRouteChangeStart);
|
||||
|
||||
return () => {
|
||||
router.events.off("routeChangeStart", handleRouteChangeStart);
|
||||
};
|
||||
}, [router.events]);
|
||||
|
||||
return (
|
||||
<ThemeProvider theme={theme}>
|
||||
<CssBaseline />
|
||||
<SnackbarProvider>
|
||||
<Container component="main" maxWidth="md">
|
||||
<Loading loading={loading} key={key} />
|
||||
<Component {...pageProps} />
|
||||
</Container>
|
||||
</SnackbarProvider>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,34 @@
|
|||
export default function Test() {
|
||||
const a = "Hello".repeat(10);
|
||||
return (
|
||||
<>
|
||||
<p>{a}</p>
|
||||
<p>{a}</p>
|
||||
<p>{a}</p>
|
||||
<p>{a}</p>
|
||||
<p>{a}</p>
|
||||
<p>{a}</p>
|
||||
<p>{a}</p>
|
||||
<p>{a}</p>
|
||||
<p>{a}</p>
|
||||
<p>{a}</p>
|
||||
<p>{a}</p>
|
||||
<p>{a}</p>
|
||||
<p>{a}</p>
|
||||
<p>{a}</p>
|
||||
<p>{a}</p>
|
||||
<p>{a}</p>
|
||||
<p>{a}</p>
|
||||
<p>{a}</p>
|
||||
<p>{a}</p>
|
||||
<p>{a}</p>
|
||||
<p>{a}</p>
|
||||
<p>{a}</p>
|
||||
<p>{a}</p>
|
||||
<p>{a}</p>
|
||||
<p>{a}</p>
|
||||
<p>{a}</p>
|
||||
<p>{a}</p>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
|
@ -1 +0,0 @@
|
|||
export * from "./loading";
|
||||
|
|
@ -1,14 +0,0 @@
|
|||
import { Store } from "pullstate";
|
||||
|
||||
export const loadingStore = new Store({
|
||||
loading: true,
|
||||
key: 0,
|
||||
});
|
||||
|
||||
export const useLoadingState = () => loadingStore.useState();
|
||||
|
||||
export const setLoading = (loading: boolean) => {
|
||||
loadingStore.update((state) => {
|
||||
state.loading = loading;
|
||||
});
|
||||
};
|
||||
|
|
@ -3,7 +3,6 @@ import { NextRouter } from "next/router";
|
|||
import { ProviderContext } from "notistack";
|
||||
import { authenticated, client } from "../client";
|
||||
import { runOnClient } from "./client";
|
||||
import { setLoading } from "../stores";
|
||||
|
||||
export const dispatch = (
|
||||
func: (client: Client) => Promise<void> | void,
|
||||
|
|
@ -12,7 +11,6 @@ export const dispatch = (
|
|||
options?: {
|
||||
requireToBeAuthenticated?: boolean;
|
||||
requireToBeNotAuthenticated?: boolean;
|
||||
stopLoading?: boolean;
|
||||
}
|
||||
) => {
|
||||
if (
|
||||
|
|
@ -25,22 +23,18 @@ export const dispatch = (
|
|||
runOnClient(async () => {
|
||||
try {
|
||||
if (options?.requireToBeAuthenticated) {
|
||||
if (!(await authenticated())) {
|
||||
if (!client.sessionExists) {
|
||||
router.push("/signin");
|
||||
return;
|
||||
}
|
||||
} else if (options?.requireToBeNotAuthenticated) {
|
||||
if (await authenticated()) {
|
||||
if (client.sessionExists) {
|
||||
router.push("/");
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
await func(client);
|
||||
|
||||
if (options?.stopLoading) {
|
||||
setLoading(false);
|
||||
}
|
||||
} catch (err) {
|
||||
if (err instanceof errors.SocialvoidError) {
|
||||
snackbar.enqueueSnackbar(
|
||||
|
|
|
|||
Loading…
Reference in New Issue