Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Folder upload #161

Open
wants to merge 12 commits into
base: dev
Choose a base branch
from
Open

Folder upload #161

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
247d3de
feat: user can now add the root folder but still can't add the files …
Molaryy Jul 28, 2023
ece8099
fix: fixed typescript error that should not occur
Molaryy Jul 28, 2023
fd412f4
feat: finished algorithm to get all the folders and files
Molaryy Jul 31, 2023
4b0a93a
feat: upload subfolders on root folder works, still need to add the f…
Molaryy Aug 2, 2023
843b18d
feat: finished folder upload, but should fix react contexts
Molaryy Aug 2, 2023
af637d9
feat: drag and drop folder upload
Molaryy Aug 23, 2023
900e230
feat: solved layouts time rendering in next12
Molaryy Aug 30, 2023
46b1b29
feat: refactored drag & drop for folder
Molaryy Aug 31, 2023
6c715fc
fix: fixed folder update in front end
Molaryy Aug 31, 2023
88ea577
feat: added new style when dragging a folder
Molaryy Sep 4, 2023
97686df
fix: lint
Molaryy Sep 5, 2023
3cf2a93
feat: updated README.md
Molaryy Sep 5, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 2 additions & 1 deletion README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -64,9 +64,10 @@ You are now ready to access to your decentralized cloud at [`http://localhost:30
</details>

<details>
<summary>Create folders to organize your drive</summary>
<summary>Create and upload folders to organize your drive</summary>
<ul>
<li>Files are great, but virtual folders are also available on IPC to let you organize your files the way you want 🤩</li>
<li>A drag and drop is also available
</ul>
</details>

Expand Down
194 changes: 102 additions & 92 deletions pages/_app.tsx
View file
Open in desktop
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
Open in desktop
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
Open in desktop
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