From dd68c02cd9b31b2ef2c5dbf0edc94a65a24fd1dc Mon Sep 17 00:00:00 2001
From: Mohammed JBILOU <95973236+Molaryy@users.noreply.github.com>
Date: Thu, 29 Jun 2023 19:21:51 +0200
Subject: [PATCH] feat: refactoring the compenents folder
---
pages/connection.tsx | 56 +--
pages/drive/account.tsx | 20 +-
pages/drive/contacts.tsx | 34 +-
pages/drive/index.tsx | 108 ++---
pages/drive/programs.tsx | 28 +-
pages/drive/shared.tsx | 30 +-
pages/drive/trash.tsx | 38 +-
pages/index.tsx | 34 +-
pages/login.tsx | 200 ++++-----
pages/signup.tsx | 180 ++++----
src/components/{ => Models}/Button.tsx | 0
src/components/{ => Models}/LabelBadge.tsx | 0
src/components/{ => Models}/Modal.tsx | 0
src/components/{ => Models}/Tooltip.tsx | 0
src/components/{ => Models}/cards/Card.tsx | 0
src/components/Models/cards/ContactCard.tsx | 66 +++
.../{ => Models}/cards/DriveCards.tsx | 0
src/components/Models/cards/FileCard.tsx | 87 ++++
src/components/Models/cards/FolderCard.tsx | 89 ++++
.../{ => Models}/cards/PathCard.tsx | 0
src/components/Models/cards/ProgramCard.tsx | 82 ++++
src/components/{ => Pages}/AuthPage.tsx | 0
.../dashboardPage/ContactOptions.tsx | 0
.../{ => Pages}/dashboardPage/FileOptions.tsx | 0
.../dashboardPage/FolderOptions.tsx | 0
.../dashboardPage/ProgramOptions.tsx | 0
.../Pages/landingPage/FeaturesSection.tsx | 111 +++++
.../{ => Pages}/landingPage/Footer.tsx | 0
.../Pages/landingPage/HeadingSection.tsx | 77 ++++
src/components/Pages/landingPage/NavBar.tsx | 43 ++
.../landingPage/PartnersSection.tsx | 0
.../landingPage/ServicesSection.tsx | 0
.../{ => Pages}/navigation/NavbarItem.tsx | 0
.../{ => Pages}/navigation/Navigation.tsx | 0
.../Pages/navigation/ResponsiveBar.tsx | 94 ++++
src/components/Pages/navigation/SideBar.tsx | 128 ++++++
src/components/account/AccountCard.tsx | 238 +++++-----
src/components/account/ConfigCard.tsx | 172 ++++----
src/components/account/ConfigInputModal.tsx | 98 ++---
src/components/account/ConfigSelect.tsx | 62 +--
src/components/cards/ContactCard.tsx | 66 ---
src/components/cards/FileCard.tsx | 87 ----
src/components/cards/FolderCard.tsx | 89 ----
src/components/cards/ProgramCard.tsx | 82 ----
.../computing/github/GithubModal.tsx | 406 +++++++++---------
.../computing/programs/ProgramModal.tsx | 202 ++++-----
src/components/contact/AddContact.tsx | 154 +++----
src/components/contact/UpdateContact.tsx | 134 +++---
src/components/file/DeleteBin.tsx | 138 +++---
src/components/file/DeleteFile.tsx | 236 +++++-----
src/components/file/MoveFile.tsx | 274 ++++++------
src/components/file/RenameFile.tsx | 212 ++++-----
src/components/file/ShareFile.tsx | 274 ++++++------
src/components/file/UpdateContentFile.tsx | 270 ++++++------
src/components/file/UploadFile.tsx | 258 +++++------
src/components/folder/CreateFolder.tsx | 212 ++++-----
src/components/folder/DeleteFolder.tsx | 190 ++++----
src/components/folder/MoveFolder.tsx | 340 +++++++--------
.../landingPage/FeaturesSection.tsx | 111 -----
src/components/landingPage/HeadingSection.tsx | 77 ----
src/components/landingPage/NavBar.tsx | 43 --
src/components/navigation/ResponsiveBar.tsx | 94 ----
src/components/navigation/SideBar.tsx | 128 ------
src/components/programs/DeleteProgram.tsx | 150 +++----
src/components/programs/RenameProgram.tsx | 200 ++++-----
src/components/programs/ShareProgram.tsx | 268 ++++++------
66 files changed, 3385 insertions(+), 3385 deletions(-)
rename src/components/{ => Models}/Button.tsx (100%)
rename src/components/{ => Models}/LabelBadge.tsx (100%)
rename src/components/{ => Models}/Modal.tsx (100%)
rename src/components/{ => Models}/Tooltip.tsx (100%)
rename src/components/{ => Models}/cards/Card.tsx (100%)
create mode 100644 src/components/Models/cards/ContactCard.tsx
rename src/components/{ => Models}/cards/DriveCards.tsx (100%)
create mode 100644 src/components/Models/cards/FileCard.tsx
create mode 100644 src/components/Models/cards/FolderCard.tsx
rename src/components/{ => Models}/cards/PathCard.tsx (100%)
create mode 100644 src/components/Models/cards/ProgramCard.tsx
rename src/components/{ => Pages}/AuthPage.tsx (100%)
rename src/components/{ => Pages}/dashboardPage/ContactOptions.tsx (100%)
rename src/components/{ => Pages}/dashboardPage/FileOptions.tsx (100%)
rename src/components/{ => Pages}/dashboardPage/FolderOptions.tsx (100%)
rename src/components/{ => Pages}/dashboardPage/ProgramOptions.tsx (100%)
create mode 100644 src/components/Pages/landingPage/FeaturesSection.tsx
rename src/components/{ => Pages}/landingPage/Footer.tsx (100%)
create mode 100644 src/components/Pages/landingPage/HeadingSection.tsx
create mode 100644 src/components/Pages/landingPage/NavBar.tsx
rename src/components/{ => Pages}/landingPage/PartnersSection.tsx (100%)
rename src/components/{ => Pages}/landingPage/ServicesSection.tsx (100%)
rename src/components/{ => Pages}/navigation/NavbarItem.tsx (100%)
rename src/components/{ => Pages}/navigation/Navigation.tsx (100%)
create mode 100644 src/components/Pages/navigation/ResponsiveBar.tsx
create mode 100644 src/components/Pages/navigation/SideBar.tsx
delete mode 100644 src/components/cards/ContactCard.tsx
delete mode 100644 src/components/cards/FileCard.tsx
delete mode 100644 src/components/cards/FolderCard.tsx
delete mode 100644 src/components/cards/ProgramCard.tsx
delete mode 100644 src/components/landingPage/FeaturesSection.tsx
delete mode 100644 src/components/landingPage/HeadingSection.tsx
delete mode 100644 src/components/landingPage/NavBar.tsx
delete mode 100644 src/components/navigation/ResponsiveBar.tsx
delete mode 100644 src/components/navigation/SideBar.tsx
diff --git a/pages/connection.tsx b/pages/connection.tsx
index c13dcc3f..db384ea9 100644
--- a/pages/connection.tsx
+++ b/pages/connection.tsx
@@ -1,35 +1,35 @@
-import { Link, Stack, useBreakpointValue } from '@chakra-ui/react';
-import { BsRocketTakeoffFill } from 'react-icons/bs';
+import {Link, Stack, useBreakpointValue} from '@chakra-ui/react';
+import {BsRocketTakeoffFill} from 'react-icons/bs';
-import AuthPage from 'components/AuthPage';
-import Button from 'components/Button';
+import AuthPage from 'components/Pages/AuthPage';
+import Button from 'components/Models/Button';
const Connection = (): JSX.Element => {
- const isMobile = useBreakpointValue({ base: true, md: false }) || false;
+ const isMobile = useBreakpointValue({base: true, md: false}) || false;
- return (
-
-
-
-
-
-
-
-
-
-
- );
+ return (
+
+
+
+
+
+
+
+
+
+
+ );
};
export default Connection;
diff --git a/pages/drive/account.tsx b/pages/drive/account.tsx
index 27ca7aac..57a6eb21 100644
--- a/pages/drive/account.tsx
+++ b/pages/drive/account.tsx
@@ -1,18 +1,18 @@
-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';
+import LabelBadge from 'components/Models/LabelBadge';
+import Navigation from 'components/Pages/navigation/Navigation';
const Account = (): JSX.Element => (
-
-
-
-
-
-
-
+
+
+
+
+
+
+
);
export default Account;
diff --git a/pages/drive/contacts.tsx b/pages/drive/contacts.tsx
index fca5efe4..5156a75e 100644
--- a/pages/drive/contacts.tsx
+++ b/pages/drive/contacts.tsx
@@ -1,26 +1,26 @@
-import { HStack, VStack } from '@chakra-ui/react';
+import {HStack, VStack} from '@chakra-ui/react';
-import DriveCards from 'components/cards/DriveCards';
+import DriveCards from 'components/Models/cards/DriveCards';
import AddContact from 'components/contact/AddContact';
-import LabelBadge from 'components/LabelBadge';
-import Navigation from 'components/navigation/Navigation';
+import LabelBadge from 'components/Models/LabelBadge';
+import Navigation from 'components/Pages/navigation/Navigation';
-import { useDriveContext } from 'contexts/drive';
+import {useDriveContext} from 'contexts/drive';
const Contacts = (): JSX.Element => {
- const { contacts } = useDriveContext();
+ const {contacts} = useDriveContext();
- return (
-
-
-
-
-
-
-
-
-
- );
+ return (
+
+
+
+
+
+
+
+
+
+ );
};
export default Contacts;
diff --git a/pages/drive/index.tsx b/pages/drive/index.tsx
index 422f39b0..6de7a3ac 100644
--- a/pages/drive/index.tsx
+++ b/pages/drive/index.tsx
@@ -1,69 +1,69 @@
-import { useColorMode, useToast, VStack } from '@chakra-ui/react';
-import { useEffect } from 'react';
+import {useColorMode, useToast, VStack} from '@chakra-ui/react';
+import {useEffect} from 'react';
-import { useConfigContext } from 'contexts/config';
-import { useDriveContext } from 'contexts/drive';
-import { useUserContext } from 'contexts/user';
+import {useConfigContext} from 'contexts/config';
+import {useDriveContext} from 'contexts/drive';
+import {useUserContext} from 'contexts/user';
-import DriveCards from 'components/cards/DriveCards';
-import LabelBadge from 'components/LabelBadge';
-import Navigation from 'components/navigation/Navigation';
+import DriveCards from 'components/Models/cards/DriveCards';
+import LabelBadge from 'components/Models/LabelBadge';
+import Navigation from 'components/Pages/navigation/Navigation';
const Dashboard = (): JSX.Element => {
- const toast = useToast({ duration: 2000, isClosable: true });
- const { user } = useUserContext();
- const { setConfig } = useConfigContext();
- const { colorMode, toggleColorMode } = useColorMode();
+ const toast = useToast({duration: 2000, isClosable: true});
+ const {user} = useUserContext();
+ const {setConfig} = useConfigContext();
+ const {colorMode, toggleColorMode} = useColorMode();
- const { path, folders, files, setFiles, setFolders, setContacts, setPrograms, setSharedFiles, setSharedPrograms } =
- useDriveContext();
+ const {path, folders, files, setFiles, setFolders, setContacts, setPrograms, setSharedFiles, setSharedPrograms} =
+ useDriveContext();
- useEffect(() => {
- (async () => {
- if (user) {
- await loadContact();
- await loadUserContents();
- }
- })();
- }, []);
+ useEffect(() => {
+ (async () => {
+ if (user) {
+ await loadContact();
+ await loadUserContents();
+ }
+ })();
+ }, []);
- const loadContact = async () => {
- const load = await user.fullContact.contact.load();
+ const loadContact = async () => {
+ const load = await user.fullContact.contact.load();
- toast({ title: load.message, status: load.success ? 'success' : 'error' });
- setContacts(user.fullContact.contact.contacts);
- };
+ toast({title: load.message, status: load.success ? 'success' : 'error'});
+ setContacts(user.fullContact.contact.contacts);
+ };
- const loadUserContents = async () => {
- const loadShared = await user.drive.loadShared(user.fullContact.contact.contacts);
- toast({ title: loadShared.message, status: loadShared.success ? 'success' : 'error' });
- setFiles(user.drive.files);
- setFolders(user.drive.folders);
- setSharedFiles(user.drive.sharedFiles);
- setSharedPrograms(user.drive.sharedPrograms);
+ const loadUserContents = async () => {
+ const loadShared = await user.drive.loadShared(user.fullContact.contact.contacts);
+ toast({title: loadShared.message, status: loadShared.success ? 'success' : 'error'});
+ setFiles(user.drive.files);
+ setFolders(user.drive.folders);
+ setSharedFiles(user.drive.sharedFiles);
+ setSharedPrograms(user.drive.sharedPrograms);
- const loadedPrograms = await user.fullContact.computing.load();
- toast({ title: loadedPrograms.message, status: loadedPrograms.success ? 'success' : 'error' });
- setPrograms(user.fullContact.computing.programs);
+ const loadedPrograms = await user.fullContact.computing.load();
+ toast({title: loadedPrograms.message, status: loadedPrograms.success ? 'success' : 'error'});
+ setPrograms(user.fullContact.computing.programs);
- const loadedConfig = await user.loadConfig();
- setConfig(user.config);
- if (user.config?.theme.value === 'white' && colorMode !== 'light') toggleColorMode();
- if (user.config?.theme.value === 'gray.800' && colorMode !== 'dark') toggleColorMode();
- toast({ title: loadedConfig.message, status: loadedConfig.success ? 'success' : 'error' });
- };
+ const loadedConfig = await user.loadConfig();
+ setConfig(user.config);
+ if (user.config?.theme.value === 'white' && colorMode !== 'light') toggleColorMode();
+ if (user.config?.theme.value === 'gray.800' && colorMode !== 'dark') toggleColorMode();
+ toast({title: loadedConfig.message, status: loadedConfig.success ? 'success' : 'error'});
+ };
- return (
-
-
-
- elem.path === path && !elem.deletedAt)}
- folders={folders.filter((elem) => elem.path === path)}
- />
-
-
- );
+ return (
+
+
+
+ elem.path === path && !elem.deletedAt)}
+ folders={folders.filter((elem) => elem.path === path)}
+ />
+
+
+ );
};
export default Dashboard;
diff --git a/pages/drive/programs.tsx b/pages/drive/programs.tsx
index c85ac62e..cd9a9623 100644
--- a/pages/drive/programs.tsx
+++ b/pages/drive/programs.tsx
@@ -1,22 +1,22 @@
-import { VStack } from '@chakra-ui/react';
+import {VStack} from '@chakra-ui/react';
-import DriveCards from 'components/cards/DriveCards';
-import LabelBadge from 'components/LabelBadge';
-import Navigation from 'components/navigation/Navigation';
+import DriveCards from 'components/Models/cards/DriveCards';
+import LabelBadge from 'components/Models/LabelBadge';
+import Navigation from 'components/Pages/navigation/Navigation';
-import { useDriveContext } from 'contexts/drive';
+import {useDriveContext} from 'contexts/drive';
const Programs = (): JSX.Element => {
- const { programs } = useDriveContext();
+ const {programs} = useDriveContext();
- return (
-
-
-
-
-
-
- );
+ return (
+
+
+
+
+
+
+ );
};
export default Programs;
diff --git a/pages/drive/shared.tsx b/pages/drive/shared.tsx
index 3ef2e915..89a70f69 100644
--- a/pages/drive/shared.tsx
+++ b/pages/drive/shared.tsx
@@ -1,23 +1,23 @@
-import { VStack } from '@chakra-ui/react';
+import {VStack} from '@chakra-ui/react';
-import DriveCards from 'components/cards/DriveCards';
-import LabelBadge from 'components/LabelBadge';
-import Navigation from 'components/navigation/Navigation';
+import DriveCards from 'components/Models/cards/DriveCards';
+import LabelBadge from 'components/Models/LabelBadge';
+import Navigation from 'components/Pages/navigation/Navigation';
-import { useDriveContext } from 'contexts/drive';
+import {useDriveContext} from 'contexts/drive';
const Shared = (): JSX.Element => {
- const { sharedFiles } = useDriveContext();
- const { sharedPrograms } = useDriveContext();
+ const {sharedFiles} = useDriveContext();
+ const {sharedPrograms} = useDriveContext();
- return (
-
-
-
- !elem.deletedAt)} programs={sharedPrograms} />
-
-
- );
+ return (
+
+
+
+ !elem.deletedAt)} programs={sharedPrograms}/>
+
+
+ );
};
export default Shared;
diff --git a/pages/drive/trash.tsx b/pages/drive/trash.tsx
index 1dbc0e3b..37f4d72b 100644
--- a/pages/drive/trash.tsx
+++ b/pages/drive/trash.tsx
@@ -1,29 +1,29 @@
-import { HStack, VStack } from '@chakra-ui/react';
+import {HStack, VStack} from '@chakra-ui/react';
-import DriveCards from 'components/cards/DriveCards';
+import DriveCards from 'components/Models/cards/DriveCards';
import DeleteBin from 'components/file/DeleteBin';
-import LabelBadge from 'components/LabelBadge';
-import Navigation from 'components/navigation/Navigation';
+import LabelBadge from 'components/Models/LabelBadge';
+import Navigation from 'components/Pages/navigation/Navigation';
-import { useDriveContext } from 'contexts/drive';
+import {useDriveContext} from 'contexts/drive';
const Trash = (): JSX.Element => {
- const { path, files, folders, sharedFiles } = useDriveContext();
+ const {path, files, folders, sharedFiles} = useDriveContext();
- const deletedFiles = files.filter((elem) => elem.path === path && elem.deletedAt !== null);
- const deletedFolders = folders.filter((elem) => elem.path === path);
+ const deletedFiles = files.filter((elem) => elem.path === path && elem.deletedAt !== null);
+ const deletedFolders = folders.filter((elem) => elem.path === path);
- return (
-
-
-
-
-
-
-
-
-
- );
+ return (
+
+
+
+
+
+
+
+
+
+ );
};
export default Trash;
diff --git a/pages/index.tsx b/pages/index.tsx
index daf8bd32..fc113281 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -1,23 +1,23 @@
-import { VStack } from '@chakra-ui/react';
+import {VStack} from '@chakra-ui/react';
-import FeaturesSection from 'components/landingPage/FeaturesSection';
-import Footer from 'components/landingPage/Footer';
-import HeadingSection from 'components/landingPage/HeadingSection';
-import NavBar from 'components/landingPage/NavBar';
-import PartnersSection from 'components/landingPage/PartnersSection';
-import ServicesSection from 'components/landingPage/ServicesSection';
+import FeaturesSection from 'components/Pages/landingPage/FeaturesSection';
+import Footer from 'components/Pages/landingPage/Footer';
+import HeadingSection from 'components/Pages/landingPage/HeadingSection';
+import NavBar from 'components/Pages/landingPage/NavBar';
+import PartnersSection from 'components/Pages/landingPage/PartnersSection';
+import ServicesSection from 'components/Pages/landingPage/ServicesSection';
const Home = (): JSX.Element => (
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
);
export default Home;
diff --git a/pages/login.tsx b/pages/login.tsx
index e7123e5e..398e7a53 100644
--- a/pages/login.tsx
+++ b/pages/login.tsx
@@ -1,118 +1,118 @@
-import { Text, Textarea, useColorModeValue, useToast, VStack } from '@chakra-ui/react';
+import {Text, Textarea, useColorModeValue, useToast, VStack} from '@chakra-ui/react';
import Link from 'next/link';
-import { useRouter } from 'next/router';
-import { useState } from 'react';
+import {useRouter} from 'next/router';
+import {useState} from 'react';
-import { useAuthContext } from 'contexts/auth';
-import { useConfigContext } from 'contexts/config';
-import { useUserContext } from 'contexts/user';
+import {useAuthContext} from 'contexts/auth';
+import {useConfigContext} from 'contexts/config';
+import {useUserContext} from 'contexts/user';
-import AuthPage from 'components/AuthPage';
-import Button from 'components/Button';
+import AuthPage from 'components/Pages/AuthPage';
+import Button from 'components/Models/Button';
-import { ResponseType } from 'types/types';
+import {ResponseType} from 'types/types';
-import { textColorMode } from 'config/colorMode';
+import {textColorMode} from 'config/colorMode';
import colors from 'theme/foundations/colors';
const Login = (): JSX.Element => {
- const auth = useAuthContext();
- const { setUser } = useUserContext();
- const router = useRouter();
- const { config } = useConfigContext();
+ const auth = useAuthContext();
+ const {setUser} = useUserContext();
+ const router = useRouter();
+ const {config} = useConfigContext();
- const [mnemonics, setMnemonics] = useState('');
- const [isLoadingCredentials, setIsLoadingCredentials] = useState(false);
+ const [mnemonics, setMnemonics] = useState('');
+ const [isLoadingCredentials, setIsLoadingCredentials] = useState(false);
- const toast = useToast({ duration: 2000, isClosable: true });
- const textColor = useColorModeValue(textColorMode.light, textColorMode.dark);
+ const toast = useToast({duration: 2000, isClosable: true});
+ const textColor = useColorModeValue(textColorMode.light, textColorMode.dark);
- const loginWithCredentials = async (): Promise => {
- setIsLoadingCredentials(true);
- const login = await auth.loginWithCredentials(mnemonics, config);
- setIsLoadingCredentials(false);
+ const loginWithCredentials = async (): Promise => {
+ setIsLoadingCredentials(true);
+ const login = await auth.loginWithCredentials(mnemonics, config);
+ setIsLoadingCredentials(false);
- if (!login.user) return { success: false, message: login.message };
- setUser(login.user);
- await router.push('/drive');
- await login.user.drive.autoDelete();
- return { success: true, message: login.message };
- };
+ if (!login.user) return {success: false, message: login.message};
+ setUser(login.user);
+ await router.push('/drive');
+ await login.user.drive.autoDelete();
+ return {success: true, message: login.message};
+ };
- const loginWithAProvider = async (): Promise => {
- setIsLoadingCredentials(true);
- const login = await auth.loginWithProvider(config);
- setIsLoadingCredentials(false);
+ const loginWithAProvider = async (): Promise => {
+ setIsLoadingCredentials(true);
+ const login = await auth.loginWithProvider(config);
+ setIsLoadingCredentials(false);
- if (!login.user) return { success: false, message: login.message };
- setUser(login.user);
- await router.push('/drive');
- await login.user.drive.autoDelete();
- return { success: true, message: login.message };
- };
+ if (!login.user) return {success: false, message: login.message};
+ setUser(login.user);
+ await router.push('/drive');
+ await login.user.drive.autoDelete();
+ return {success: true, message: login.message};
+ };
- return (
-
-
-
-
-
-
-
-
- Coming soon...
-
-
-
-
-
- You don't have an account?
-
-
-
-
-
-
-
- );
+ return (
+
+
+
+
+
+
+
+
+ Coming soon...
+
+
+
+
+
+ You don't have an account?
+
+
+
+
+
+
+
+ );
};
export default Login;
diff --git a/pages/signup.tsx b/pages/signup.tsx
index a2a9c60f..0bac69ff 100644
--- a/pages/signup.tsx
+++ b/pages/signup.tsx
@@ -1,109 +1,109 @@
-import { useRouter } from 'next/router';
-import { useState } from 'react';
+import {useRouter} from 'next/router';
+import {useState} from 'react';
-import { Text, Textarea, useColorModeValue, useToast, VStack } from '@chakra-ui/react';
+import {Text, Textarea, useColorModeValue, useToast, VStack} from '@chakra-ui/react';
-import { useAuthContext } from 'contexts/auth';
-import { useConfigContext } from 'contexts/config';
-import { useUserContext } from 'contexts/user';
+import {useAuthContext} from 'contexts/auth';
+import {useConfigContext} from 'contexts/config';
+import {useUserContext} from 'contexts/user';
-import AuthPage from 'components/AuthPage';
-import Button from 'components/Button';
+import AuthPage from 'components/Pages/AuthPage';
+import Button from 'components/Models/Button';
-import { ResponseType } from 'types/types';
+import {ResponseType} from 'types/types';
-import { textColorMode } from 'config/colorMode';
+import {textColorMode} from 'config/colorMode';
import colors from 'theme/foundations/colors';
const Signup = (): JSX.Element => {
- const auth = useAuthContext();
- const { setUser } = useUserContext();
- const { setConfig } = useConfigContext();
- const router = useRouter();
+ const auth = useAuthContext();
+ const {setUser} = useUserContext();
+ const {setConfig} = useConfigContext();
+ const router = useRouter();
- const [isLoadingCredentials, setIsLoadingCredentials] = useState(false);
- const [mnemonics, setMnemonics] = useState('');
+ const [isLoadingCredentials, setIsLoadingCredentials] = useState(false);
+ const [mnemonics, setMnemonics] = useState('');
- const toast = useToast({ duration: 2000, isClosable: true });
- const textColor = useColorModeValue(textColorMode.light, textColorMode.dark);
+ const toast = useToast({duration: 2000, isClosable: true});
+ const textColor = useColorModeValue(textColorMode.light, textColorMode.dark);
- const signupWithMnemonics = async (): Promise => {
- setIsLoadingCredentials(true);
+ const signupWithMnemonics = async (): Promise => {
+ setIsLoadingCredentials(true);
- const signup = await auth.signup();
+ const signup = await auth.signup();
- setIsLoadingCredentials(false);
- if (!signup.user || !signup.user.account) return { success: false, message: signup.message };
- if (!signup.mnemonic) return { success: false, message: 'We could not generate your mnemonics. Please try again.' };
- setMnemonics(signup.mnemonic);
- setUser(signup.user);
- setConfig(signup.user.config);
- return { success: true, message: signup.message };
- };
+ setIsLoadingCredentials(false);
+ if (!signup.user || !signup.user.account) return {success: false, message: signup.message};
+ if (!signup.mnemonic) return {success: false, message: 'We could not generate your mnemonics. Please try again.'};
+ setMnemonics(signup.mnemonic);
+ setUser(signup.user);
+ setConfig(signup.user.config);
+ return {success: true, message: signup.message};
+ };
- const onClick = () => {
- if (!mnemonics)
- signupWithMnemonics().then((res) => toast({ title: res.message, status: res.success ? 'success' : 'error' }));
- else {
- navigator.clipboard.writeText(mnemonics);
- toast({ title: 'Copy to clipboard !', status: 'success' });
- }
- };
+ const onClick = () => {
+ if (!mnemonics)
+ signupWithMnemonics().then((res) => toast({title: res.message, status: res.success ? 'success' : 'error'}));
+ else {
+ navigator.clipboard.writeText(mnemonics);
+ toast({title: 'Copy to clipboard !', status: 'success'});
+ }
+ };
- return (
-
-
-
-
-
-
-
+ return (
+
+
+
+
+
+
+
-
-
-
-
- Already got an account?
-
-
-
-
-
-
-
- );
+
+
+
+
+ Already got an account?
+
+
+
+
+
+
+
+ );
};
export default Signup;
diff --git a/src/components/Button.tsx b/src/components/Models/Button.tsx
similarity index 100%
rename from src/components/Button.tsx
rename to src/components/Models/Button.tsx
diff --git a/src/components/LabelBadge.tsx b/src/components/Models/LabelBadge.tsx
similarity index 100%
rename from src/components/LabelBadge.tsx
rename to src/components/Models/LabelBadge.tsx
diff --git a/src/components/Modal.tsx b/src/components/Models/Modal.tsx
similarity index 100%
rename from src/components/Modal.tsx
rename to src/components/Models/Modal.tsx
diff --git a/src/components/Tooltip.tsx b/src/components/Models/Tooltip.tsx
similarity index 100%
rename from src/components/Tooltip.tsx
rename to src/components/Models/Tooltip.tsx
diff --git a/src/components/cards/Card.tsx b/src/components/Models/cards/Card.tsx
similarity index 100%
rename from src/components/cards/Card.tsx
rename to src/components/Models/cards/Card.tsx
diff --git a/src/components/Models/cards/ContactCard.tsx b/src/components/Models/cards/ContactCard.tsx
new file mode 100644
index 00000000..0e98ad7a
--- /dev/null
+++ b/src/components/Models/cards/ContactCard.tsx
@@ -0,0 +1,66 @@
+import {Box, HStack, Text, useBreakpointValue, useColorModeValue, useDisclosure} from '@chakra-ui/react';
+import {useState} from 'react';
+import {BsFillFilePersonFill} from 'react-icons/bs';
+
+import {IPCContact} from 'types/types';
+
+import useToggle from 'hooks/useToggle';
+
+import formatDate from 'utils/formatDate';
+
+import {ContactOptionsDrawer, ContactOptionsPopover} from 'components/Pages/dashboardPage/ContactOptions';
+
+import {textColorMode} from 'config/colorMode';
+
+import Card from './Card';
+
+const ContactCard = ({contact}: { contact: IPCContact }): JSX.Element => {
+ const {isOpen: isOpenFile, onOpen: onOpenFile, onClose: onCloseFile} = useDisclosure();
+ const {toggle: popoverOpeningToggleFile, toggleHandler: popoverOpeningHandlerFile} = useToggle();
+
+ const [clickPosition, setClickPosition] = useState({x: 0, y: 0});
+
+ const isDrawer = useBreakpointValue({base: true, sm: false}) || false;
+ const textColor = useColorModeValue(textColorMode.light, textColorMode.dark);
+
+ return (
+ <>
+ {
+ e.preventDefault();
+ if (!isDrawer) {
+ setClickPosition({x: e.clientX, y: e.clientY});
+ popoverOpeningHandlerFile();
+ } else onOpenFile();
+ }}
+ >
+
+
+
+
+ {contact.name} - {contact.address}
+
+
+
+ {formatDate(contact.createdAt)}
+
+
+
+
+ {isDrawer ? (
+
+ ) : (
+
+ )}
+
+ >
+ );
+};
+
+export default ContactCard;
diff --git a/src/components/cards/DriveCards.tsx b/src/components/Models/cards/DriveCards.tsx
similarity index 100%
rename from src/components/cards/DriveCards.tsx
rename to src/components/Models/cards/DriveCards.tsx
diff --git a/src/components/Models/cards/FileCard.tsx b/src/components/Models/cards/FileCard.tsx
new file mode 100644
index 00000000..c1c97b0a
--- /dev/null
+++ b/src/components/Models/cards/FileCard.tsx
@@ -0,0 +1,87 @@
+import {Box, HStack, Text, useBreakpointValue, useColorModeValue, useDisclosure} from '@chakra-ui/react';
+import {useState} from 'react';
+import {BsFileEarmarkFill} from 'react-icons/bs';
+
+import {IPCFile} from 'types/types';
+
+import useToggle from 'hooks/useToggle';
+
+import {useDriveContext} from 'contexts/drive';
+import {useUserContext} from 'contexts/user';
+
+import formatDate from 'utils/formatDate';
+import formatFileSize from 'utils/formatFileSize';
+
+import {FileOptionsDrawer, FileOptionsPopover} from 'components/Pages/dashboardPage/FileOptions';
+
+import {textColorMode} from 'config/colorMode';
+
+import Card from './Card';
+
+const FileCard = ({file}: { file: IPCFile }): JSX.Element => {
+ const {files} = useDriveContext();
+ const {
+ user: {
+ fullContact: {
+ contact: {username},
+ },
+ },
+ } = useUserContext();
+
+ const {isOpen: isOpenFile, onOpen: onOpenFile, onClose: onCloseFile} = useDisclosure();
+ const {toggle: popoverOpeningToggleFile, toggleHandler: popoverOpeningHandlerFile} = useToggle();
+
+ const [clickPosition, setClickPosition] = useState({x: 0, y: 0});
+
+ const isDrawer = useBreakpointValue({base: true, sm: false}) || false;
+ const textColor = useColorModeValue(textColorMode.light, textColorMode.dark);
+ return (
+ <>
+ {
+ e.preventDefault();
+ if (!isDrawer) {
+ setClickPosition({x: e.clientX, y: e.clientY});
+ popoverOpeningHandlerFile();
+ } else onOpenFile();
+ }}
+ >
+
+
+
+
+ {file.name}
+
+
+
+
+ by{' '}
+
+ {username}
+
+
+ {formatDate(file.createdAt)}
+ {formatFileSize(file.size)}
+
+
+
+
+ {isDrawer ? (
+
+ ) : (
+
+ )}
+
+ >
+ );
+};
+
+export default FileCard;
diff --git a/src/components/Models/cards/FolderCard.tsx b/src/components/Models/cards/FolderCard.tsx
new file mode 100644
index 00000000..ac6dfca3
--- /dev/null
+++ b/src/components/Models/cards/FolderCard.tsx
@@ -0,0 +1,89 @@
+import {Box, HStack, Text, useBreakpointValue, useColorModeValue, useDisclosure} from '@chakra-ui/react';
+import {useState} from 'react';
+import {FaFolder} from 'react-icons/fa';
+
+import {useDriveContext} from 'contexts/drive';
+import {useUserContext} from 'contexts/user';
+import useToggle from 'hooks/useToggle';
+
+import {FolderOptionsDrawer, FolderOptionsPopover} from 'components/Pages/dashboardPage/FolderOptions';
+
+import {textColorMode} from 'config/colorMode';
+
+import {IPCFolder} from 'types/types';
+
+import formatDate from 'utils/formatDate';
+
+import Card from './Card';
+
+const FolderCard = ({folder}: { folder: IPCFolder }): JSX.Element => {
+ const {path, setPath} = useDriveContext();
+ const {
+ user: {
+ fullContact: {
+ contact: {username},
+ },
+ },
+ } = useUserContext();
+
+ const isDrawer = useBreakpointValue({base: true, sm: false}) || false;
+
+ const {toggle: popoverOpeningToggleFolder, toggleHandler: popoverOpeningHandlerFolder} = useToggle();
+ const {isOpen: isOpenFolder, onOpen: onOpenFolder, onClose: onCloseFolder} = useDisclosure();
+
+ const [clickPosition, setClickPosition] = useState({x: 0, y: 0});
+ const textColor = useColorModeValue(textColorMode.light, textColorMode.dark);
+
+ return (
+ <>
+ {
+ e.preventDefault();
+ if (!isDrawer) {
+ setClickPosition({x: e.clientX, y: e.clientY});
+ popoverOpeningHandlerFolder();
+ } else onOpenFolder();
+ }}
+ onClick={() => {
+ setPath(`${path + folder.name}/`);
+ }}
+ className="ipc-folder-popover-button"
+ w="100%"
+ cursor="pointer"
+ >
+
+
+
+
+ {folder.name}
+
+
+
+
+ by{' '}
+
+ {username}
+
+
+ {formatDate(folder.createdAt)}
+
+
+
+
+ {isDrawer ? (
+
+ ) : (
+
+ )}
+
+ >
+ );
+};
+
+export default FolderCard;
diff --git a/src/components/cards/PathCard.tsx b/src/components/Models/cards/PathCard.tsx
similarity index 100%
rename from src/components/cards/PathCard.tsx
rename to src/components/Models/cards/PathCard.tsx
diff --git a/src/components/Models/cards/ProgramCard.tsx b/src/components/Models/cards/ProgramCard.tsx
new file mode 100644
index 00000000..eae78977
--- /dev/null
+++ b/src/components/Models/cards/ProgramCard.tsx
@@ -0,0 +1,82 @@
+import {Box, HStack, Text, useBreakpointValue, useColorModeValue, useDisclosure} from '@chakra-ui/react';
+import {useState} from 'react';
+import {BsFileEarmarkCodeFill} from 'react-icons/bs';
+
+import {useUserContext} from 'contexts/user';
+
+import useToggle from 'hooks/useToggle';
+
+import formatDate from 'utils/formatDate';
+import formatFileSize from 'utils/formatFileSize';
+
+import {ProgramOptionsDrawer, ProgramOptionsPopover} from 'components/Pages/dashboardPage/ProgramOptions';
+import {textColorMode} from 'config/colorMode';
+
+import {IPCProgram} from 'types/types';
+
+import Card from './Card';
+
+const ProgramCard = ({program}: { program: IPCProgram }): JSX.Element => {
+ const {
+ user: {
+ fullContact: {
+ contact: {username},
+ },
+ },
+ } = useUserContext();
+ const {isOpen: isOpenFile, onOpen: onOpenFile, onClose: onCloseFile} = useDisclosure();
+ const {toggle: popoverOpeningToggleFile, toggleHandler: popoverOpeningHandlerFile} = useToggle();
+
+ const [clickPosition, setClickPosition] = useState({x: 0, y: 0});
+
+ const isDrawer = useBreakpointValue({base: true, sm: false}) || false;
+ const textColor = useColorModeValue(textColorMode.light, textColorMode.dark);
+
+ return (
+ <>
+ {
+ e.preventDefault();
+ if (!isDrawer) {
+ setClickPosition({x: e.clientX, y: e.clientY});
+ popoverOpeningHandlerFile();
+ } else onOpenFile();
+ }}
+ >
+
+
+
+
+ {program.name} - {program.entrypoint}
+
+
+
+
+ by{' '}
+
+ {username}
+
+
+ {formatDate(program.createdAt)}
+ {formatFileSize(program.size)}
+
+
+
+
+ {isDrawer ? (
+
+ ) : (
+
+ )}
+
+ >
+ );
+};
+
+export default ProgramCard;
diff --git a/src/components/AuthPage.tsx b/src/components/Pages/AuthPage.tsx
similarity index 100%
rename from src/components/AuthPage.tsx
rename to src/components/Pages/AuthPage.tsx
diff --git a/src/components/dashboardPage/ContactOptions.tsx b/src/components/Pages/dashboardPage/ContactOptions.tsx
similarity index 100%
rename from src/components/dashboardPage/ContactOptions.tsx
rename to src/components/Pages/dashboardPage/ContactOptions.tsx
diff --git a/src/components/dashboardPage/FileOptions.tsx b/src/components/Pages/dashboardPage/FileOptions.tsx
similarity index 100%
rename from src/components/dashboardPage/FileOptions.tsx
rename to src/components/Pages/dashboardPage/FileOptions.tsx
diff --git a/src/components/dashboardPage/FolderOptions.tsx b/src/components/Pages/dashboardPage/FolderOptions.tsx
similarity index 100%
rename from src/components/dashboardPage/FolderOptions.tsx
rename to src/components/Pages/dashboardPage/FolderOptions.tsx
diff --git a/src/components/dashboardPage/ProgramOptions.tsx b/src/components/Pages/dashboardPage/ProgramOptions.tsx
similarity index 100%
rename from src/components/dashboardPage/ProgramOptions.tsx
rename to src/components/Pages/dashboardPage/ProgramOptions.tsx
diff --git a/src/components/Pages/landingPage/FeaturesSection.tsx b/src/components/Pages/landingPage/FeaturesSection.tsx
new file mode 100644
index 00000000..6697375f
--- /dev/null
+++ b/src/components/Pages/landingPage/FeaturesSection.tsx
@@ -0,0 +1,111 @@
+import {Box, HStack, Img, Stack, Text, useBreakpointValue, useColorModeValue, VStack} from '@chakra-ui/react';
+import {useRouter} from 'next/router';
+
+import {IoRocketSharp} from 'react-icons/io5';
+
+import Button from 'components/Models/Button';
+
+import colors from 'theme/foundations/colors';
+import {textColorMode} from 'config/colorMode';
+
+const FeatureCard = ({title, icon, id}: { title: string; icon: string; id: string }): JSX.Element => {
+ const isMobile: boolean = useBreakpointValue({base: true, sm: false}) || false;
+
+ return (
+
+
+ {title}
+
+ );
+};
+
+const FeaturesSection = (): JSX.Element => {
+ const router = useRouter();
+ const isMobile: boolean = useBreakpointValue({base: true, lg: false}) || false;
+
+ const textColor = useColorModeValue(textColorMode.light, textColorMode.dark);
+
+ const features: { icon: string; title: string; id: string }[] = [
+ {
+ icon: '/assets/icons/upload-files-logo.svg',
+ title: 'Upload & Download Files',
+ id: 'ipc-landing-feature-upload-files',
+ },
+ {
+ icon: '/assets/icons/folder-logo.svg',
+ title: 'Folder Management',
+ id: 'ipc-landing-folder-management',
+ },
+ {
+ icon: '/assets/icons/share-logo.svg',
+ title: 'Share Files',
+ id: 'ipc-landing-share-files',
+ },
+ {
+ icon: '/assets/icons/code-logo.svg',
+ title: 'Upload & Run Programs',
+ id: 'ipc-landing-programs',
+ },
+ {
+ icon: '/assets/icons/contact-logo.svg',
+ title: 'Contact Management',
+ id: 'ipc-landing-contact-management',
+ },
+ ];
+
+ return (
+
+
+
+ Our{' '}
+
+ Features
+
+
+ {features.map((feature) => (
+
+ ))}
+
+
+
+
+ Are you ready?
+
+
+
+ {!isMobile && (
+
+
+
+ )}
+
+ );
+};
+
+export default FeaturesSection;
diff --git a/src/components/landingPage/Footer.tsx b/src/components/Pages/landingPage/Footer.tsx
similarity index 100%
rename from src/components/landingPage/Footer.tsx
rename to src/components/Pages/landingPage/Footer.tsx
diff --git a/src/components/Pages/landingPage/HeadingSection.tsx b/src/components/Pages/landingPage/HeadingSection.tsx
new file mode 100644
index 00000000..d5416f43
--- /dev/null
+++ b/src/components/Pages/landingPage/HeadingSection.tsx
@@ -0,0 +1,77 @@
+import {Box, Img, Text, useBreakpointValue, useColorModeValue, VStack} from '@chakra-ui/react';
+import {useRouter} from 'next/router';
+
+import {IoRocketSharp} from 'react-icons/io5';
+
+import Button from 'components/Models/Button';
+
+import colors from 'theme/foundations/colors';
+import {textColorMode} from 'config/colorMode';
+
+const HeadingSection = (): JSX.Element => {
+ const router = useRouter();
+ const isMobile: boolean = useBreakpointValue({base: true, lg: false}) || false;
+
+ const textColor = useColorModeValue(textColorMode.light, textColorMode.dark);
+
+ return (
+
+
+
+ The first distributed cloud{' '}
+
+ unsealing
+ {' '}
+ your data.
+
+
+ Build on top of Aleph, the next generation network of{' '}
+
+ distributed
+ {' '}
+ big data applications.
+
+
+
+ {!isMobile && (
+ <>
+
+
+
+
+
+
+ >
+ )}
+
+ );
+};
+
+export default HeadingSection;
diff --git a/src/components/Pages/landingPage/NavBar.tsx b/src/components/Pages/landingPage/NavBar.tsx
new file mode 100644
index 00000000..72b2d3a2
--- /dev/null
+++ b/src/components/Pages/landingPage/NavBar.tsx
@@ -0,0 +1,43 @@
+import {HStack, Text, useBreakpointValue, VStack} from '@chakra-ui/react';
+import {useRouter} from 'next/router';
+
+import {IoRocketSharp} from 'react-icons/io5';
+
+import Button from 'components/Models/Button';
+
+const NavBar = (): JSX.Element => {
+ const router = useRouter();
+ const buttonDisplayable: boolean = useBreakpointValue({base: false, lg: true}) || false;
+
+ return (
+ <>
+ {buttonDisplayable ? (
+
+
+ Inter Planetary Cloud
+
+
+
+ ) : (
+
+
+ Inter Planetary Cloud
+
+
+ )}
+ >
+ );
+};
+
+export default NavBar;
diff --git a/src/components/landingPage/PartnersSection.tsx b/src/components/Pages/landingPage/PartnersSection.tsx
similarity index 100%
rename from src/components/landingPage/PartnersSection.tsx
rename to src/components/Pages/landingPage/PartnersSection.tsx
diff --git a/src/components/landingPage/ServicesSection.tsx b/src/components/Pages/landingPage/ServicesSection.tsx
similarity index 100%
rename from src/components/landingPage/ServicesSection.tsx
rename to src/components/Pages/landingPage/ServicesSection.tsx
diff --git a/src/components/navigation/NavbarItem.tsx b/src/components/Pages/navigation/NavbarItem.tsx
similarity index 100%
rename from src/components/navigation/NavbarItem.tsx
rename to src/components/Pages/navigation/NavbarItem.tsx
diff --git a/src/components/navigation/Navigation.tsx b/src/components/Pages/navigation/Navigation.tsx
similarity index 100%
rename from src/components/navigation/Navigation.tsx
rename to src/components/Pages/navigation/Navigation.tsx
diff --git a/src/components/Pages/navigation/ResponsiveBar.tsx b/src/components/Pages/navigation/ResponsiveBar.tsx
new file mode 100644
index 00000000..6726f3f8
--- /dev/null
+++ b/src/components/Pages/navigation/ResponsiveBar.tsx
@@ -0,0 +1,94 @@
+import {HamburgerIcon} from '@chakra-ui/icons';
+import {
+ Box,
+ Button,
+ Drawer,
+ DrawerCloseButton,
+ DrawerContent,
+ DrawerOverlay,
+ HStack,
+ Icon,
+ Text,
+ useBreakpointValue,
+ useColorMode,
+ useColorModeValue,
+ useDisclosure,
+} from '@chakra-ui/react';
+import {useRouter} from 'next/router';
+
+import Sidebar from 'components/Pages/navigation/SideBar';
+
+import colors from 'theme/foundations/colors';
+
+import {useUserContext} from 'contexts/user';
+
+import ProfileBadge from 'components/profile/ProfileBadge';
+import {bgColorMode, textColorMode} from 'config/colorMode';
+
+type BarProps = {
+ isOpen: boolean;
+ onClose: () => void;
+};
+
+export const BarWithDrawer = ({isOpen, onClose}: BarProps): JSX.Element => {
+ const bgColor = useColorModeValue(bgColorMode.light, bgColorMode.dark);
+
+ return (
+
+
+
+
+
+
+
+ );
+};
+
+export const ResponsiveBar = (): JSX.Element => {
+ const {user} = useUserContext();
+
+ const router = useRouter();
+ const bgColor = useColorModeValue(bgColorMode.light, bgColorMode.dark);
+ const textColor = useColorModeValue(textColorMode.light, textColorMode.dark);
+ const {colorMode} = useColorMode();
+ const isDrawerNeeded: boolean = useBreakpointValue({base: true, lg: false}) || false;
+ const {isOpen, onOpen, onClose} = useDisclosure();
+
+ return (
+
+
+
+ {isDrawerNeeded && (
+
+ )}
+
+
+
+
+ {!isDrawerNeeded && (
+
+ )}
+
+ {!isDrawerNeeded ? : }
+
+ );
+};
diff --git a/src/components/Pages/navigation/SideBar.tsx b/src/components/Pages/navigation/SideBar.tsx
new file mode 100644
index 00000000..7f270960
--- /dev/null
+++ b/src/components/Pages/navigation/SideBar.tsx
@@ -0,0 +1,128 @@
+import {Text, useBreakpointValue, useColorMode, useColorModeValue, VStack} from '@chakra-ui/react';
+import {BsCodeSlash, BsPeople, BsPerson, BsPlusLg, BsShareFill} from 'react-icons/bs';
+import {IoTrashOutline} from 'react-icons/io5';
+import {RiHardDrive2Line} from 'react-icons/ri';
+
+import colors from 'theme/foundations/colors';
+
+import Button from 'components/Models/Button';
+import DeployGithub from 'components/computing/github/DeployGithub';
+import DeployProgram from 'components/computing/programs/DeployProgram';
+import UploadFile from 'components/file/UploadFile';
+import CreateFolder from 'components/folder/CreateFolder';
+
+import {useUserContext} from 'contexts/user';
+
+import useToggle from 'hooks/useToggle';
+
+import ProfileBadge from 'components/profile/ProfileBadge';
+import {bgColorMode} from 'config/colorMode';
+import {NavbarType} from 'types/navbar';
+import NavbarItem from './NavbarItem';
+
+const SideBar = (): JSX.Element => {
+ const {user} = useUserContext();
+ const isDrawerNeeded: boolean = useBreakpointValue({base: true, lg: false}) || false;
+ const {toggle, toggleHandler} = useToggle();
+ const bgColor = useColorModeValue(bgColorMode.light, bgColorMode.dark);
+ const {colorMode} = useColorMode();
+
+ const tabs: NavbarType[] = [
+ {
+ label: 'My Drive',
+ url: '/drive',
+ icon: RiHardDrive2Line,
+ },
+ {
+ label: 'Shared with me',
+ url: '/drive/shared',
+ icon: BsShareFill,
+ },
+ {
+ label: 'My Programs',
+ url: '/drive/programs',
+ icon: BsCodeSlash,
+ },
+ {
+ label: 'Contacts',
+ url: '/drive/contacts',
+ icon: BsPeople,
+ },
+ {
+ label: 'Trash',
+ url: '/drive/trash',
+ icon: IoTrashOutline,
+ },
+ {
+ label: 'Account',
+ url: '/drive/account',
+ icon: BsPerson,
+ },
+ ];
+
+ return (
+
+
+
+
+ {isDrawerNeeded && (
+
+ )}
+
+
+ {toggle && (
+
+
+
+
+
+
+ )}
+
+
+
+ {tabs.map((item) => (
+
+ ))}
+
+ {isDrawerNeeded && (
+
+ )}
+
+
+ );
+};
+
+export default SideBar;
diff --git a/src/components/account/AccountCard.tsx b/src/components/account/AccountCard.tsx
index 49270bbd..c52efcdb 100644
--- a/src/components/account/AccountCard.tsx
+++ b/src/components/account/AccountCard.tsx
@@ -13,136 +13,136 @@ import {
WrapItem,
} from '@chakra-ui/react';
import Avatar from 'boring-avatars';
-import { ChangeEvent, useState } from 'react';
-import { BsClipboard } from 'react-icons/bs';
-import Card from 'components/cards/Card';
+import {ChangeEvent, useState} from 'react';
+import {BsClipboard} from 'react-icons/bs';
+import Card from 'components/Models/cards/Card';
-import { useUserContext } from 'contexts/user';
+import {useUserContext} from 'contexts/user';
-import { textColorMode } from 'config/colorMode';
+import {textColorMode} from 'config/colorMode';
import colors from 'theme/foundations/colors';
-import Modal from '../Modal';
+import Modal from '../Models/Modal';
const AccountCard = (): JSX.Element => {
- const { user } = useUserContext();
- const [isOpen, setIsOpen] = useState(false);
- const [input, setInput] = useState(user.fullContact.contact.username || '');
- const [isLoading, setIsLoading] = useState(false);
+ const {user} = useUserContext();
+ const [isOpen, setIsOpen] = useState(false);
+ const [input, setInput] = useState(user.fullContact.contact.username || '');
+ const [isLoading, setIsLoading] = useState(false);
- const toast = useToast({ duration: 2000, isClosable: true });
+ const toast = useToast({duration: 2000, isClosable: true});
- const changeName = async () => {
- setIsLoading(true);
- try {
- const config1 = await user.fullContact.manage.update(user.account.address, input);
- setIsOpen(false);
- toast({ title: config1.message, status: config1.success ? 'success' : 'error' });
- } catch (error) {
- toast({ title: 'Failed to change name', status: 'error' });
- console.error(error);
- }
- setIsLoading(false);
- };
+ const changeName = async () => {
+ setIsLoading(true);
+ try {
+ const config1 = await user.fullContact.manage.update(user.account.address, input);
+ setIsOpen(false);
+ toast({title: config1.message, status: config1.success ? 'success' : 'error'});
+ } catch (error) {
+ toast({title: 'Failed to change name', status: 'error'});
+ console.error(error);
+ }
+ setIsLoading(false);
+ };
- const textColor = useColorModeValue(textColorMode.light, textColorMode.dark);
+ const textColor = useColorModeValue(textColorMode.light, textColorMode.dark);
- return (
- <>
- setIsOpen(false)}
- title={'Configuration modfication'}
- CTA={
-
- }
- >
-
- ) => setInput(e.target.value)} />
-
-
-
-
-
-
-
-
-
-
- {user.fullContact.contact.username}
-
-
-
-
-
-
-
-
-
-
-
-
-
- My address:
- {' '}
- {user.account.address}
-
- navigator.clipboard.writeText(user.account.address || '')}
- />
-
-
-
-
- My public key:
- {' '}
- {user.account.publicKey}
-
- navigator.clipboard.writeText(user.account.publicKey || '')}
- />
-
-
-
-
-
-
- >
- );
+ return (
+ <>
+ setIsOpen(false)}
+ title={'Configuration modfication'}
+ CTA={
+
+ }
+ >
+
+ ) => setInput(e.target.value)}/>
+
+
+
+
+
+
+
+
+
+
+ {user.fullContact.contact.username}
+
+
+
+
+
+
+
+
+
+
+
+
+
+ My address:
+ {' '}
+ {user.account.address}
+
+ navigator.clipboard.writeText(user.account.address || '')}
+ />
+
+
+
+
+ My public key:
+ {' '}
+ {user.account.publicKey}
+
+ navigator.clipboard.writeText(user.account.publicKey || '')}
+ />
+
+
+
+
+
+
+ >
+ );
};
export default AccountCard;
diff --git a/src/components/account/ConfigCard.tsx b/src/components/account/ConfigCard.tsx
index ddca4dc1..23481700 100644
--- a/src/components/account/ConfigCard.tsx
+++ b/src/components/account/ConfigCard.tsx
@@ -10,103 +10,103 @@ import {
Wrap,
WrapItem,
} from '@chakra-ui/react';
-import { useState } from 'react';
+import {useState} from 'react';
-import Card from 'components/cards/Card';
+import Card from 'components/Models/cards/Card';
-import { useConfigContext } from 'contexts/config';
-import { useUserContext } from 'contexts/user';
+import {useConfigContext} from 'contexts/config';
+import {useUserContext} from 'contexts/user';
-import { textColorMode } from 'config/colorMode';
+import {textColorMode} from 'config/colorMode';
import ConfigInputModal from './ConfigInputModal';
import ConfigSelect from './ConfigSelect';
const ConfigCard = (): JSX.Element => {
- const { user } = useUserContext();
- const { setConfig } = useConfigContext();
- const toast = useToast();
- const textColor = useColorModeValue(textColorMode.light, textColorMode.dark);
+ const {user} = useUserContext();
+ const {setConfig} = useConfigContext();
+ const toast = useToast();
+ const textColor = useColorModeValue(textColorMode.light, textColorMode.dark);
- const { toggleColorMode } = useColorMode();
- const [isLoading, setIsLoading] = useState(false);
- const [modalType, setModalType] = useState(undefined);
+ const {toggleColorMode} = useColorMode();
+ const [isLoading, setIsLoading] = useState(false);
+ const [modalType, setModalType] = useState(undefined);
- const changeConfig = async (key: string, value: string) => {
- setIsLoading(true);
- try {
- const config1 = await user.fullContact.manage.updateConfig(key, value);
- setConfig({
- ...user.config,
- [key]: {
- ...user.config[key],
- value,
- },
- });
- if (key === 'theme') {
- toggleColorMode();
- }
- setModalType(undefined);
- toast({ title: config1.message, status: config1.success ? 'success' : 'error' });
- } catch (error) {
- toast({ title: `Failed to change ${key}`, status: 'error' });
- console.error(error);
- }
- setIsLoading(false);
- };
+ const changeConfig = async (key: string, value: string) => {
+ setIsLoading(true);
+ try {
+ const config1 = await user.fullContact.manage.updateConfig(key, value);
+ setConfig({
+ ...user.config,
+ [key]: {
+ ...user.config[key],
+ value,
+ },
+ });
+ if (key === 'theme') {
+ toggleColorMode();
+ }
+ setModalType(undefined);
+ toast({title: config1.message, status: config1.success ? 'success' : 'error'});
+ } catch (error) {
+ toast({title: `Failed to change ${key}`, status: 'error'});
+ console.error(error);
+ }
+ setIsLoading(false);
+ };
- return (
- <>
- setModalType(undefined)}
- onClick={changeConfig}
- />
-
-
-
-
-
-
-
- Configuration
-
-
+ return (
+ <>
+ setModalType(undefined)}
+ onClick={changeConfig}
+ />
+
+
+
+
+
+
+
+ Configuration
+
+
- {Object.keys(user.config).map((key) => {
- if (user.config[key].type === 'select')
- return (
-
- );
- return (
-
-
-
- {`${user.config[key].name}:`}
- {' '}
- {user.config[key].value}
-
-
-
- );
- })}
-
-
-
-
-
- >
- );
+ {Object.keys(user.config).map((key) => {
+ if (user.config[key].type === 'select')
+ return (
+
+ );
+ return (
+
+
+
+ {`${user.config[key].name}:`}
+ {' '}
+ {user.config[key].value}
+
+
+
+ );
+ })}
+
+
+
+
+
+ >
+ );
};
export default ConfigCard;
diff --git a/src/components/account/ConfigInputModal.tsx b/src/components/account/ConfigInputModal.tsx
index ea4e18c5..188b3558 100644
--- a/src/components/account/ConfigInputModal.tsx
+++ b/src/components/account/ConfigInputModal.tsx
@@ -1,59 +1,59 @@
-import { Input, VStack } from '@chakra-ui/react';
-import { ChangeEvent, useState } from 'react';
+import {Input, VStack} from '@chakra-ui/react';
+import {ChangeEvent, useState} from 'react';
-import Modal from 'components/Modal';
+import Modal from 'components/Models/Modal';
-import Button from 'components/Button';
-import { useUserContext } from '../../contexts/user';
+import Button from 'components/Models/Button';
+import {useUserContext} from '../../contexts/user';
const ConfigInputModal = ({
- isOpen,
- type,
- isLoading,
- onClose,
- onClick,
-}: {
- isOpen: boolean;
- type: string;
- isLoading: boolean;
- onClose: () => void;
- onClick: (key: string, value: string) => Promise;
+ isOpen,
+ type,
+ isLoading,
+ onClose,
+ onClick,
+ }: {
+ isOpen: boolean;
+ type: string;
+ isLoading: boolean;
+ onClose: () => void;
+ onClick: (key: string, value: string) => Promise;
}): JSX.Element => {
- const { user } = useUserContext();
- const optionConfig = user?.config![type];
- const [input, setInput] = useState('');
+ const {user} = useUserContext();
+ const optionConfig = user?.config![type];
+ const [input, setInput] = useState('');
- if (!optionConfig) {
- return <>>;
- }
+ if (!optionConfig) {
+ return <>>;
+ }
- return (
- {
- setInput('');
- onClick(type, input);
- }}
- isLoading={isLoading}
- disabled={input === ''}
- cursor={input === '' ? 'not-allowed' : 'pointer'}
- id="ipc-config-modal-button"
- >
- {`Change my ${optionConfig.name}`}
-
- }
- >
-
- ) => setInput(e.target.value)} />
-
-
- );
+ return (
+ {
+ setInput('');
+ onClick(type, input);
+ }}
+ isLoading={isLoading}
+ disabled={input === ''}
+ cursor={input === '' ? 'not-allowed' : 'pointer'}
+ id="ipc-config-modal-button"
+ >
+ {`Change my ${optionConfig.name}`}
+
+ }
+ >
+
+ ) => setInput(e.target.value)}/>
+
+
+ );
};
export default ConfigInputModal;
diff --git a/src/components/account/ConfigSelect.tsx b/src/components/account/ConfigSelect.tsx
index 9efc9e1f..418ee859 100644
--- a/src/components/account/ConfigSelect.tsx
+++ b/src/components/account/ConfigSelect.tsx
@@ -1,39 +1,39 @@
-import { HStack } from '@chakra-ui/react';
-import Button from 'components/Button';
-import { useConfigContext } from '../../contexts/config';
+import {HStack} from '@chakra-ui/react';
+import Button from 'components/Models/Button';
+import {useConfigContext} from '../../contexts/config';
const ConfigInputModal = ({
- option,
- isLoading,
- onClick,
-}: {
- option: string;
- isLoading: boolean;
- onClick: (key: string, value: string) => Promise;
+ option,
+ isLoading,
+ onClick,
+ }: {
+ option: string;
+ isLoading: boolean;
+ onClick: (key: string, value: string) => Promise;
}): JSX.Element => {
- const { config } = useConfigContext();
- const elem = config[option];
+ const {config} = useConfigContext();
+ const elem = config[option];
- if (elem.type !== 'select') return <>>;
+ if (elem.type !== 'select') return <>>;
- return (
-
- {elem.options.map((optionValue) => (
-
- ))}
-
- );
+ return (
+
+ {elem.options.map((optionValue) => (
+
+ ))}
+
+ );
};
export default ConfigInputModal;
diff --git a/src/components/cards/ContactCard.tsx b/src/components/cards/ContactCard.tsx
deleted file mode 100644
index dc7c46dd..00000000
--- a/src/components/cards/ContactCard.tsx
+++ /dev/null
@@ -1,66 +0,0 @@
-import { Box, HStack, Text, useBreakpointValue, useDisclosure, useColorModeValue } from '@chakra-ui/react';
-import { useState } from 'react';
-import { BsFillFilePersonFill } from 'react-icons/bs';
-
-import { IPCContact } from 'types/types';
-
-import useToggle from 'hooks/useToggle';
-
-import formatDate from 'utils/formatDate';
-
-import { ContactOptionsDrawer, ContactOptionsPopover } from 'components/dashboardPage/ContactOptions';
-
-import { textColorMode } from 'config/colorMode';
-
-import Card from './Card';
-
-const ContactCard = ({ contact }: { contact: IPCContact }): JSX.Element => {
- const { isOpen: isOpenFile, onOpen: onOpenFile, onClose: onCloseFile } = useDisclosure();
- const { toggle: popoverOpeningToggleFile, toggleHandler: popoverOpeningHandlerFile } = useToggle();
-
- const [clickPosition, setClickPosition] = useState({ x: 0, y: 0 });
-
- const isDrawer = useBreakpointValue({ base: true, sm: false }) || false;
- const textColor = useColorModeValue(textColorMode.light, textColorMode.dark);
-
- return (
- <>
- {
- e.preventDefault();
- if (!isDrawer) {
- setClickPosition({ x: e.clientX, y: e.clientY });
- popoverOpeningHandlerFile();
- } else onOpenFile();
- }}
- >
-
-
-
-
- {contact.name} - {contact.address}
-
-
-
- {formatDate(contact.createdAt)}
-
-
-
-
- {isDrawer ? (
-
- ) : (
-
- )}
-
- >
- );
-};
-
-export default ContactCard;
diff --git a/src/components/cards/FileCard.tsx b/src/components/cards/FileCard.tsx
deleted file mode 100644
index c7f0fd89..00000000
--- a/src/components/cards/FileCard.tsx
+++ /dev/null
@@ -1,87 +0,0 @@
-import { Box, HStack, Text, useBreakpointValue, useDisclosure, useColorModeValue } from '@chakra-ui/react';
-import { useState } from 'react';
-import { BsFileEarmarkFill } from 'react-icons/bs';
-
-import { IPCFile } from 'types/types';
-
-import useToggle from 'hooks/useToggle';
-
-import { useDriveContext } from 'contexts/drive';
-import { useUserContext } from 'contexts/user';
-
-import formatDate from 'utils/formatDate';
-import formatFileSize from 'utils/formatFileSize';
-
-import { FileOptionsDrawer, FileOptionsPopover } from 'components/dashboardPage/FileOptions';
-
-import { textColorMode } from 'config/colorMode';
-
-import Card from './Card';
-
-const FileCard = ({ file }: { file: IPCFile }): JSX.Element => {
- const { files } = useDriveContext();
- const {
- user: {
- fullContact: {
- contact: { username },
- },
- },
- } = useUserContext();
-
- const { isOpen: isOpenFile, onOpen: onOpenFile, onClose: onCloseFile } = useDisclosure();
- const { toggle: popoverOpeningToggleFile, toggleHandler: popoverOpeningHandlerFile } = useToggle();
-
- const [clickPosition, setClickPosition] = useState({ x: 0, y: 0 });
-
- const isDrawer = useBreakpointValue({ base: true, sm: false }) || false;
- const textColor = useColorModeValue(textColorMode.light, textColorMode.dark);
- return (
- <>
- {
- e.preventDefault();
- if (!isDrawer) {
- setClickPosition({ x: e.clientX, y: e.clientY });
- popoverOpeningHandlerFile();
- } else onOpenFile();
- }}
- >
-
-
-
-
- {file.name}
-
-
-
-
- by{' '}
-
- {username}
-
-
- {formatDate(file.createdAt)}
- {formatFileSize(file.size)}
-
-
-
-
- {isDrawer ? (
-
- ) : (
-
- )}
-
- >
- );
-};
-
-export default FileCard;
diff --git a/src/components/cards/FolderCard.tsx b/src/components/cards/FolderCard.tsx
deleted file mode 100644
index b054aee1..00000000
--- a/src/components/cards/FolderCard.tsx
+++ /dev/null
@@ -1,89 +0,0 @@
-import { Box, HStack, Text, useBreakpointValue, useDisclosure, useColorModeValue } from '@chakra-ui/react';
-import { useState } from 'react';
-import { FaFolder } from 'react-icons/fa';
-
-import { useDriveContext } from 'contexts/drive';
-import { useUserContext } from 'contexts/user';
-import useToggle from 'hooks/useToggle';
-
-import { FolderOptionsDrawer, FolderOptionsPopover } from 'components/dashboardPage/FolderOptions';
-
-import { textColorMode } from 'config/colorMode';
-
-import { IPCFolder } from 'types/types';
-
-import formatDate from 'utils/formatDate';
-
-import Card from './Card';
-
-const FolderCard = ({ folder }: { folder: IPCFolder }): JSX.Element => {
- const { path, setPath } = useDriveContext();
- const {
- user: {
- fullContact: {
- contact: { username },
- },
- },
- } = useUserContext();
-
- const isDrawer = useBreakpointValue({ base: true, sm: false }) || false;
-
- const { toggle: popoverOpeningToggleFolder, toggleHandler: popoverOpeningHandlerFolder } = useToggle();
- const { isOpen: isOpenFolder, onOpen: onOpenFolder, onClose: onCloseFolder } = useDisclosure();
-
- const [clickPosition, setClickPosition] = useState({ x: 0, y: 0 });
- const textColor = useColorModeValue(textColorMode.light, textColorMode.dark);
-
- return (
- <>
- {
- e.preventDefault();
- if (!isDrawer) {
- setClickPosition({ x: e.clientX, y: e.clientY });
- popoverOpeningHandlerFolder();
- } else onOpenFolder();
- }}
- onClick={() => {
- setPath(`${path + folder.name}/`);
- }}
- className="ipc-folder-popover-button"
- w="100%"
- cursor="pointer"
- >
-
-
-
-
- {folder.name}
-
-
-
-
- by{' '}
-
- {username}
-
-
- {formatDate(folder.createdAt)}
-
-
-
-
- {isDrawer ? (
-
- ) : (
-
- )}
-
- >
- );
-};
-
-export default FolderCard;
diff --git a/src/components/cards/ProgramCard.tsx b/src/components/cards/ProgramCard.tsx
deleted file mode 100644
index 2834c60f..00000000
--- a/src/components/cards/ProgramCard.tsx
+++ /dev/null
@@ -1,82 +0,0 @@
-import { Box, HStack, Text, useBreakpointValue, useColorModeValue, useDisclosure } from '@chakra-ui/react';
-import { useState } from 'react';
-import { BsFileEarmarkCodeFill } from 'react-icons/bs';
-
-import { useUserContext } from 'contexts/user';
-
-import useToggle from 'hooks/useToggle';
-
-import formatDate from 'utils/formatDate';
-import formatFileSize from 'utils/formatFileSize';
-
-import { ProgramOptionsDrawer, ProgramOptionsPopover } from 'components/dashboardPage/ProgramOptions';
-import { textColorMode } from 'config/colorMode';
-
-import { IPCProgram } from 'types/types';
-
-import Card from './Card';
-
-const ProgramCard = ({ program }: { program: IPCProgram }): JSX.Element => {
- const {
- user: {
- fullContact: {
- contact: { username },
- },
- },
- } = useUserContext();
- const { isOpen: isOpenFile, onOpen: onOpenFile, onClose: onCloseFile } = useDisclosure();
- const { toggle: popoverOpeningToggleFile, toggleHandler: popoverOpeningHandlerFile } = useToggle();
-
- const [clickPosition, setClickPosition] = useState({ x: 0, y: 0 });
-
- const isDrawer = useBreakpointValue({ base: true, sm: false }) || false;
- const textColor = useColorModeValue(textColorMode.light, textColorMode.dark);
-
- return (
- <>
- {
- e.preventDefault();
- if (!isDrawer) {
- setClickPosition({ x: e.clientX, y: e.clientY });
- popoverOpeningHandlerFile();
- } else onOpenFile();
- }}
- >
-
-
-
-
- {program.name} - {program.entrypoint}
-
-
-
-
- by{' '}
-
- {username}
-
-
- {formatDate(program.createdAt)}
- {formatFileSize(program.size)}
-
-
-
-
- {isDrawer ? (
-
- ) : (
-
- )}
-
- >
- );
-};
-
-export default ProgramCard;
diff --git a/src/components/computing/github/GithubModal.tsx b/src/components/computing/github/GithubModal.tsx
index 399247bf..373c65fc 100644
--- a/src/components/computing/github/GithubModal.tsx
+++ b/src/components/computing/github/GithubModal.tsx
@@ -1,222 +1,222 @@
-import { HStack, Input, Skeleton, Text, useColorModeValue, useToast, VStack } from '@chakra-ui/react';
+import {HStack, Input, Skeleton, Text, useColorModeValue, useToast, VStack} from '@chakra-ui/react';
import axios from 'axios';
-import { signIn, signOut, useSession } from 'next-auth/react';
-import { useRouter } from 'next/router';
-import { ChangeEvent, useEffect, useState } from 'react';
+import {signIn, signOut, useSession} from 'next-auth/react';
+import {useRouter} from 'next/router';
+import {ChangeEvent, useEffect, useState} from 'react';
-import Button from 'components/Button';
-import Card from 'components/cards/Card';
-import Modal from 'components/Modal';
-import Tooltip from 'components/Tooltip';
+import Button from 'components/Models/Button';
+import Card from 'components/Models/cards/Card';
+import Modal from 'components/Models/Modal';
+import Tooltip from 'components/Models/Tooltip';
-import { useDriveContext } from 'contexts/drive';
-import { useUserContext } from 'contexts/user';
+import {useDriveContext} from 'contexts/drive';
+import {useUserContext} from 'contexts/user';
-import { GitHubRepository, IPCProgram } from 'types/types';
+import {GitHubRepository, IPCProgram} from 'types/types';
-import { textColorMode } from 'config/colorMode';
+import {textColorMode} from 'config/colorMode';
import CustomProgram from '../CustomProgram';
-const GithubModal = ({ isOpen, onClose }: { isOpen: boolean; onClose: () => void }): JSX.Element => {
- const { user } = useUserContext();
- const { data: session } = useSession();
- const { setPrograms } = useDriveContext();
+const GithubModal = ({isOpen, onClose}: { isOpen: boolean; onClose: () => void }): JSX.Element => {
+ const {user} = useUserContext();
+ const {data: session} = useSession();
+ const {setPrograms} = useDriveContext();
- const toast = useToast({ duration: 2000, isClosable: true });
- const router = useRouter();
- const textColor = useColorModeValue(textColorMode.light, textColorMode.dark);
+ const toast = useToast({duration: 2000, isClosable: true});
+ const router = useRouter();
+ const textColor = useColorModeValue(textColorMode.light, textColorMode.dark);
- const [isDeployLoading, setIsDeployLoading] = useState(false);
- const [selectedRepository, setSelectedRepository] = useState('');
- const [customName, setCustomName] = useState('');
- const [customEntrypoint, setCustomEntrypoint] = useState('');
- const [repositories, setRepositories] = useState([]);
- const [repositoriesLoading, setRepositoriesLoading] = useState(false);
- const [searchInput, setSearchInput] = useState(selectedRepository);
+ const [isDeployLoading, setIsDeployLoading] = useState(false);
+ const [selectedRepository, setSelectedRepository] = useState('');
+ const [customName, setCustomName] = useState('');
+ const [customEntrypoint, setCustomEntrypoint] = useState('');
+ const [repositories, setRepositories] = useState([]);
+ const [repositoriesLoading, setRepositoriesLoading] = useState(false);
+ const [searchInput, setSearchInput] = useState(selectedRepository);
- useEffect(() => {
- (async () => {
- if (!user) {
- router.push('/');
- } else if (session) await getRepositories();
- })();
- }, []);
+ useEffect(() => {
+ (async () => {
+ if (!user) {
+ router.push('/');
+ } else if (session) await getRepositories();
+ })();
+ }, []);
- useEffect(() => {
- const foundRepository = repositories.find((repository) => repository.html_url === selectedRepository);
- if (foundRepository) setSearchInput(`${foundRepository.owner.login} - ${foundRepository.name}`);
- else setSearchInput('');
- }, [selectedRepository]);
+ useEffect(() => {
+ const foundRepository = repositories.find((repository) => repository.html_url === selectedRepository);
+ if (foundRepository) setSearchInput(`${foundRepository.owner.login} - ${foundRepository.name}`);
+ else setSearchInput('');
+ }, [selectedRepository]);
- const cloneToBackend = async (repository: string) => {
- try {
- setIsDeployLoading(true);
- const result = await axios.post('/api/program/create', {
- repository: `${repository}.git`,
- entrypoint: customEntrypoint || user.config?.defaultEntrypoint.value || 'main:app',
- });
- if (result.status !== 200) throw new Error('Unable to clone repository from github');
- const newProgram: IPCProgram = {
- id: crypto.randomUUID(),
- name: customName || result.data.name,
- hash: result.data.item_hash,
- createdAt: Date.now(),
- entrypoint: result.data.entrypoint,
- permission: 'owner',
- size: 0,
- logs: [
- {
- action: 'Program created',
- date: Date.now(),
- },
- ],
- hashFile: '',
- };
- user.fullContact.computing.programs.push(newProgram);
- await user.fullContact.computing.publishAggregate();
- setPrograms(user.fullContact.computing.programs);
- toast({ title: 'Upload succeeded', status: 'success' });
- onClose();
- } catch (err) {
- toast({ title: 'Upload failed', status: 'error' });
- console.error(err);
- }
- setIsDeployLoading(false);
- setCustomEntrypoint('');
- setCustomName('');
- };
+ const cloneToBackend = async (repository: string) => {
+ try {
+ setIsDeployLoading(true);
+ const result = await axios.post('/api/program/create', {
+ repository: `${repository}.git`,
+ entrypoint: customEntrypoint || user.config?.defaultEntrypoint.value || 'main:app',
+ });
+ if (result.status !== 200) throw new Error('Unable to clone repository from github');
+ const newProgram: IPCProgram = {
+ id: crypto.randomUUID(),
+ name: customName || result.data.name,
+ hash: result.data.item_hash,
+ createdAt: Date.now(),
+ entrypoint: result.data.entrypoint,
+ permission: 'owner',
+ size: 0,
+ logs: [
+ {
+ action: 'Program created',
+ date: Date.now(),
+ },
+ ],
+ hashFile: '',
+ };
+ user.fullContact.computing.programs.push(newProgram);
+ await user.fullContact.computing.publishAggregate();
+ setPrograms(user.fullContact.computing.programs);
+ toast({title: 'Upload succeeded', status: 'success'});
+ onClose();
+ } catch (err) {
+ toast({title: 'Upload failed', status: 'error'});
+ console.error(err);
+ }
+ setIsDeployLoading(false);
+ setCustomEntrypoint('');
+ setCustomName('');
+ };
- const getRepositories = async () => {
- try {
- const repositoryList: GitHubRepository[] = [];
- let hasMore = true;
- let i = 1;
+ const getRepositories = async () => {
+ try {
+ const repositoryList: GitHubRepository[] = [];
+ let hasMore = true;
+ let i = 1;
- setRepositoriesLoading(true);
- while (hasMore) {
- // eslint-disable-next-line no-await-in-loop
- const result = await axios.get(`/api/computing/github/repositories?page=${i}`);
- if (result.status !== 200) throw new Error("Unable to load repositories from github's API");
- hasMore = result.data.hasMore;
- repositoryList.push(...result.data.repositories);
- i += 1;
- }
- setRepositories(repositoryList);
- setRepositoriesLoading(false);
- } catch (error) {
- console.error(error);
- }
- };
+ setRepositoriesLoading(true);
+ while (hasMore) {
+ // eslint-disable-next-line no-await-in-loop
+ const result = await axios.get(`/api/computing/github/repositories?page=${i}`);
+ if (result.status !== 200) throw new Error("Unable to load repositories from github's API");
+ hasMore = result.data.hasMore;
+ repositoryList.push(...result.data.repositories);
+ i += 1;
+ }
+ setRepositories(repositoryList);
+ setRepositoriesLoading(false);
+ } catch (error) {
+ console.error(error);
+ }
+ };
- return (
-
-
- {!session ? (
-
- ) : (
-
- )}
-
- }
- >
- <>
- {!session && (
-
-
- You're not connected to your Github account
-
-
- )}
- {session && (
- <>
-
-
-
-
-
-
- The name of the repository
-
-
-
- ) => setSearchInput(e.target.value)}
- />
-
-
-
-
- {repositories
- .filter((repository) =>
- `${repository.owner.login.toLowerCase()} - ${repository.name.toLowerCase()}`.includes(
- searchInput.toLowerCase(),
- ),
- )
- .map((repository) => (
- setSelectedRepository(repository.html_url)}
- >
- {repository.owner.login} - {repository.name}
-
- ))}
-
-
-
-
-
- >
- )}
- >
-
- );
+ return (
+
+
+ {!session ? (
+
+ ) : (
+
+ )}
+
+ }
+ >
+ <>
+ {!session && (
+
+
+ You're not connected to your Github account
+
+
+ )}
+ {session && (
+ <>
+
+
+
+
+
+
+ The name of the repository
+
+
+
+ ) => setSearchInput(e.target.value)}
+ />
+
+
+
+
+ {repositories
+ .filter((repository) =>
+ `${repository.owner.login.toLowerCase()} - ${repository.name.toLowerCase()}`.includes(
+ searchInput.toLowerCase(),
+ ),
+ )
+ .map((repository) => (
+ setSelectedRepository(repository.html_url)}
+ >
+ {repository.owner.login} - {repository.name}
+
+ ))}
+
+
+
+
+
+ >
+ )}
+ >
+
+ );
};
export default GithubModal;
diff --git a/src/components/computing/programs/ProgramModal.tsx b/src/components/computing/programs/ProgramModal.tsx
index 46eed022..534709ee 100644
--- a/src/components/computing/programs/ProgramModal.tsx
+++ b/src/components/computing/programs/ProgramModal.tsx
@@ -1,119 +1,119 @@
-import { Input, Text, VStack, useColorModeValue, useToast } from '@chakra-ui/react';
-import { ChangeEvent, useState } from 'react';
+import {Input, Text, useColorModeValue, useToast, VStack} from '@chakra-ui/react';
+import {ChangeEvent, useState} from 'react';
-import Modal from 'components/Modal';
+import Modal from 'components/Models/Modal';
-import { useDriveContext } from 'contexts/drive';
-import { useUserContext } from 'contexts/user';
+import {useDriveContext} from 'contexts/drive';
+import {useUserContext} from 'contexts/user';
-import { extractFilename } from 'utils/fileManipulation';
+import {extractFilename} from 'utils/fileManipulation';
-import { IPCProgram } from 'types/types';
+import {IPCProgram} from 'types/types';
-import Button from 'components/Button';
+import Button from 'components/Models/Button';
-import { textColorMode } from 'config/colorMode';
+import {textColorMode} from 'config/colorMode';
import CustomProgram from '../CustomProgram';
const ProgramModal = ({
- isOpen,
- onClose,
- selectedProgram,
-}: {
- isOpen: boolean;
- onClose: () => void;
- selectedProgram?: IPCProgram;
+ isOpen,
+ onClose,
+ selectedProgram,
+ }: {
+ isOpen: boolean;
+ onClose: () => void;
+ selectedProgram?: IPCProgram;
}): JSX.Element => {
- const { user } = useUserContext();
- const { setPrograms } = useDriveContext();
- const textColor = useColorModeValue(textColorMode.light, textColorMode.dark);
+ const {user} = useUserContext();
+ const {setPrograms} = useDriveContext();
+ const textColor = useColorModeValue(textColorMode.light, textColorMode.dark);
- const [fileEvent, setFileEvent] = useState | undefined>(undefined);
- const [isDeployLoading, setIsDeployLoading] = useState(false);
- const [customName, setCustomName] = useState('');
- const [customEntrypoint, setCustomEntrypoint] = useState('');
+ const [fileEvent, setFileEvent] = useState | undefined>(undefined);
+ const [isDeployLoading, setIsDeployLoading] = useState(false);
+ const [customName, setCustomName] = useState('');
+ const [customEntrypoint, setCustomEntrypoint] = useState('');
- const toast = useToast({ duration: 2000, isClosable: true });
- const uploadProgram = async (oldProgram: IPCProgram | undefined) => {
- if (!fileEvent?.target.files) return;
- const filename = extractFilename(fileEvent.target.value);
- if (!filename) return;
+ const toast = useToast({duration: 2000, isClosable: true});
+ const uploadProgram = async (oldProgram: IPCProgram | undefined) => {
+ if (!fileEvent?.target.files) return;
+ const filename = extractFilename(fileEvent.target.value);
+ if (!filename) return;
- setIsDeployLoading(true);
- try {
- const upload = await user.fullContact.computing.upload(
- {
- id: crypto.randomUUID(),
- name: customName || filename,
- hash: '',
- createdAt: Date.now(),
- entrypoint: customEntrypoint || user.config?.defaultEntrypoint.value || 'main:app',
- permission: 'owner',
- size: fileEvent.target.files[0].size,
- logs: [
- {
- action: 'Program created',
- date: Date.now(),
- },
- ],
- hashFile: '',
- },
- fileEvent.target.files[0],
- !!oldProgram,
- oldProgram,
- );
- toast({ title: upload.message, status: upload.success ? 'success' : 'error' });
- setPrograms(user.fullContact.computing.programs);
- onClose();
- } catch (error) {
- console.error(error);
- toast({ title: 'Unable to upload file', status: 'error' });
- }
- setFileEvent(undefined);
- setIsDeployLoading(false);
- };
+ setIsDeployLoading(true);
+ try {
+ const upload = await user.fullContact.computing.upload(
+ {
+ id: crypto.randomUUID(),
+ name: customName || filename,
+ hash: '',
+ createdAt: Date.now(),
+ entrypoint: customEntrypoint || user.config?.defaultEntrypoint.value || 'main:app',
+ permission: 'owner',
+ size: fileEvent.target.files[0].size,
+ logs: [
+ {
+ action: 'Program created',
+ date: Date.now(),
+ },
+ ],
+ hashFile: '',
+ },
+ fileEvent.target.files[0],
+ !!oldProgram,
+ oldProgram,
+ );
+ toast({title: upload.message, status: upload.success ? 'success' : 'error'});
+ setPrograms(user.fullContact.computing.programs);
+ onClose();
+ } catch (error) {
+ console.error(error);
+ toast({title: 'Unable to upload file', status: 'error'});
+ }
+ setFileEvent(undefined);
+ setIsDeployLoading(false);
+ };
- return (
- uploadProgram(selectedProgram)}
- isLoading={isDeployLoading}
- id="ipc-dashboard-deploy-program-modal-button"
- >
- {selectedProgram ? 'Redeploy the program' : 'Deploy a program'}
-
- }
- >
-
-
-
-
- The file of the program
-
- ) => setFileEvent(e)}
- id="ipc-dashboard-deploy-program-modal"
- />
-
-
-
- );
+ return (
+ uploadProgram(selectedProgram)}
+ isLoading={isDeployLoading}
+ id="ipc-dashboard-deploy-program-modal-button"
+ >
+ {selectedProgram ? 'Redeploy the program' : 'Deploy a program'}
+
+ }
+ >
+
+
+
+
+ The file of the program
+
+ ) => setFileEvent(e)}
+ id="ipc-dashboard-deploy-program-modal"
+ />
+
+
+
+ );
};
export default ProgramModal;
diff --git a/src/components/contact/AddContact.tsx b/src/components/contact/AddContact.tsx
index 1fb9bdf1..f6de5640 100644
--- a/src/components/contact/AddContact.tsx
+++ b/src/components/contact/AddContact.tsx
@@ -1,89 +1,89 @@
-import { Input, useDisclosure, useToast } from '@chakra-ui/react';
+import {Input, useDisclosure, useToast} from '@chakra-ui/react';
import EthCrypto from 'eth-crypto';
-import { ChangeEvent, useState } from 'react';
-import { BsPlusLg } from 'react-icons/bs';
+import {ChangeEvent, useState} from 'react';
+import {BsPlusLg} from 'react-icons/bs';
-import Button from 'components/Button';
-import Modal from 'components/Modal';
+import Button from 'components/Models/Button';
+import Modal from 'components/Models/Modal';
-import { useDriveContext } from 'contexts/drive';
-import { useUserContext } from 'contexts/user';
+import {useDriveContext} from 'contexts/drive';
+import {useUserContext} from 'contexts/user';
const AddContact = (): JSX.Element => {
- const { user } = useUserContext();
- const { setContacts } = useDriveContext();
- const toast = useToast({ duration: 2000, isClosable: true });
+ const {user} = useUserContext();
+ const {setContacts} = useDriveContext();
+ const toast = useToast({duration: 2000, isClosable: true});
- const [name, setName] = useState('');
- const [contactPublicKey, setContactPublicKey] = useState('');
- const { isOpen, onOpen, onClose } = useDisclosure();
+ const [name, setName] = useState('');
+ const [contactPublicKey, setContactPublicKey] = useState('');
+ const {isOpen, onOpen, onClose} = useDisclosure();
- const addContact = async () => {
- try {
- if (name && contactPublicKey) {
- const address = EthCrypto.publicKey.toAddress(contactPublicKey.slice(2));
- const add = await user.fullContact.manage.add({
- name,
- address,
- publicKey: contactPublicKey,
- createdAt: new Date().getTime(),
- files: [],
- folders: [],
- config: undefined,
- programs: [],
- });
+ const addContact = async () => {
+ try {
+ if (name && contactPublicKey) {
+ const address = EthCrypto.publicKey.toAddress(contactPublicKey.slice(2));
+ const add = await user.fullContact.manage.add({
+ name,
+ address,
+ publicKey: contactPublicKey,
+ createdAt: new Date().getTime(),
+ files: [],
+ folders: [],
+ config: undefined,
+ programs: [],
+ });
- toast({ title: add.message, status: add.success ? 'success' : 'error' });
- setContacts(user.fullContact.contact.contacts);
- } else {
- toast({ title: 'Bad contact infos', status: 'error' });
- }
- setName('');
- onClose();
- } catch (error) {
- console.error(error);
- toast({ title: 'Bad public key given', status: 'error' });
- }
- };
+ toast({title: add.message, status: add.success ? 'success' : 'error'});
+ setContacts(user.fullContact.contact.contacts);
+ } else {
+ toast({title: 'Bad contact infos', status: 'error'});
+ }
+ setName('');
+ onClose();
+ } catch (error) {
+ console.error(error);
+ toast({title: 'Bad public key given', status: 'error'});
+ }
+ };
- return (
- <>
-
-
- Add a contact
-
- }
- >
- <>
- ) => setName(e.target.value)}
- id="ipc-dashboard-input-contact-name"
- />
- ) => setContactPublicKey(e.target.value)}
- id="ipc-dashboard-input-contact-public-key"
- />
- >
-
- >
- );
+ return (
+ <>
+
+
+ Add a contact
+
+ }
+ >
+ <>
+ ) => setName(e.target.value)}
+ id="ipc-dashboard-input-contact-name"
+ />
+ ) => setContactPublicKey(e.target.value)}
+ id="ipc-dashboard-input-contact-public-key"
+ />
+ >
+
+ >
+ );
};
export default AddContact;
diff --git a/src/components/contact/UpdateContact.tsx b/src/components/contact/UpdateContact.tsx
index 52a7c4ec..c0ecd193 100644
--- a/src/components/contact/UpdateContact.tsx
+++ b/src/components/contact/UpdateContact.tsx
@@ -1,80 +1,80 @@
-import { EditIcon } from '@chakra-ui/icons';
-import { FormControl, FormLabel, Input, useColorModeValue, useDisclosure, useToast } from '@chakra-ui/react';
-import { ChangeEvent, useState } from 'react';
+import {EditIcon} from '@chakra-ui/icons';
+import {FormControl, FormLabel, Input, useColorModeValue, useDisclosure, useToast} from '@chakra-ui/react';
+import {ChangeEvent, useState} from 'react';
-import Modal from 'components/Modal';
+import Modal from 'components/Models/Modal';
-import type { IPCContact } from 'types/types';
+import type {IPCContact} from 'types/types';
-import { useDriveContext } from 'contexts/drive';
-import { useUserContext } from 'contexts/user';
-import Button from 'components/Button';
-import { textColorMode } from 'config/colorMode';
+import {useDriveContext} from 'contexts/drive';
+import {useUserContext} from 'contexts/user';
+import Button from 'components/Models/Button';
+import {textColorMode} from 'config/colorMode';
type UpdateContactProps = {
- contact: IPCContact;
+ contact: IPCContact;
};
-const UpdateContact = ({ contact }: UpdateContactProps): JSX.Element => {
- const { user } = useUserContext();
- const { setContacts } = useDriveContext();
- const toast = useToast({ duration: 2000, isClosable: true });
- const textColor = useColorModeValue(textColorMode.light, textColorMode.dark);
+const UpdateContact = ({contact}: UpdateContactProps): JSX.Element => {
+ const {user} = useUserContext();
+ const {setContacts} = useDriveContext();
+ const toast = useToast({duration: 2000, isClosable: true});
+ const textColor = useColorModeValue(textColorMode.light, textColorMode.dark);
- const [name, setName] = useState('');
- const [isLoading, setIsLoading] = useState(false);
- const { isOpen, onOpen, onClose } = useDisclosure();
+ const [name, setName] = useState('');
+ const [isLoading, setIsLoading] = useState(false);
+ const {isOpen, onOpen, onClose} = useDisclosure();
- const updateContact = async () => {
- setIsLoading(true);
- if (name) {
- const update = await user.fullContact.manage.update(contact.address, name);
- toast({ title: update.message, status: update.success ? 'success' : 'error' });
- setContacts(user.fullContact.contact.contacts);
- } else {
- toast({ title: 'Invalid name', status: 'error' });
- }
- setName('');
- setIsLoading(true);
- onClose();
- };
+ const updateContact = async () => {
+ setIsLoading(true);
+ if (name) {
+ const update = await user.fullContact.manage.update(contact.address, name);
+ toast({title: update.message, status: update.success ? 'success' : 'error'});
+ setContacts(user.fullContact.contact.contacts);
+ } else {
+ toast({title: 'Invalid name', status: 'error'});
+ }
+ setName('');
+ setIsLoading(true);
+ onClose();
+ };
- return (
- <>
-
-
- Update the contact
-
- }
- >
-
- New name
- ) => setName(e.target.value)}
- id="ipc-dashboard-input-contact-name"
- />
-
-
- >
- );
+ return (
+ <>
+
+
+ Update the contact
+
+ }
+ >
+
+ New name
+ ) => setName(e.target.value)}
+ id="ipc-dashboard-input-contact-name"
+ />
+
+
+ >
+ );
};
export default UpdateContact;
diff --git a/src/components/file/DeleteBin.tsx b/src/components/file/DeleteBin.tsx
index f7a3ecc4..37813d8d 100644
--- a/src/components/file/DeleteBin.tsx
+++ b/src/components/file/DeleteBin.tsx
@@ -1,85 +1,85 @@
-import { Text, useColorModeValue, useDisclosure, useToast } from '@chakra-ui/react';
-import { useState } from 'react';
-import { BsPlusLg } from 'react-icons/bs';
+import {Text, useColorModeValue, useDisclosure, useToast} from '@chakra-ui/react';
+import {useState} from 'react';
+import {BsPlusLg} from 'react-icons/bs';
-import Button from 'components/Button';
-import Modal from 'components/Modal';
+import Button from 'components/Models/Button';
+import Modal from 'components/Models/Modal';
-import { useDriveContext } from 'contexts/drive';
-import { useUserContext } from 'contexts/user';
+import {useDriveContext} from 'contexts/drive';
+import {useUserContext} from 'contexts/user';
-import { IPCFile, IPCFolder } from 'types/types';
-import { textColorMode } from 'config/colorMode';
+import {IPCFile, IPCFolder} from 'types/types';
+import {textColorMode} from 'config/colorMode';
type DeleteBinProps = {
- files: IPCFile[];
- folders: IPCFolder[];
- concernedFiles: IPCFile[];
+ files: IPCFile[];
+ folders: IPCFolder[];
+ concernedFiles: IPCFile[];
};
-const DeleteBin = ({ files, folders, concernedFiles }: DeleteBinProps): JSX.Element => {
- const toast = useToast({ duration: 2000, isClosable: true });
- const textColor = useColorModeValue(textColorMode.light, textColorMode.dark);
+const DeleteBin = ({files, folders, concernedFiles}: DeleteBinProps): JSX.Element => {
+ const toast = useToast({duration: 2000, isClosable: true});
+ const textColor = useColorModeValue(textColorMode.light, textColorMode.dark);
- const { user } = useUserContext();
- const { setFiles } = useDriveContext();
+ const {user} = useUserContext();
+ const {setFiles} = useDriveContext();
- const [isLoading, setIsLoading] = useState(false);
- const { isOpen, onOpen, onClose } = useDisclosure();
+ const [isLoading, setIsLoading] = useState(false);
+ const {isOpen, onOpen, onClose} = useDisclosure();
- const deleteAllFiles = async () => {
- setIsLoading(true);
- if (user.account) {
- const deleted = await user.drive.delete(files.map((file) => file.hash));
- if (deleted.success) {
- const removed = await user.fullContact.files.delete(
- files.map((file) => file.id),
- concernedFiles,
- );
+ const deleteAllFiles = async () => {
+ setIsLoading(true);
+ if (user.account) {
+ const deleted = await user.drive.delete(files.map((file) => file.hash));
+ if (deleted.success) {
+ const removed = await user.fullContact.files.delete(
+ files.map((file) => file.id),
+ concernedFiles,
+ );
- if (!removed.success) {
- toast({ title: removed.message, status: 'error' });
- } else {
- setFiles(user.drive.files);
- toast({ title: 'All the files in your bin have been deleted.', status: 'success' });
- }
- }
- } else {
- toast({ title: 'Failed to load account', status: 'error' });
- }
- setIsLoading(false);
- onClose();
- };
+ if (!removed.success) {
+ toast({title: removed.message, status: 'error'});
+ } else {
+ setFiles(user.drive.files);
+ toast({title: 'All the files in your bin have been deleted.', status: 'success'});
+ }
+ }
+ } else {
+ toast({title: 'Failed to load account', status: 'error'});
+ }
+ setIsLoading(false);
+ onClose();
+ };
- if (files.length === 0 && folders.length === 0) {
- return (
-
- Your bin is empty
-
- );
- }
+ if (files.length === 0 && folders.length === 0) {
+ return (
+
+ Your bin is empty
+
+ );
+ }
- return (
- <>
-
-
- Delete the bin
-
- }
- >
-
- Are you sure you want to delete all the files in your bin?
-
-
- >
- );
+ return (
+ <>
+
+
+ Delete the bin
+
+ }
+ >
+
+ Are you sure you want to delete all the files in your bin?
+
+
+ >
+ );
};
export default DeleteBin;
diff --git a/src/components/file/DeleteFile.tsx b/src/components/file/DeleteFile.tsx
index 9e89f2d9..f3d0ebe2 100644
--- a/src/components/file/DeleteFile.tsx
+++ b/src/components/file/DeleteFile.tsx
@@ -8,139 +8,139 @@ import {
useDisclosure,
useToast,
} from '@chakra-ui/react';
-import { useState } from 'react';
-import { IoTrashSharp } from 'react-icons/io5';
+import {useState} from 'react';
+import {IoTrashSharp} from 'react-icons/io5';
-import { useDriveContext } from 'contexts/drive';
-import { useUserContext } from 'contexts/user';
+import {useDriveContext} from 'contexts/drive';
+import {useUserContext} from 'contexts/user';
-import Button from 'components/Button';
-import Modal from 'components/Modal';
-import type { IPCFile } from 'types/types';
-import { textColorMode } from 'config/colorMode';
+import Button from 'components/Models/Button';
+import Modal from 'components/Models/Modal';
+import type {IPCFile} from 'types/types';
+import {textColorMode} from 'config/colorMode';
type DeleteFileProps = {
- file: IPCFile;
- concernedFiles: IPCFile[];
- onClosePopover: () => void;
+ file: IPCFile;
+ concernedFiles: IPCFile[];
+ onClosePopover: () => void;
};
-const DeleteFile = ({ file, concernedFiles, onClosePopover }: DeleteFileProps): JSX.Element => {
- const { user } = useUserContext();
- const { files, setFiles } = useDriveContext();
+const DeleteFile = ({file, concernedFiles, onClosePopover}: DeleteFileProps): JSX.Element => {
+ const {user} = useUserContext();
+ const {files, setFiles} = useDriveContext();
- const [isLoading, setIsLoading] = useState(false);
- const { isOpen, onOpen, onClose } = useDisclosure();
+ const [isLoading, setIsLoading] = useState(false);
+ const {isOpen, onOpen, onClose} = useDisclosure();
- const isDrawer = useBreakpointValue({ base: true, sm: false }) || false;
- const toast = useToast({ duration: 2000, isClosable: true });
- const textColor = useColorModeValue(textColorMode.light, textColorMode.dark);
- const { colorMode } = useColorMode();
+ const isDrawer = useBreakpointValue({base: true, sm: false}) || false;
+ const toast = useToast({duration: 2000, isClosable: true});
+ const textColor = useColorModeValue(textColorMode.light, textColorMode.dark);
+ const {colorMode} = useColorMode();
- const deleteFile = async () => {
- setIsLoading(true);
- if (user.account) {
- const deleted = await user.drive.delete([file.hash]);
- toast({ title: deleted.message, status: deleted.success ? 'success' : 'error' });
- if (deleted.success) {
- const removed = await user.fullContact.files.delete([file.id], concernedFiles);
+ const deleteFile = async () => {
+ setIsLoading(true);
+ if (user.account) {
+ const deleted = await user.drive.delete([file.hash]);
+ toast({title: deleted.message, status: deleted.success ? 'success' : 'error'});
+ if (deleted.success) {
+ const removed = await user.fullContact.files.delete([file.id], concernedFiles);
- if (!removed.success) {
- toast({ title: removed.message, status: 'error' });
- } else {
- setFiles(user.drive.files);
- }
- }
- } else {
- toast({ title: 'Failed to load account', status: 'error' });
- }
- setIsLoading(false);
- onClose();
- };
+ if (!removed.success) {
+ toast({title: removed.message, status: 'error'});
+ } else {
+ setFiles(user.drive.files);
+ }
+ }
+ } else {
+ toast({title: 'Failed to load account', status: 'error'});
+ }
+ setIsLoading(false);
+ onClose();
+ };
- const moveToBin = async (deletedAt: number) => {
- setIsLoading(true);
- if (user.account) {
- const moved = await user.fullContact.files.moveToBin(file, deletedAt, concernedFiles);
- toast({ title: moved.message, status: moved.success ? 'success' : 'error' });
+ const moveToBin = async (deletedAt: number) => {
+ setIsLoading(true);
+ if (user.account) {
+ const moved = await user.fullContact.files.moveToBin(file, deletedAt, concernedFiles);
+ toast({title: moved.message, status: moved.success ? 'success' : 'error'});
- const index = files.indexOf(file);
- if (index !== -1) {
- files[index].deletedAt = deletedAt;
- files[index].logs.push({
- action: 'Moved file to bin',
- date: Date.now(),
- });
- setFiles([...files]);
- }
- } else {
- toast({ title: 'Failed to load account', status: 'error' });
- }
- setIsLoading(false);
- };
+ const index = files.indexOf(file);
+ if (index !== -1) {
+ files[index].deletedAt = deletedAt;
+ files[index].logs.push({
+ action: 'Moved file to bin',
+ date: Date.now(),
+ });
+ setFiles([...files]);
+ }
+ } else {
+ toast({title: 'Failed to load account', status: 'error'});
+ }
+ setIsLoading(false);
+ };
- const onBinClicked = async () => {
- if (!file.deletedAt) {
- await moveToBin(Date.now());
- } else {
- onOpen();
- }
- onClosePopover();
- };
+ const onBinClicked = async () => {
+ if (!file.deletedAt) {
+ await moveToBin(Date.now());
+ } else {
+ onOpen();
+ }
+ onClosePopover();
+ };
- if (!['owner', 'editor'].includes(file.permission)) return <>>;
+ if (!['owner', 'editor'].includes(file.permission)) return <>>;
- return (
-
-
-
- {file.deletedAt ? 'Delete' : 'Move to bin'}
-
- deleteFile()}
- isLoading={isLoading}
- id="ipc-dashboard-delete-file-button"
- >
- Delete
-
- }
- >
- Are you sure you want to delete this file?
-
-
- );
+ return (
+
+
+
+ {file.deletedAt ? 'Delete' : 'Move to bin'}
+
+ deleteFile()}
+ isLoading={isLoading}
+ id="ipc-dashboard-delete-file-button"
+ >
+ Delete
+
+ }
+ >
+ Are you sure you want to delete this file?
+
+
+ );
};
export default DeleteFile;
diff --git a/src/components/file/MoveFile.tsx b/src/components/file/MoveFile.tsx
index 7968148b..67ebf770 100644
--- a/src/components/file/MoveFile.tsx
+++ b/src/components/file/MoveFile.tsx
@@ -1,4 +1,4 @@
-import { ArrowBackIcon, ChevronRightIcon } from '@chakra-ui/icons';
+import {ArrowBackIcon, ChevronRightIcon} from '@chakra-ui/icons';
import {
Divider,
HStack,
@@ -10,156 +10,156 @@ import {
useDisclosure,
useToast,
} from '@chakra-ui/react';
-import { useState } from 'react';
-import { FcFolder } from 'react-icons/fc';
-import { MdOutlineDriveFileMove } from 'react-icons/md';
+import {useState} from 'react';
+import {FcFolder} from 'react-icons/fc';
+import {MdOutlineDriveFileMove} from 'react-icons/md';
-import { useDriveContext } from 'contexts/drive';
-import { useUserContext } from 'contexts/user';
+import {useDriveContext} from 'contexts/drive';
+import {useUserContext} from 'contexts/user';
-import Button from 'components/Button';
-import Modal from 'components/Modal';
-import type { IPCFile } from 'types/types';
-import { textColorMode } from 'config/colorMode';
+import Button from 'components/Models/Button';
+import Modal from 'components/Models/Modal';
+import type {IPCFile} from 'types/types';
+import {textColorMode} from 'config/colorMode';
type MoveFileProps = {
- file: IPCFile;
- onClosePopover: () => void;
+ file: IPCFile;
+ onClosePopover: () => void;
};
-const MoveFile = ({ file, onClosePopover }: MoveFileProps): JSX.Element => {
- const { user } = useUserContext();
- const { files, setFiles, folders } = useDriveContext();
+const MoveFile = ({file, onClosePopover}: MoveFileProps): JSX.Element => {
+ const {user} = useUserContext();
+ const {files, setFiles, folders} = useDriveContext();
- const [newPath, setNewPath] = useState('/');
- const [isLoading, setIsLoading] = useState(false);
- const { isOpen, onOpen, onClose } = useDisclosure();
+ const [newPath, setNewPath] = useState('/');
+ const [isLoading, setIsLoading] = useState(false);
+ const {isOpen, onOpen, onClose} = useDisclosure();
- const isDrawer = useBreakpointValue({ base: true, sm: false }) || false;
- const toast = useToast({ duration: 2000, isClosable: true });
+ const isDrawer = useBreakpointValue({base: true, sm: false}) || false;
+ const toast = useToast({duration: 2000, isClosable: true});
- const moveFile = async () => {
- setIsLoading(true);
+ const moveFile = async () => {
+ setIsLoading(true);
- const moved = await user.fullContact.files.move(file, newPath);
- toast({ title: moved.message, status: moved.success ? 'success' : 'error' });
+ const moved = await user.fullContact.files.move(file, newPath);
+ toast({title: moved.message, status: moved.success ? 'success' : 'error'});
- const index = files.indexOf(file);
- if (index !== -1) {
- files[index].path = newPath;
- files[index].logs.push({
- action: `Moved file to ${newPath}`,
- date: Date.now(),
- });
- setFiles([...files]);
- }
- setNewPath('/');
- setIsLoading(false);
- onClose();
- onClosePopover();
- };
+ const index = files.indexOf(file);
+ if (index !== -1) {
+ files[index].path = newPath;
+ files[index].logs.push({
+ action: `Moved file to ${newPath}`,
+ date: Date.now(),
+ });
+ setFiles([...files]);
+ }
+ setNewPath('/');
+ setIsLoading(false);
+ onClose();
+ onClosePopover();
+ };
- const textColor = useColorModeValue(textColorMode.light, textColorMode.dark);
- const { colorMode } = useColorMode();
+ const textColor = useColorModeValue(textColorMode.light, textColorMode.dark);
+ const {colorMode} = useColorMode();
- if (file.permission !== 'owner') return <>>;
+ if (file.permission !== 'owner') return <>>;
- return (
-
-
-
- Move to...
-
-
- Move
-
- }
- >
- <>
-
-
-
- {folders.filter((f) => f.path === newPath).length ? (
- folders
- .filter((f) => f.path === newPath)
- .map((f) => (
-
-
-
-
-
-
-
- ))
- ) : (
- <>
-
-
-
-
-
- >
- )}
- >
-
-
- );
+ return (
+
+
+
+ Move to...
+
+
+ Move
+
+ }
+ >
+ <>
+
+
+
+ {folders.filter((f) => f.path === newPath).length ? (
+ folders
+ .filter((f) => f.path === newPath)
+ .map((f) => (
+
+
+
+
+
+
+
+ ))
+ ) : (
+ <>
+
+
+
+
+
+ >
+ )}
+ >
+
+
+ );
};
export default MoveFile;
diff --git a/src/components/file/RenameFile.tsx b/src/components/file/RenameFile.tsx
index fd6b2276..ceebd763 100644
--- a/src/components/file/RenameFile.tsx
+++ b/src/components/file/RenameFile.tsx
@@ -12,125 +12,125 @@ import {
useToast,
} from '@chakra-ui/react';
-import { ChangeEvent, useState } from 'react';
-import { BsPencil } from 'react-icons/bs';
+import {ChangeEvent, useState} from 'react';
+import {BsPencil} from 'react-icons/bs';
-import { useDriveContext } from 'contexts/drive';
-import { useUserContext } from 'contexts/user';
+import {useDriveContext} from 'contexts/drive';
+import {useUserContext} from 'contexts/user';
-import Button from 'components/Button';
-import Modal from 'components/Modal';
-import type { IPCFile } from 'types/types';
-import { textColorMode } from 'config/colorMode';
+import Button from 'components/Models/Button';
+import Modal from 'components/Models/Modal';
+import type {IPCFile} from 'types/types';
+import {textColorMode} from 'config/colorMode';
type RenameFileProps = {
- file: IPCFile;
- concernedFiles: IPCFile[];
- onClosePopover: () => void;
+ file: IPCFile;
+ concernedFiles: IPCFile[];
+ onClosePopover: () => void;
};
-const RenameFile = ({ file, concernedFiles, onClosePopover }: RenameFileProps): JSX.Element => {
- const { user } = useUserContext();
- const { files, setFiles } = useDriveContext();
+const RenameFile = ({file, concernedFiles, onClosePopover}: RenameFileProps): JSX.Element => {
+ const {user} = useUserContext();
+ const {files, setFiles} = useDriveContext();
- const [name, setName] = useState('');
- const [isLoading, setIsLoading] = useState(false);
- const { isOpen, onOpen, onClose } = useDisclosure();
+ const [name, setName] = useState('');
+ const [isLoading, setIsLoading] = useState(false);
+ const {isOpen, onOpen, onClose} = useDisclosure();
- const isDrawer = useBreakpointValue({ base: true, sm: false }) || false;
- const toast = useToast({ duration: 2000, isClosable: true });
+ const isDrawer = useBreakpointValue({base: true, sm: false}) || false;
+ const toast = useToast({duration: 2000, isClosable: true});
- const renameFile = async () => {
- setIsLoading(true);
- if (name) {
- const update = await user.fullContact.files.updateName(file, name, concernedFiles);
- toast({ title: update.message, status: update.success ? 'success' : 'error' });
- if (update.success) {
- const index = files.indexOf(file);
+ const renameFile = async () => {
+ setIsLoading(true);
+ if (name) {
+ const update = await user.fullContact.files.updateName(file, name, concernedFiles);
+ toast({title: update.message, status: update.success ? 'success' : 'error'});
+ if (update.success) {
+ const index = files.indexOf(file);
- if (index !== -1) {
- files[index].name = name;
- files[index].logs.push({
- action: `Renamed file to ${name}`,
- date: Date.now(),
- });
- }
- setFiles([...files]);
- }
- }
- setName('');
- setIsLoading(false);
- onClose();
- onClosePopover();
- };
+ if (index !== -1) {
+ files[index].name = name;
+ files[index].logs.push({
+ action: `Renamed file to ${name}`,
+ date: Date.now(),
+ });
+ }
+ setFiles([...files]);
+ }
+ }
+ setName('');
+ setIsLoading(false);
+ onClose();
+ onClosePopover();
+ };
- const textColor = useColorModeValue(textColorMode.light, textColorMode.dark);
- const { colorMode } = useColorMode();
+ const textColor = useColorModeValue(textColorMode.light, textColorMode.dark);
+ const {colorMode} = useColorMode();
- if (!['owner', 'editor'].includes(file.permission)) return <>>;
+ if (!['owner', 'editor'].includes(file.permission)) return <>>;
- return (
-
-
-
- Rename
-
-
- OK
-
- }
- >
-
- New file name
- ) => setName(e.target.value)}
- id="ipc-dashboard-input-update-filename"
- />
-
-
-
- );
+ return (
+
+
+
+ Rename
+
+
+ OK
+
+ }
+ >
+
+ New file name
+ ) => setName(e.target.value)}
+ id="ipc-dashboard-input-update-filename"
+ />
+
+
+
+ );
};
export default RenameFile;
diff --git a/src/components/file/ShareFile.tsx b/src/components/file/ShareFile.tsx
index f64d66d2..4f3c0dcd 100644
--- a/src/components/file/ShareFile.tsx
+++ b/src/components/file/ShareFile.tsx
@@ -11,160 +11,160 @@ import {
useToast,
VStack,
} from '@chakra-ui/react';
-import { ChangeEvent, useState } from 'react';
-import { BsShareFill } from 'react-icons/bs';
+import {ChangeEvent, useState} from 'react';
+import {BsShareFill} from 'react-icons/bs';
-import Modal from 'components/Modal';
+import Modal from 'components/Models/Modal';
-import { useUserContext } from 'contexts/user';
+import {useUserContext} from 'contexts/user';
import Avatar from 'boring-avatars';
-import Button from 'components/Button';
-import Card from 'components/cards/Card';
-import { hoverColorMode, textColorMode } from 'config/colorMode';
+import Button from 'components/Models/Button';
+import Card from 'components/Models/cards/Card';
+import {hoverColorMode, textColorMode} from 'config/colorMode';
import colors from 'theme/foundations/colors';
-import type { IPCContact, IPCFile, IPCPermission } from 'types/types';
+import type {IPCContact, IPCFile, IPCPermission} from 'types/types';
type ShareFileProps = {
- file: IPCFile;
- onClosePopover: () => void;
+ file: IPCFile;
+ onClosePopover: () => void;
};
-const ShareFile = ({ file, onClosePopover }: ShareFileProps): JSX.Element => {
- const { user } = useUserContext();
+const ShareFile = ({file, onClosePopover}: ShareFileProps): JSX.Element => {
+ const {user} = useUserContext();
- const [contact, setContact] = useState(null);
- const [permission, setPermission] = useState('viewer');
- const [isLoading, setIsLoading] = useState(false);
- const { isOpen, onOpen, onClose } = useDisclosure();
+ const [contact, setContact] = useState(null);
+ const [permission, setPermission] = useState('viewer');
+ const [isLoading, setIsLoading] = useState(false);
+ const {isOpen, onOpen, onClose} = useDisclosure();
- const isDrawer = useBreakpointValue({ base: true, sm: false }) || false;
- const toast = useToast({ duration: 2000, isClosable: true });
+ const isDrawer = useBreakpointValue({base: true, sm: false}) || false;
+ const toast = useToast({duration: 2000, isClosable: true});
- const shareFile = async () => {
- setIsLoading(true);
- const share = await user.fullContact.files.addToContact(contact!.address, { ...file, permission });
+ const shareFile = async () => {
+ setIsLoading(true);
+ const share = await user.fullContact.files.addToContact(contact!.address, {...file, permission});
- toast({ title: share.message, status: share.success ? 'success' : 'error' });
- onUnmount();
- onClosePopover();
- };
+ toast({title: share.message, status: share.success ? 'success' : 'error'});
+ onUnmount();
+ onClosePopover();
+ };
- const onUnmount = () => {
- setIsLoading(false);
- setContact(null);
- setPermission('viewer');
- onClose();
- };
+ const onUnmount = () => {
+ setIsLoading(false);
+ setContact(null);
+ setPermission('viewer');
+ onClose();
+ };
- const textColor = useColorModeValue(textColorMode.light, textColorMode.dark);
- const hoverColor = useColorModeValue(hoverColorMode.light, hoverColorMode.dark);
- const { colorMode } = useColorMode();
+ const textColor = useColorModeValue(textColorMode.light, textColorMode.dark);
+ const hoverColor = useColorModeValue(hoverColorMode.light, hoverColorMode.dark);
+ const {colorMode} = useColorMode();
- if (file.permission !== 'owner') return <>>;
+ if (file.permission !== 'owner') return <>>;
- return (
-
-
-
- Share
-
-
- Share
-
- ) : (
- <>>
- )
- }
- >
-
- {!contact &&
- user.fullContact.contact.contacts.map((c) => {
- if (c.address !== user.account.address)
- return (
- setContact(c)}
- cursor="pointer"
- _hover={{ bg: hoverColor }}
- >
-
-
-
-
- {c.name}
-
-
- {c.address}
-
-
-
-
- );
- return ;
- })}
- {contact && (
-
- )}
-
-
-
- );
+ return (
+
+
+
+ Share
+
+
+ Share
+
+ ) : (
+ <>>
+ )
+ }
+ >
+
+ {!contact &&
+ user.fullContact.contact.contacts.map((c) => {
+ if (c.address !== user.account.address)
+ return (
+ setContact(c)}
+ cursor="pointer"
+ _hover={{bg: hoverColor}}
+ >
+
+
+
+
+ {c.name}
+
+
+ {c.address}
+
+
+
+
+ );
+ return ;
+ })}
+ {contact && (
+
+ )}
+
+
+
+ );
};
export default ShareFile;
diff --git a/src/components/file/UpdateContentFile.tsx b/src/components/file/UpdateContentFile.tsx
index 42fc8dbe..0c99a6a4 100644
--- a/src/components/file/UpdateContentFile.tsx
+++ b/src/components/file/UpdateContentFile.tsx
@@ -9,148 +9,148 @@ import {
useDisclosure,
useToast,
} from '@chakra-ui/react';
-import { ChangeEvent, useState } from 'react';
-import { GoSync } from 'react-icons/go';
+import {ChangeEvent, useState} from 'react';
+import {GoSync} from 'react-icons/go';
-import { getFileContent } from 'utils/fileManipulation';
+import {getFileContent} from 'utils/fileManipulation';
-import { useDriveContext } from 'contexts/drive';
-import { useUserContext } from 'contexts/user';
+import {useDriveContext} from 'contexts/drive';
+import {useUserContext} from 'contexts/user';
-import Button from 'components/Button';
-import Modal from 'components/Modal';
-import type { IPCFile } from 'types/types';
-import { textColorMode } from 'config/colorMode';
+import Button from 'components/Models/Button';
+import Modal from 'components/Models/Modal';
+import type {IPCFile} from 'types/types';
+import {textColorMode} from 'config/colorMode';
type UpdateContentFileProps = {
- file: IPCFile;
- onClosePopover: () => void;
+ file: IPCFile;
+ onClosePopover: () => void;
};
-const UpdateContentFile = ({ file, onClosePopover }: UpdateContentFileProps): JSX.Element => {
- const { user } = useUserContext();
- const { files, setFiles } = useDriveContext();
-
- const [fileEvent, setFileEvent] = useState | undefined>(undefined);
- const [isLoading, setIsLoading] = useState(false);
- const { isOpen, onOpen, onClose } = useDisclosure();
-
- const isDrawer = useBreakpointValue({ base: true, sm: false }) || false;
- const toast = useToast({ duration: 2000, isClosable: true });
-
- const updateContent = async () => {
- if (!fileEvent) return;
- setIsLoading(true);
-
- const oldFile = file;
- const fileContent = await getFileContent(fileEvent.target.files ? fileEvent.target.files[0] : []);
-
- if (!fileContent) return;
-
- const cryptoKey = await crypto.subtle.generateKey(
- {
- name: 'AES-GCM',
- length: 256,
- },
- true,
- ['encrypt', 'decrypt'],
- );
- const keyString = await crypto.subtle.exportKey('raw', cryptoKey);
- const iv = crypto.getRandomValues(new Uint8Array(128));
-
- const newFile: IPCFile = {
- ...oldFile,
- size: fileEvent.target.files![0].size,
- logs: [
- ...oldFile.logs,
- {
- action: 'Edit file content',
- date: Date.now(),
- },
- ],
- };
- const upload = await user.drive.upload(newFile, fileContent, { key: keyString, iv });
- if (!upload.success || !upload.file) {
- toast({ title: upload.message, status: upload.success ? 'success' : 'error' });
- } else {
- const updated = await user.fullContact.files.updateContent(upload.file);
- toast({ title: updated.message, status: updated.success ? 'success' : 'error' });
- if (updated.success && upload.file) {
- const index = files.indexOf(oldFile);
- if (index !== -1) files[index] = upload.file;
- setFiles(files);
-
- await user.drive.delete([oldFile.hash]);
- }
- }
- setIsLoading(false);
- onClose();
- onClosePopover();
- };
-
- const textColor = useColorModeValue(textColorMode.light, textColorMode.dark);
- const { colorMode } = useColorMode();
-
- if (!['owner', 'editor'].includes(file.permission)) return <>>;
-
- return (
-
-
-
- Update the content
-
-
- Upload new version
-
- }
- >
- ) => setFileEvent(e)}
- id="ipc-dashboard-input-new-file-content"
- />
-
-
- );
+const UpdateContentFile = ({file, onClosePopover}: UpdateContentFileProps): JSX.Element => {
+ const {user} = useUserContext();
+ const {files, setFiles} = useDriveContext();
+
+ const [fileEvent, setFileEvent] = useState | undefined>(undefined);
+ const [isLoading, setIsLoading] = useState(false);
+ const {isOpen, onOpen, onClose} = useDisclosure();
+
+ const isDrawer = useBreakpointValue({base: true, sm: false}) || false;
+ const toast = useToast({duration: 2000, isClosable: true});
+
+ const updateContent = async () => {
+ if (!fileEvent) return;
+ setIsLoading(true);
+
+ const oldFile = file;
+ const fileContent = await getFileContent(fileEvent.target.files ? fileEvent.target.files[0] : []);
+
+ if (!fileContent) return;
+
+ const cryptoKey = await crypto.subtle.generateKey(
+ {
+ name: 'AES-GCM',
+ length: 256,
+ },
+ true,
+ ['encrypt', 'decrypt'],
+ );
+ const keyString = await crypto.subtle.exportKey('raw', cryptoKey);
+ const iv = crypto.getRandomValues(new Uint8Array(128));
+
+ const newFile: IPCFile = {
+ ...oldFile,
+ size: fileEvent.target.files![0].size,
+ logs: [
+ ...oldFile.logs,
+ {
+ action: 'Edit file content',
+ date: Date.now(),
+ },
+ ],
+ };
+ const upload = await user.drive.upload(newFile, fileContent, {key: keyString, iv});
+ if (!upload.success || !upload.file) {
+ toast({title: upload.message, status: upload.success ? 'success' : 'error'});
+ } else {
+ const updated = await user.fullContact.files.updateContent(upload.file);
+ toast({title: updated.message, status: updated.success ? 'success' : 'error'});
+ if (updated.success && upload.file) {
+ const index = files.indexOf(oldFile);
+ if (index !== -1) files[index] = upload.file;
+ setFiles(files);
+
+ await user.drive.delete([oldFile.hash]);
+ }
+ }
+ setIsLoading(false);
+ onClose();
+ onClosePopover();
+ };
+
+ const textColor = useColorModeValue(textColorMode.light, textColorMode.dark);
+ const {colorMode} = useColorMode();
+
+ if (!['owner', 'editor'].includes(file.permission)) return <>>;
+
+ return (
+
+
+
+ Update the content
+
+
+ Upload new version
+
+ }
+ >
+ ) => setFileEvent(e)}
+ id="ipc-dashboard-input-new-file-content"
+ />
+
+
+ );
};
export default UpdateContentFile;
diff --git a/src/components/file/UploadFile.tsx b/src/components/file/UploadFile.tsx
index e724325a..43d29dc2 100644
--- a/src/components/file/UploadFile.tsx
+++ b/src/components/file/UploadFile.tsx
@@ -9,150 +9,150 @@ import {
useDisclosure,
useToast,
} from '@chakra-ui/react';
-import { ChangeEvent, useState } from 'react';
-import { AiOutlineFileAdd } from 'react-icons/ai';
+import {ChangeEvent, useState} from 'react';
+import {AiOutlineFileAdd} from 'react-icons/ai';
-import { extractFilename, getFileContent } from 'utils/fileManipulation';
+import {extractFilename, getFileContent} from 'utils/fileManipulation';
-import { useDriveContext } from 'contexts/drive';
-import { useUserContext } from 'contexts/user';
+import {useDriveContext} from 'contexts/drive';
+import {useUserContext} from 'contexts/user';
-import Button from 'components/Button';
-import Modal from 'components/Modal';
-import { textColorMode } from 'config/colorMode';
-import type { IPCFile } from 'types/types';
+import Button from 'components/Models/Button';
+import Modal from 'components/Models/Modal';
+import {textColorMode} from 'config/colorMode';
+import type {IPCFile} from 'types/types';
const UploadFile = (): JSX.Element => {
- const { user } = useUserContext();
- const { path, files, setFiles } = useDriveContext();
+ const {user} = useUserContext();
+ const {path, files, setFiles} = useDriveContext();
- const [fileEvent, setFileEvent] = useState | undefined>(undefined);
- const [isLoading, setIsLoading] = useState(false);
- const { isOpen, onOpen, onClose } = useDisclosure();
+ const [fileEvent, setFileEvent] = useState | undefined>(undefined);
+ const [isLoading, setIsLoading] = useState(false);
+ const {isOpen, onOpen, onClose} = useDisclosure();
- const isDrawer = useBreakpointValue({ base: true, sm: false }) || false;
- const toast = useToast({ duration: 2000, isClosable: true, id: 'ipc-upload-file' });
+ const isDrawer = useBreakpointValue({base: true, sm: false}) || false;
+ const toast = useToast({duration: 2000, isClosable: true, id: 'ipc-upload-file'});
- const uploadFile = async () => {
- if (!fileEvent) return;
- setIsLoading(true);
- const fileName = extractFilename(fileEvent.target.value);
- const fileContent = await getFileContent(fileEvent.target.files ? fileEvent.target.files[0] : []);
+ const uploadFile = async () => {
+ if (!fileEvent) return;
+ setIsLoading(true);
+ const fileName = extractFilename(fileEvent.target.value);
+ const fileContent = await getFileContent(fileEvent.target.files ? fileEvent.target.files[0] : []);
- if (!fileName || !fileContent) {
- toast({ title: 'Invalid file', status: 'error' });
- setFileEvent(undefined);
- setIsLoading(false);
- } else {
- const cryptoKey = await crypto.subtle.generateKey(
- {
- name: 'AES-GCM',
- length: 256,
- },
- true,
- ['encrypt', 'decrypt'],
- );
+ if (!fileName || !fileContent) {
+ toast({title: 'Invalid file', status: 'error'});
+ setFileEvent(undefined);
+ setIsLoading(false);
+ } else {
+ const cryptoKey = await crypto.subtle.generateKey(
+ {
+ name: 'AES-GCM',
+ length: 256,
+ },
+ true,
+ ['encrypt', 'decrypt'],
+ );
- const keyString = await crypto.subtle.exportKey('raw', cryptoKey);
- const iv = crypto.getRandomValues(new Uint8Array(128));
+ const keyString = await crypto.subtle.exportKey('raw', cryptoKey);
+ const iv = crypto.getRandomValues(new Uint8Array(128));
- const file: IPCFile = {
- id: crypto.randomUUID(),
- name: fileName,
- hash: '',
- size: fileEvent.target.files![0].size,
- createdAt: Date.now(),
- encryptInfos: { key: '', iv: '' },
- path,
- permission: 'owner',
- deletedAt: null,
- logs: [
- {
- action: 'File created',
- date: Date.now(),
- },
- ],
- };
+ const file: IPCFile = {
+ id: crypto.randomUUID(),
+ name: fileName,
+ hash: '',
+ size: fileEvent.target.files![0].size,
+ createdAt: Date.now(),
+ encryptInfos: {key: '', iv: ''},
+ path,
+ permission: 'owner',
+ deletedAt: null,
+ logs: [
+ {
+ action: 'File created',
+ date: Date.now(),
+ },
+ ],
+ };
- if (user.account) {
- const upload = await user.drive.upload(file, fileContent, { key: keyString, iv });
- if (!upload.success || !upload.file)
- toast({ title: upload.message, status: upload.success ? 'success' : 'error' });
- else {
- setFiles([...files, upload.file]);
- user.drive.files.push(upload.file);
+ if (user.account) {
+ const upload = await user.drive.upload(file, fileContent, {key: keyString, iv});
+ if (!upload.success || !upload.file)
+ toast({title: upload.message, status: upload.success ? 'success' : 'error'});
+ else {
+ setFiles([...files, upload.file]);
+ user.drive.files.push(upload.file);
- const shared = await user.fullContact.files.addToContact(user.account.address, upload.file);
- toast({ title: upload.message, status: shared.success ? 'success' : 'error' });
- }
- } else toast({ title: 'Failed to load account', status: 'error' });
- onClose();
- setFileEvent(undefined);
- setIsLoading(false);
- }
- };
+ const shared = await user.fullContact.files.addToContact(user.account.address, upload.file);
+ toast({title: upload.message, status: shared.success ? 'success' : 'error'});
+ }
+ } else toast({title: 'Failed to load account', status: 'error'});
+ onClose();
+ setFileEvent(undefined);
+ setIsLoading(false);
+ }
+ };
- const textColor = useColorModeValue(textColorMode.light, textColorMode.dark);
- const { colorMode } = useColorMode();
+ const textColor = useColorModeValue(textColorMode.light, textColorMode.dark);
+ const {colorMode} = useColorMode();
- return (
-
-
-
- Upload a file
-
-
- Upload file
-
- }
- >
- ) => setFileEvent(e)}
- id="ipc-dashboard-upload-file"
- />
-
-
- );
+ return (
+
+
+
+ Upload a file
+
+
+ Upload file
+
+ }
+ >
+ ) => setFileEvent(e)}
+ id="ipc-dashboard-upload-file"
+ />
+
+
+ );
};
export default UploadFile;
diff --git a/src/components/folder/CreateFolder.tsx b/src/components/folder/CreateFolder.tsx
index f02626a4..e8a406d6 100644
--- a/src/components/folder/CreateFolder.tsx
+++ b/src/components/folder/CreateFolder.tsx
@@ -10,126 +10,126 @@ import {
useToast,
VStack,
} from '@chakra-ui/react';
-import { ChangeEvent, useState } from 'react';
-import { AiOutlineFolderAdd } from 'react-icons/ai';
+import {ChangeEvent, useState} from 'react';
+import {AiOutlineFolderAdd} from 'react-icons/ai';
-import { useDriveContext } from 'contexts/drive';
-import { useUserContext } from 'contexts/user';
-import { IPCFolder } from 'types/types';
+import {useDriveContext} from 'contexts/drive';
+import {useUserContext} from 'contexts/user';
+import {IPCFolder} from 'types/types';
-import Button from 'components/Button';
+import Button from 'components/Models/Button';
-import { textColorMode } from 'config/colorMode';
+import {textColorMode} from 'config/colorMode';
-import Modal from '../Modal';
+import Modal from '../Models/Modal';
const CreateFolder = (): JSX.Element => {
- const { user } = useUserContext();
- const { folders, setFolders, path } = useDriveContext();
+ const {user} = useUserContext();
+ const {folders, setFolders, path} = useDriveContext();
- const [name, setName] = useState('');
- const [isLoading, setIsLoading] = useState(false);
- const { isOpen, onOpen, onClose } = useDisclosure();
+ const [name, setName] = useState('');
+ const [isLoading, setIsLoading] = useState(false);
+ const {isOpen, onOpen, onClose} = useDisclosure();
- const isDrawer = useBreakpointValue({ base: true, sm: false }) || false;
- const toast = useToast({ duration: 2000, isClosable: true });
+ const isDrawer = useBreakpointValue({base: true, sm: false}) || false;
+ const toast = useToast({duration: 2000, isClosable: true});
- const createFolder = async () => {
- if (!name || name.includes('/')) {
- toast({ title: 'Invalid folder name', status: 'error' });
- return;
- }
- setIsLoading(true);
+ const createFolder = async () => {
+ if (!name || name.includes('/')) {
+ toast({title: 'Invalid folder name', status: 'error'});
+ return;
+ }
+ setIsLoading(true);
- const folder: IPCFolder = {
- name,
- path,
- createdAt: Date.now(),
- logs: [
- {
- action: 'Folder created',
- date: Date.now(),
- },
- ],
- };
+ const folder: IPCFolder = {
+ name,
+ path,
+ createdAt: Date.now(),
+ logs: [
+ {
+ action: 'Folder created',
+ date: Date.now(),
+ },
+ ],
+ };
- const created = await user.fullContact.folders.create(folder);
- toast({ title: created.message, status: created.success ? 'success' : 'error' });
- if (created.success) {
- setFolders([...folders, folder]);
- }
+ const created = await user.fullContact.folders.create(folder);
+ toast({title: created.message, status: created.success ? 'success' : 'error'});
+ if (created.success) {
+ setFolders([...folders, folder]);
+ }
- setIsLoading(false);
- setName('');
- onClose();
- };
+ setIsLoading(false);
+ setName('');
+ onClose();
+ };
- const textColor = useColorModeValue(textColorMode.light, textColorMode.dark);
- const { colorMode } = useColorMode();
+ const textColor = useColorModeValue(textColorMode.light, textColorMode.dark);
+ const {colorMode} = useColorMode();
- return (
-
-
-
- Create a folder
-
-
- Create Folder
-
- }
- >
-
-
- The name of the folder
-
- ) => setName(e.target.value)}
- id="ipc-dashboard-input-folder-name"
- />
-
-
-
- );
+ return (
+
+
+
+ Create a folder
+
+
+ Create Folder
+
+ }
+ >
+
+
+ The name of the folder
+
+ ) => setName(e.target.value)}
+ id="ipc-dashboard-input-folder-name"
+ />
+
+
+
+ );
};
export default CreateFolder;
diff --git a/src/components/folder/DeleteFolder.tsx b/src/components/folder/DeleteFolder.tsx
index e3edb085..6e48536d 100644
--- a/src/components/folder/DeleteFolder.tsx
+++ b/src/components/folder/DeleteFolder.tsx
@@ -8,116 +8,116 @@ import {
useDisclosure,
useToast,
} from '@chakra-ui/react';
-import { useEffect, useState } from 'react';
-import { IoTrashSharp } from 'react-icons/io5';
+import {useEffect, useState} from 'react';
+import {IoTrashSharp} from 'react-icons/io5';
-import Modal from 'components/Modal';
+import Modal from 'components/Models/Modal';
-import { useDriveContext } from 'contexts/drive';
-import { useUserContext } from 'contexts/user';
+import {useDriveContext} from 'contexts/drive';
+import {useUserContext} from 'contexts/user';
-import Button from 'components/Button';
-import type { IPCFolder } from 'types/types';
-import { textColorMode } from 'config/colorMode';
+import Button from 'components/Models/Button';
+import type {IPCFolder} from 'types/types';
+import {textColorMode} from 'config/colorMode';
type DeleteFolderProps = {
- folder: IPCFolder;
+ folder: IPCFolder;
};
-const DeleteFolder = ({ folder }: DeleteFolderProps): JSX.Element => {
- const { user } = useUserContext();
- const { folders, setFolders, setFiles } = useDriveContext();
+const DeleteFolder = ({folder}: DeleteFolderProps): JSX.Element => {
+ const {user} = useUserContext();
+ const {folders, setFolders, setFiles} = useDriveContext();
- const isDrawer = useBreakpointValue({ base: true, sm: false }) || false;
- const toast = useToast({ duration: 2000, isClosable: true });
- const textColor = useColorModeValue(textColorMode.light, textColorMode.dark);
- const { colorMode } = useColorMode();
+ const isDrawer = useBreakpointValue({base: true, sm: false}) || false;
+ const toast = useToast({duration: 2000, isClosable: true});
+ const textColor = useColorModeValue(textColorMode.light, textColorMode.dark);
+ const {colorMode} = useColorMode();
- const [hasPermission, setHasPermission] = useState(false);
- const { isOpen, onOpen, onClose } = useDisclosure();
+ const [hasPermission, setHasPermission] = useState(false);
+ const {isOpen, onOpen, onClose} = useDisclosure();
- useEffect(() => {
- setHasPermission(true);
- return () => setHasPermission(false);
- }, []);
+ useEffect(() => {
+ setHasPermission(true);
+ return () => setHasPermission(false);
+ }, []);
- const deleteFolder = async () => {
- const fullPath = `${folder.path}${folder.name}/`;
+ const deleteFolder = async () => {
+ const fullPath = `${folder.path}${folder.name}/`;
- if (user.account) {
- const foldersResponse = await user.fullContact.folders.delete(folder);
- setFolders(
- folders.filter(
- (f) => !f.path.startsWith(fullPath) && (f.path !== folder.path || f.createdAt !== folder.createdAt),
- ),
- );
+ if (user.account) {
+ const foldersResponse = await user.fullContact.folders.delete(folder);
+ setFolders(
+ folders.filter(
+ (f) => !f.path.startsWith(fullPath) && (f.path !== folder.path || f.createdAt !== folder.createdAt),
+ ),
+ );
- if (foldersResponse.success) {
- const filesToDelete = user.drive.files.filter((file) => file.path.startsWith(fullPath));
- if (filesToDelete.length > 0) {
- const filesResponse = await user.drive.delete(filesToDelete.map((file) => file.hash));
- await user.fullContact.files.delete(
- filesToDelete.map((file) => file.id),
- [],
- );
- foldersResponse.success = filesResponse.success;
- }
- }
- toast({ title: foldersResponse.message, status: foldersResponse.success ? 'success' : 'error' });
- } else {
- toast({ title: 'Failed to load account', status: 'error' });
- }
- setFiles(user.drive.files);
- onClose();
- };
+ if (foldersResponse.success) {
+ const filesToDelete = user.drive.files.filter((file) => file.path.startsWith(fullPath));
+ if (filesToDelete.length > 0) {
+ const filesResponse = await user.drive.delete(filesToDelete.map((file) => file.hash));
+ await user.fullContact.files.delete(
+ filesToDelete.map((file) => file.id),
+ [],
+ );
+ foldersResponse.success = filesResponse.success;
+ }
+ }
+ toast({title: foldersResponse.message, status: foldersResponse.success ? 'success' : 'error'});
+ } else {
+ toast({title: 'Failed to load account', status: 'error'});
+ }
+ setFiles(user.drive.files);
+ onClose();
+ };
- if (!hasPermission) return <>>;
+ if (!hasPermission) return <>>;
- return (
-
-
-
- Delete
-
-
- Delete
-
- }
- >
- Are you sure you want to delete this folder and all it's content ?
-
-
- );
+ return (
+
+
+
+ Delete
+
+
+ Delete
+
+ }
+ >
+ Are you sure you want to delete this folder and all it's content ?
+
+
+ );
};
export default DeleteFolder;
diff --git a/src/components/folder/MoveFolder.tsx b/src/components/folder/MoveFolder.tsx
index 52c2da21..eddc8936 100644
--- a/src/components/folder/MoveFolder.tsx
+++ b/src/components/folder/MoveFolder.tsx
@@ -1,4 +1,4 @@
-import { ArrowBackIcon, ChevronRightIcon } from '@chakra-ui/icons';
+import {ArrowBackIcon, ChevronRightIcon} from '@chakra-ui/icons';
import {
Divider,
HStack,
@@ -10,182 +10,182 @@ import {
useDisclosure,
useToast,
} from '@chakra-ui/react';
-import { useEffect, useState } from 'react';
-import { FcFolder } from 'react-icons/fc';
-import { MdOutlineDriveFileMove } from 'react-icons/md';
+import {useEffect, useState} from 'react';
+import {FcFolder} from 'react-icons/fc';
+import {MdOutlineDriveFileMove} from 'react-icons/md';
-import Modal from 'components/Modal';
+import Modal from 'components/Models/Modal';
-import { useDriveContext } from 'contexts/drive';
-import { useUserContext } from 'contexts/user';
+import {useDriveContext} from 'contexts/drive';
+import {useUserContext} from 'contexts/user';
-import Button from 'components/Button';
-import type { IPCFolder } from 'types/types';
-import { textColorMode } from 'config/colorMode';
+import Button from 'components/Models/Button';
+import type {IPCFolder} from 'types/types';
+import {textColorMode} from 'config/colorMode';
type MoveFolderProps = {
- folder: IPCFolder;
+ folder: IPCFolder;
};
-const MoveFolder = ({ folder }: MoveFolderProps): JSX.Element => {
- const { user } = useUserContext();
- const { files, setFiles, folders, setFolders } = useDriveContext();
- const [hasPermission, setHasPermission] = useState(false);
- const toast = useToast({ duration: 2000, isClosable: true });
-
- const isDrawer = useBreakpointValue({ base: true, sm: false }) || false;
-
- const [newPath, setNewPath] = useState('/');
- const [isLoading, setIsLoading] = useState(false);
- const { isOpen, onOpen, onClose } = useDisclosure();
-
- useEffect(() => {
- setHasPermission(true);
- return () => {
- setHasPermission(false);
- setNewPath('/');
- };
- }, []);
-
- const moveFolder = async () => {
- setIsLoading(true);
- const fullPath = `${folder.path}${folder.name}/`;
-
- const moved = await user.fullContact.folders.move(folder, newPath);
-
- toast({ title: moved.message, status: moved.success ? 'success' : 'error' });
- setFiles(
- files.map((f) => {
- if (f.path.startsWith(fullPath))
- return {
- ...f,
- path: f.path.replace(folder.path, newPath),
- logs: [
- ...f.logs,
- {
- action: `Moved folder to ${fullPath}`,
- date: Date.now(),
- },
- ],
- };
- return f;
- }),
- );
-
- setFolders(
- folders.map((f) => {
- if (f.path.startsWith(fullPath)) return { ...f, path: f.path.replace(folder.path, newPath) };
- if (f === folder) return { ...f, path: newPath };
- return f;
- }),
- );
-
- setNewPath('/');
- setIsLoading(false);
- onClose();
- };
-
- const textColor = useColorModeValue(textColorMode.light, textColorMode.dark);
- const { colorMode } = useColorMode();
-
- if (!hasPermission) return <>>;
-
- return (
-
-
-
- Move to...
-
-
- Move
-
- }
- >
- <>
-
-
-
- {folders.filter((f) => f.path === newPath && f.createdAt !== folder.createdAt).length ? (
- folders
- .filter((f) => f.path === newPath)
- .map((f) => (
-
-
-
-
-
-
-
- ))
- ) : (
- <>
-
-
-
-
-
- >
- )}
- >
-
-
- );
+const MoveFolder = ({folder}: MoveFolderProps): JSX.Element => {
+ const {user} = useUserContext();
+ const {files, setFiles, folders, setFolders} = useDriveContext();
+ const [hasPermission, setHasPermission] = useState(false);
+ const toast = useToast({duration: 2000, isClosable: true});
+
+ const isDrawer = useBreakpointValue({base: true, sm: false}) || false;
+
+ const [newPath, setNewPath] = useState('/');
+ const [isLoading, setIsLoading] = useState(false);
+ const {isOpen, onOpen, onClose} = useDisclosure();
+
+ useEffect(() => {
+ setHasPermission(true);
+ return () => {
+ setHasPermission(false);
+ setNewPath('/');
+ };
+ }, []);
+
+ const moveFolder = async () => {
+ setIsLoading(true);
+ const fullPath = `${folder.path}${folder.name}/`;
+
+ const moved = await user.fullContact.folders.move(folder, newPath);
+
+ toast({title: moved.message, status: moved.success ? 'success' : 'error'});
+ setFiles(
+ files.map((f) => {
+ if (f.path.startsWith(fullPath))
+ return {
+ ...f,
+ path: f.path.replace(folder.path, newPath),
+ logs: [
+ ...f.logs,
+ {
+ action: `Moved folder to ${fullPath}`,
+ date: Date.now(),
+ },
+ ],
+ };
+ return f;
+ }),
+ );
+
+ setFolders(
+ folders.map((f) => {
+ if (f.path.startsWith(fullPath)) return {...f, path: f.path.replace(folder.path, newPath)};
+ if (f === folder) return {...f, path: newPath};
+ return f;
+ }),
+ );
+
+ setNewPath('/');
+ setIsLoading(false);
+ onClose();
+ };
+
+ const textColor = useColorModeValue(textColorMode.light, textColorMode.dark);
+ const {colorMode} = useColorMode();
+
+ if (!hasPermission) return <>>;
+
+ return (
+
+
+
+ Move to...
+
+
+ Move
+
+ }
+ >
+ <>
+
+
+
+ {folders.filter((f) => f.path === newPath && f.createdAt !== folder.createdAt).length ? (
+ folders
+ .filter((f) => f.path === newPath)
+ .map((f) => (
+
+
+
+
+
+
+
+ ))
+ ) : (
+ <>
+
+
+
+
+
+ >
+ )}
+ >
+
+
+ );
};
export default MoveFolder;
diff --git a/src/components/landingPage/FeaturesSection.tsx b/src/components/landingPage/FeaturesSection.tsx
deleted file mode 100644
index 119a9e95..00000000
--- a/src/components/landingPage/FeaturesSection.tsx
+++ /dev/null
@@ -1,111 +0,0 @@
-import { Box, HStack, Img, Stack, Text, useBreakpointValue, useColorModeValue, VStack } from '@chakra-ui/react';
-import { useRouter } from 'next/router';
-
-import { IoRocketSharp } from 'react-icons/io5';
-
-import Button from 'components/Button';
-
-import colors from 'theme/foundations/colors';
-import { textColorMode } from 'config/colorMode';
-
-const FeatureCard = ({ title, icon, id }: { title: string; icon: string; id: string }): JSX.Element => {
- const isMobile: boolean = useBreakpointValue({ base: true, sm: false }) || false;
-
- return (
-
-
- {title}
-
- );
-};
-
-const FeaturesSection = (): JSX.Element => {
- const router = useRouter();
- const isMobile: boolean = useBreakpointValue({ base: true, lg: false }) || false;
-
- const textColor = useColorModeValue(textColorMode.light, textColorMode.dark);
-
- const features: { icon: string; title: string; id: string }[] = [
- {
- icon: '/assets/icons/upload-files-logo.svg',
- title: 'Upload & Download Files',
- id: 'ipc-landing-feature-upload-files',
- },
- {
- icon: '/assets/icons/folder-logo.svg',
- title: 'Folder Management',
- id: 'ipc-landing-folder-management',
- },
- {
- icon: '/assets/icons/share-logo.svg',
- title: 'Share Files',
- id: 'ipc-landing-share-files',
- },
- {
- icon: '/assets/icons/code-logo.svg',
- title: 'Upload & Run Programs',
- id: 'ipc-landing-programs',
- },
- {
- icon: '/assets/icons/contact-logo.svg',
- title: 'Contact Management',
- id: 'ipc-landing-contact-management',
- },
- ];
-
- return (
-
-
-
- Our{' '}
-
- Features
-
-
- {features.map((feature) => (
-
- ))}
-
-
-
-
- Are you ready?
-
-
-
- {!isMobile && (
-
-
-
- )}
-
- );
-};
-
-export default FeaturesSection;
diff --git a/src/components/landingPage/HeadingSection.tsx b/src/components/landingPage/HeadingSection.tsx
deleted file mode 100644
index 305765e6..00000000
--- a/src/components/landingPage/HeadingSection.tsx
+++ /dev/null
@@ -1,77 +0,0 @@
-import { Box, Img, Text, useBreakpointValue, useColorModeValue, VStack } from '@chakra-ui/react';
-import { useRouter } from 'next/router';
-
-import { IoRocketSharp } from 'react-icons/io5';
-
-import Button from 'components/Button';
-
-import colors from 'theme/foundations/colors';
-import { textColorMode } from 'config/colorMode';
-
-const HeadingSection = (): JSX.Element => {
- const router = useRouter();
- const isMobile: boolean = useBreakpointValue({ base: true, lg: false }) || false;
-
- const textColor = useColorModeValue(textColorMode.light, textColorMode.dark);
-
- return (
-
-
-
- The first distributed cloud{' '}
-
- unsealing
- {' '}
- your data.
-
-
- Build on top of Aleph, the next generation network of{' '}
-
- distributed
- {' '}
- big data applications.
-
-
-
- {!isMobile && (
- <>
-
-
-
-
-
-
- >
- )}
-
- );
-};
-
-export default HeadingSection;
diff --git a/src/components/landingPage/NavBar.tsx b/src/components/landingPage/NavBar.tsx
deleted file mode 100644
index 88c42336..00000000
--- a/src/components/landingPage/NavBar.tsx
+++ /dev/null
@@ -1,43 +0,0 @@
-import { HStack, Text, useBreakpointValue, VStack } from '@chakra-ui/react';
-import { useRouter } from 'next/router';
-
-import { IoRocketSharp } from 'react-icons/io5';
-
-import Button from 'components/Button';
-
-const NavBar = (): JSX.Element => {
- const router = useRouter();
- const buttonDisplayable: boolean = useBreakpointValue({ base: false, lg: true }) || false;
-
- return (
- <>
- {buttonDisplayable ? (
-
-
- Inter Planetary Cloud
-
-
-
- ) : (
-
-
- Inter Planetary Cloud
-
-
- )}
- >
- );
-};
-
-export default NavBar;
diff --git a/src/components/navigation/ResponsiveBar.tsx b/src/components/navigation/ResponsiveBar.tsx
deleted file mode 100644
index c05ec1f0..00000000
--- a/src/components/navigation/ResponsiveBar.tsx
+++ /dev/null
@@ -1,94 +0,0 @@
-import { HamburgerIcon } from '@chakra-ui/icons';
-import {
- Box,
- Button,
- Drawer,
- DrawerCloseButton,
- DrawerContent,
- DrawerOverlay,
- HStack,
- Icon,
- Text,
- useBreakpointValue,
- useColorMode,
- useColorModeValue,
- useDisclosure,
-} from '@chakra-ui/react';
-import { useRouter } from 'next/router';
-
-import Sidebar from 'components/navigation/SideBar';
-
-import colors from 'theme/foundations/colors';
-
-import { useUserContext } from 'contexts/user';
-
-import ProfileBadge from 'components/profile/ProfileBadge';
-import { bgColorMode, textColorMode } from 'config/colorMode';
-
-type BarProps = {
- isOpen: boolean;
- onClose: () => void;
-};
-
-export const BarWithDrawer = ({ isOpen, onClose }: BarProps): JSX.Element => {
- const bgColor = useColorModeValue(bgColorMode.light, bgColorMode.dark);
-
- return (
-
-
-
-
-
-
-
- );
-};
-
-export const ResponsiveBar = (): JSX.Element => {
- const { user } = useUserContext();
-
- const router = useRouter();
- const bgColor = useColorModeValue(bgColorMode.light, bgColorMode.dark);
- const textColor = useColorModeValue(textColorMode.light, textColorMode.dark);
- const { colorMode } = useColorMode();
- const isDrawerNeeded: boolean = useBreakpointValue({ base: true, lg: false }) || false;
- const { isOpen, onOpen, onClose } = useDisclosure();
-
- return (
-
-
-
- {isDrawerNeeded && (
-
- )}
-
-
-
-
- {!isDrawerNeeded && (
-
- )}
-
- {!isDrawerNeeded ? : }
-
- );
-};
diff --git a/src/components/navigation/SideBar.tsx b/src/components/navigation/SideBar.tsx
deleted file mode 100644
index 94feeb60..00000000
--- a/src/components/navigation/SideBar.tsx
+++ /dev/null
@@ -1,128 +0,0 @@
-import { Text, useBreakpointValue, useColorMode, useColorModeValue, VStack } from '@chakra-ui/react';
-import { BsCodeSlash, BsPeople, BsPerson, BsPlusLg, BsShareFill } from 'react-icons/bs';
-import { IoTrashOutline } from 'react-icons/io5';
-import { RiHardDrive2Line } from 'react-icons/ri';
-
-import colors from 'theme/foundations/colors';
-
-import Button from 'components/Button';
-import DeployGithub from 'components/computing/github/DeployGithub';
-import DeployProgram from 'components/computing/programs/DeployProgram';
-import UploadFile from 'components/file/UploadFile';
-import CreateFolder from 'components/folder/CreateFolder';
-
-import { useUserContext } from 'contexts/user';
-
-import useToggle from 'hooks/useToggle';
-
-import ProfileBadge from 'components/profile/ProfileBadge';
-import { bgColorMode } from 'config/colorMode';
-import { NavbarType } from 'types/navbar';
-import NavbarItem from './NavbarItem';
-
-const SideBar = (): JSX.Element => {
- const { user } = useUserContext();
- const isDrawerNeeded: boolean = useBreakpointValue({ base: true, lg: false }) || false;
- const { toggle, toggleHandler } = useToggle();
- const bgColor = useColorModeValue(bgColorMode.light, bgColorMode.dark);
- const { colorMode } = useColorMode();
-
- const tabs: NavbarType[] = [
- {
- label: 'My Drive',
- url: '/drive',
- icon: RiHardDrive2Line,
- },
- {
- label: 'Shared with me',
- url: '/drive/shared',
- icon: BsShareFill,
- },
- {
- label: 'My Programs',
- url: '/drive/programs',
- icon: BsCodeSlash,
- },
- {
- label: 'Contacts',
- url: '/drive/contacts',
- icon: BsPeople,
- },
- {
- label: 'Trash',
- url: '/drive/trash',
- icon: IoTrashOutline,
- },
- {
- label: 'Account',
- url: '/drive/account',
- icon: BsPerson,
- },
- ];
-
- return (
-
-
-
-
- {isDrawerNeeded && (
-
- )}
-
-
- {toggle && (
-
-
-
-
-
-
- )}
-
-
-
- {tabs.map((item) => (
-
- ))}
-
- {isDrawerNeeded && (
-
- )}
-
-
- );
-};
-
-export default SideBar;
diff --git a/src/components/programs/DeleteProgram.tsx b/src/components/programs/DeleteProgram.tsx
index 91b89e34..b0818827 100644
--- a/src/components/programs/DeleteProgram.tsx
+++ b/src/components/programs/DeleteProgram.tsx
@@ -7,91 +7,91 @@ import {
useColorModeValue,
useDisclosure,
} from '@chakra-ui/react';
-import { useState } from 'react';
-import { IoTrashSharp } from 'react-icons/io5';
+import {useState} from 'react';
+import {IoTrashSharp} from 'react-icons/io5';
-import { useDriveContext } from 'contexts/drive';
-import { useUserContext } from 'contexts/user';
+import {useDriveContext} from 'contexts/drive';
+import {useUserContext} from 'contexts/user';
-import Button from 'components/Button';
-import Modal from 'components/Modal';
-import type { IPCProgram } from 'types/types';
-import { textColorMode } from 'config/colorMode';
+import Button from 'components/Models/Button';
+import Modal from 'components/Models/Modal';
+import type {IPCProgram} from 'types/types';
+import {textColorMode} from 'config/colorMode';
type DeleteProgramProps = {
- program: IPCProgram;
+ program: IPCProgram;
};
-const DeleteProgram = ({ program }: DeleteProgramProps): JSX.Element => {
- const { user } = useUserContext();
- const { programs, setPrograms } = useDriveContext();
+const DeleteProgram = ({program}: DeleteProgramProps): JSX.Element => {
+ const {user} = useUserContext();
+ const {programs, setPrograms} = useDriveContext();
- const [isLoading, setIsLoading] = useState(false);
- const { isOpen, onOpen, onClose } = useDisclosure();
+ const [isLoading, setIsLoading] = useState(false);
+ const {isOpen, onOpen, onClose} = useDisclosure();
- const isDrawer = useBreakpointValue({ base: true, sm: false }) || false;
- const textColor = useColorModeValue(textColorMode.light, textColorMode.dark);
- const { colorMode } = useColorMode();
+ const isDrawer = useBreakpointValue({base: true, sm: false}) || false;
+ const textColor = useColorModeValue(textColorMode.light, textColorMode.dark);
+ const {colorMode} = useColorMode();
- const deleteActualProgram = async () => {
- setIsLoading(true);
- const update = await user.fullContact.computing.delete(program.hash);
- if (update.success) setPrograms(programs.filter((f) => f.hash !== program.hash));
- setIsLoading(false);
- onClose();
- };
+ const deleteActualProgram = async () => {
+ setIsLoading(true);
+ const update = await user.fullContact.computing.delete(program.hash);
+ if (update.success) setPrograms(programs.filter((f) => f.hash !== program.hash));
+ setIsLoading(false);
+ onClose();
+ };
- return (
-
-
-
- Delete
-
-
- Delete
-
- }
- >
- Are you sure you want to delete this program?
-
-
- );
+ return (
+
+
+
+ Delete
+
+
+ Delete
+
+ }
+ >
+ Are you sure you want to delete this program?
+
+
+ );
};
export default DeleteProgram;
diff --git a/src/components/programs/RenameProgram.tsx b/src/components/programs/RenameProgram.tsx
index 078b4223..c1955b14 100644
--- a/src/components/programs/RenameProgram.tsx
+++ b/src/components/programs/RenameProgram.tsx
@@ -11,118 +11,118 @@ import {
useDisclosure,
} from '@chakra-ui/react';
-import { BsPencil } from 'react-icons/bs';
+import {BsPencil} from 'react-icons/bs';
-import type { IPCProgram } from 'types/types';
+import type {IPCProgram} from 'types/types';
-import { textColorMode } from 'config/colorMode';
+import {textColorMode} from 'config/colorMode';
-import Button from 'components/Button';
-import Modal from 'components/Modal';
+import Button from 'components/Models/Button';
+import Modal from 'components/Models/Modal';
-import { ChangeEvent, useState } from 'react';
+import {ChangeEvent, useState} from 'react';
-import { useDriveContext } from 'contexts/drive';
-import { useUserContext } from 'contexts/user';
+import {useDriveContext} from 'contexts/drive';
+import {useUserContext} from 'contexts/user';
type RenameProgramProps = {
- program: IPCProgram;
+ program: IPCProgram;
};
-const RenameProgram = ({ program }: RenameProgramProps) => {
- const isDrawer = useBreakpointValue({ base: true, sm: false }) || false;
- const { isOpen, onOpen, onClose } = useDisclosure();
- const textColor = useColorModeValue(textColorMode.light, textColorMode.dark);
- const [name, setName] = useState('');
- const { colorMode } = useColorMode();
- const [isLoading, setIsLoading] = useState(false);
+const RenameProgram = ({program}: RenameProgramProps) => {
+ const isDrawer = useBreakpointValue({base: true, sm: false}) || false;
+ const {isOpen, onOpen, onClose} = useDisclosure();
+ const textColor = useColorModeValue(textColorMode.light, textColorMode.dark);
+ const [name, setName] = useState('');
+ const {colorMode} = useColorMode();
+ const [isLoading, setIsLoading] = useState(false);
- const { user } = useUserContext();
- const { programs, setPrograms } = useDriveContext();
+ const {user} = useUserContext();
+ const {programs, setPrograms} = useDriveContext();
- const updateProgramName = async () => {
- setIsLoading(true);
- if (name) {
- const update = await user.fullContact.computing.updateName(program, name);
- if (update.success) {
- const index = programs.indexOf(program);
- if (index !== -1) {
- programs[index].name = name;
- programs[index].logs.push({
- action: `Renamed program to ${name}`,
- date: Date.now(),
- });
- }
- setPrograms([...programs]);
- }
- }
- setName('');
- setIsLoading(false);
- onClose();
- };
+ const updateProgramName = async () => {
+ setIsLoading(true);
+ if (name) {
+ const update = await user.fullContact.computing.updateName(program, name);
+ if (update.success) {
+ const index = programs.indexOf(program);
+ if (index !== -1) {
+ programs[index].name = name;
+ programs[index].logs.push({
+ action: `Renamed program to ${name}`,
+ date: Date.now(),
+ });
+ }
+ setPrograms([...programs]);
+ }
+ }
+ setName('');
+ setIsLoading(false);
+ onClose();
+ };
- return (
-
-
-
- Rename
-
-
- OK
-
- }
- >
-
- New program name
- ) => setName(e.target.value)}
- id="ipc-dashboard-input-update-programame"
- />
-
-
-
- );
+ return (
+
+
+
+ Rename
+
+
+ OK
+
+ }
+ >
+
+ New program name
+ ) => setName(e.target.value)}
+ id="ipc-dashboard-input-update-programame"
+ />
+
+
+
+ );
};
export default RenameProgram;
diff --git a/src/components/programs/ShareProgram.tsx b/src/components/programs/ShareProgram.tsx
index c6fe734a..1352ea2c 100644
--- a/src/components/programs/ShareProgram.tsx
+++ b/src/components/programs/ShareProgram.tsx
@@ -11,155 +11,155 @@ import {
useToast,
VStack,
} from '@chakra-ui/react';
-import { ChangeEvent, useState } from 'react';
-import { BsShareFill } from 'react-icons/bs';
+import {ChangeEvent, useState} from 'react';
+import {BsShareFill} from 'react-icons/bs';
-import Modal from 'components/Modal';
+import Modal from 'components/Models/Modal';
-import { useUserContext } from 'contexts/user';
+import {useUserContext} from 'contexts/user';
import Avatar from 'boring-avatars';
-import Button from 'components/Button';
-import Card from 'components/cards/Card';
-import { hoverColorMode, textColorMode } from 'config/colorMode';
+import Button from 'components/Models/Button';
+import Card from 'components/Models/cards/Card';
+import {hoverColorMode, textColorMode} from 'config/colorMode';
import colors from 'theme/foundations/colors';
-import type { IPCContact, IPCProgram, IPCPermission } from 'types/types';
+import type {IPCContact, IPCPermission, IPCProgram} from 'types/types';
type ShareProgramProps = {
- program: IPCProgram;
+ program: IPCProgram;
};
-const ShareProgram = ({ program }: ShareProgramProps): JSX.Element => {
- const { user } = useUserContext();
+const ShareProgram = ({program}: ShareProgramProps): JSX.Element => {
+ const {user} = useUserContext();
- const [contact, setContact] = useState(null);
- const [permission, setPermission] = useState('viewer');
- const [isLoading, setIsLoading] = useState(false);
- const { isOpen, onOpen, onClose } = useDisclosure();
+ const [contact, setContact] = useState(null);
+ const [permission, setPermission] = useState('viewer');
+ const [isLoading, setIsLoading] = useState(false);
+ const {isOpen, onOpen, onClose} = useDisclosure();
- const isDrawer = useBreakpointValue({ base: true, sm: false }) || false;
- const toast = useToast({ duration: 2000, isClosable: true });
+ const isDrawer = useBreakpointValue({base: true, sm: false}) || false;
+ const toast = useToast({duration: 2000, isClosable: true});
- const shareProgram = async () => {
- setIsLoading(true);
- const share = await user.fullContact.computing.addToContact(contact!.address, { ...program, permission });
- toast({ title: share.message, status: share.success ? 'success' : 'error' });
- onUnmount();
- };
+ const shareProgram = async () => {
+ setIsLoading(true);
+ const share = await user.fullContact.computing.addToContact(contact!.address, {...program, permission});
+ toast({title: share.message, status: share.success ? 'success' : 'error'});
+ onUnmount();
+ };
- const onUnmount = () => {
- setIsLoading(false);
- setContact(null);
- setPermission('viewer');
- onClose();
- };
+ const onUnmount = () => {
+ setIsLoading(false);
+ setContact(null);
+ setPermission('viewer');
+ onClose();
+ };
- const textColor = useColorModeValue(textColorMode.light, textColorMode.dark);
- const hoverColor = useColorModeValue(hoverColorMode.light, hoverColorMode.dark);
- const { colorMode } = useColorMode();
+ const textColor = useColorModeValue(textColorMode.light, textColorMode.dark);
+ const hoverColor = useColorModeValue(hoverColorMode.light, hoverColorMode.dark);
+ const {colorMode} = useColorMode();
- return (
-
-
-
- Share
-
-
- Share
-
- ) : (
- <>>
- )
- }
- >
-
- {!contact &&
- user.fullContact.contact.contacts.map((c) => {
- if (c.address !== user.account.address)
- return (
- setContact(c)}
- cursor="pointer"
- _hover={{ bg: hoverColor }}
- >
-
-
-
-
- {c.name}
-
-
- {c.address}
-
-
-
-
- );
- return ;
- })}
- {contact && (
-
- )}
-
-
-
- );
+ return (
+
+
+
+ Share
+
+
+ Share
+
+ ) : (
+ <>>
+ )
+ }
+ >
+
+ {!contact &&
+ user.fullContact.contact.contacts.map((c) => {
+ if (c.address !== user.account.address)
+ return (
+ setContact(c)}
+ cursor="pointer"
+ _hover={{bg: hoverColor}}
+ >
+
+
+
+
+ {c.name}
+
+
+ {c.address}
+
+
+
+
+ );
+ return ;
+ })}
+ {contact && (
+
+ )}
+
+
+
+ );
};
export default ShareProgram;