Skip to content

Commit

Permalink
feat: solved layouts time rendering in next12
Browse files Browse the repository at this point in the history
  • Loading branch information
@Molaryy
Molaryy committed Aug 30, 2023
1 parent 632b642 commit 900e230
Show file tree
Hide file tree
Showing 7 changed files with 205 additions and 210 deletions.
194 changes: 102 additions & 92 deletions pages/_app.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,115 +1,125 @@
import { Session } from 'next-auth';
import { SessionProvider } from 'next-auth/react';
import type { AppProps } from 'next/app';
import {Session} from 'next-auth';
import {SessionProvider} from 'next-auth/react';
import type {AppProps} from 'next/app';
import Head from 'next/head';
import { useEffect, useState } from 'react';
import {useEffect, useState} from 'react';

import { Center, ChakraProvider, ColorModeScript, Spinner, useToast } from '@chakra-ui/react';
import {Center, ChakraProvider, ColorModeScript, Spinner, useToast} from '@chakra-ui/react';

import theme from 'theme';
import 'theme/index.css';

import Auth from 'lib/auth';
import User from 'lib/user';

import { IPCConfig, IPCContact, IPCFile, IPCFolder, IPCProgram } from 'types/types';
import {IPCConfig, IPCContact, IPCFile, IPCFolder, IPCProgram} from 'types/types';

import AuthContext from 'contexts/auth';
import ConfigContext from 'contexts/config';
import DriveContext from 'contexts/drive';
import UserContext from 'contexts/user';
import {useRouter} from "next/router";
import Navigation from "../src/components/navigation/Navigation";

const App = ({
Component,
pageProps: { session, ...pageProps },
}: AppProps<{
session: Session;
Component,
pageProps: {session, ...pageProps},
}: AppProps<{
session: Session;
}>) => {
const [auth, setAuth] = useState<Auth | undefined>(undefined);
const [user, setUser] = useState<User | undefined>(undefined);
const [config, setConfig] = useState<IPCConfig | undefined>(undefined);
const [error, setError] = useState<Error | unknown>(undefined);
const [files, setFiles] = useState<IPCFile[]>([]);
const [sharedFiles, setSharedFiles] = useState<IPCFile[]>([]);
const [folders, setFolders] = useState<IPCFolder[]>([]);
const [programs, setPrograms] = useState<IPCProgram[]>([]);
const [sharedPrograms, setSharedPrograms] = useState<IPCProgram[]>([]);
const [contacts, setContacts] = useState<IPCContact[]>([]);
const [path, setPath] = useState('/');
const toast = useToast();
const [auth, setAuth] = useState<Auth | undefined>(undefined);
const [user, setUser] = useState<User | undefined>(undefined);
const [config, setConfig] = useState<IPCConfig | undefined>(undefined);
const [error, setError] = useState<Error | unknown>(undefined);
const [files, setFiles] = useState<IPCFile[]>([]);
const [sharedFiles, setSharedFiles] = useState<IPCFile[]>([]);
const [folders, setFolders] = useState<IPCFolder[]>([]);
const [programs, setPrograms] = useState<IPCProgram[]>([]);
const [sharedPrograms, setSharedPrograms] = useState<IPCProgram[]>([]);
const [contacts, setContacts] = useState<IPCContact[]>([]);
const [path, setPath] = useState('/');
const toast = useToast();
const route = useRouter();

useEffect(() => {
if (!auth && !error) {
try {
setAuth(new Auth());
} catch (e) {
setError(e);
}
}
}, []);
useEffect(() => {
if (!auth && !error) {
try {
setAuth(new Auth());
} catch (e) {
setError(e);
}
}
}, []);

useEffect(() => {
if (error) {
toast({
title: 'Internal Server Error',
status: 'error',
isClosable: true,
});
}
}, [error]);
useEffect(() => {
if (error) {
toast({
title: 'Internal Server Error',
status: 'error',
isClosable: true,
});
}
}, [error]);

if (!auth) {
return (
<Center mt="160px">
<Spinner w="64px" h="64px" />
</Center>
);
}
return (
<>
<Head>
<title>InterPlanetaryCloud</title>
<meta
name="description"
content="A distributed cloud built on top of Aleph, the next generation network of distributed big data applications."
/>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta charSet="UTF-8" />
<link rel="icon" href="/ipc-logo.svg" />
</Head>
<ChakraProvider theme={theme} resetCSS>
<ColorModeScript initialColorMode={theme.config.initialColorMode} />
<AuthContext.Provider value={auth}>
<UserContext.Provider value={{ user: user as User, setUser }}>
<ConfigContext.Provider value={{ config: config as IPCConfig, setConfig }}>
<DriveContext.Provider
value={{
files,
setFiles,
sharedFiles,
setSharedFiles,
folders,
setFolders,
sharedPrograms,
setSharedPrograms,
programs,
setPrograms,
contacts,
setContacts,
path,
setPath,
}}
>
<SessionProvider session={session}>
<Component {...pageProps} />
</SessionProvider>
</DriveContext.Provider>
</ConfigContext.Provider>
</UserContext.Provider>
</AuthContext.Provider>
</ChakraProvider>
</>
);
if (!auth) {
return (
<Center mt="160px">
<Spinner w="64px" h="64px"/>
</Center>
);
}

return (
<>
<Head>
<title>InterPlanetaryCloud</title>
<meta
name="description"
content="A distributed cloud built on top of Aleph, the next generation network of distributed big data applications."
/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<meta charSet="UTF-8"/>
<link rel="icon" href="/ipc-logo.svg"/>
</Head>
<ChakraProvider theme={theme} resetCSS>
<ColorModeScript initialColorMode={theme.config.initialColorMode}/>
<AuthContext.Provider value={auth}>
<UserContext.Provider value={{user: user as User, setUser}}>
<ConfigContext.Provider value={{config: config as IPCConfig, setConfig}}>
<DriveContext.Provider
value={{
files,
setFiles,
sharedFiles,
setSharedFiles,
folders,
setFolders,
sharedPrograms,
setSharedPrograms,
programs,
setPrograms,
contacts,
setContacts,
path,
setPath,
}}
>
<SessionProvider session={session}>
{route.pathname.startsWith('/drive') ? (
<Navigation>
<Component {...pageProps} />
</Navigation>
) : (
<Component {...pageProps} />
)}
</SessionProvider>
</DriveContext.Provider>
</ConfigContext.Provider>
</UserContext.Provider>
</AuthContext.Provider>
</ChakraProvider>
</>
);
};

export default App;
15 changes: 6 additions & 9 deletions pages/drive/account.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,18 +1,15 @@
import { VStack } from '@chakra-ui/react';
import {VStack} from '@chakra-ui/react';

import AccountCard from 'components/account/AccountCard';
import ConfigCard from 'components/account/ConfigCard';
import LabelBadge from 'components/LabelBadge';
import Navigation from 'components/navigation/Navigation';

const Account = (): JSX.Element => (
<Navigation>
<VStack w="100%" spacing="48px" align="start">
<LabelBadge label="Account" />
<AccountCard />
<ConfigCard />
</VStack>
</Navigation>
<VStack w="100%" spacing="48px" align="start">
<LabelBadge label="Account"/>
<AccountCard/>
<ConfigCard/>
</VStack>
);

export default Account;
27 changes: 12 additions & 15 deletions pages/drive/contacts.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,26 +1,23 @@
import { HStack, VStack } from '@chakra-ui/react';
import {HStack, VStack} from '@chakra-ui/react';

import DriveCards from 'components/cards/DriveCards';
import AddContact from 'components/contact/AddContact';
import LabelBadge from 'components/LabelBadge';
import Navigation from 'components/navigation/Navigation';

import { useDriveContext } from 'contexts/drive';
import {useDriveContext} from 'contexts/drive';

const Contacts = (): JSX.Element => {
const { contacts } = useDriveContext();
const {contacts} = useDriveContext();

return (
<Navigation>
<VStack w="100%" spacing="48px" align="start">
<HStack spacing="48px">
<LabelBadge label="Contacts" />
<AddContact />
</HStack>
<DriveCards contacts={contacts} />
</VStack>
</Navigation>
);
return (
<VStack w="100%" spacing="48px" align="start">
<HStack spacing="48px">
<LabelBadge label="Contacts"/>
<AddContact/>
</HStack>
<DriveCards contacts={contacts}/>
</VStack>
);
};

export default Contacts;
Loading

0 comments on commit 900e230

Please sign in to comment.