Skip to content

Commit

Permalink
fix: Further refactoring for folders and last files
Browse files Browse the repository at this point in the history
  • Loading branch information
@RezaRahemtola
RezaRahemtola committed Aug 3, 2022
1 parent 7270913 commit 71c3b03
Show file tree
Hide file tree
Showing 16 changed files with 974 additions and 846 deletions.
4 changes: 2 additions & 2 deletions cypress/e2e/front/home.cy.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@ describe('Signup Button front in Home', () => {
});

it('Good URL redirect for create account button', () => {
cy.get('#ipc-home-create-account-button').click().url().should('eq', Cypress.config().baseUrl + '/signup');
cy.get('#ipc-home-create-account-button').click().url().should('eq', `${Cypress.config().baseUrl}/signup`);
});
});

Expand All @@ -40,6 +40,6 @@ describe('Login Button front in Home', () => {
});

it('Good URL redirect for login button', () => {
cy.get('#ipc-home-login-button').click().url().should('eq', Cypress.config().baseUrl + '/login');
cy.get('#ipc-home-login-button').click().url().should('eq', `${Cypress.config().baseUrl}/login`);
});
});
6 changes: 3 additions & 3 deletions cypress/e2e/login.cy.ts
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
const mnemonic = 'repair nest celery light distance coil giant pyramid poet suit trim fluid';
const mnemonic = 'enlist deny plug hockey sign dirt rebel nothing tobacco dream error fever';

describe('Good front for Login', () => {
it('Go to login', () => {
Expand Down Expand Up @@ -41,7 +41,7 @@ describe('Login with credentials Button for Login', () => {
});

it('Good URL redirect for login button', () => {
cy.get('#ipc-login-credentials-button').click().url().should('eq', Cypress.config().baseUrl + '/dashboard');
cy.get('#ipc-login-credentials-button').click().url().should('eq', `${Cypress.config().baseUrl}/dashboard`);
});
});

Expand All @@ -51,6 +51,6 @@ describe('Signup Button for Login', () => {
});

it('Good URL redirect for signup button', () => {
cy.get('#ipc-login-signup-button').click().url().should('eq', Cypress.config().baseUrl + '/signup');
cy.get('#ipc-login-signup-button').click().url().should('eq', `${Cypress.config().baseUrl}/signup`);
});
});
4 changes: 2 additions & 2 deletions cypress/e2e/signup.cy.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -68,7 +68,7 @@ describe('Signup with credentials Button for Signup', () => {
});

it('Good URL redirect for close button', () => {
cy.get('#ipc-modal-close-button').click().url().should('eq', Cypress.config().baseUrl + '/dashboard');
cy.get('#ipc-modal-close-button').click().url().should('eq', `${Cypress.config().baseUrl}/dashboard`);
});
});

Expand All @@ -78,6 +78,6 @@ describe('Login Button for Signup', () => {
});

it('Good URL redirect for login button', () => {
cy.get('#ipc-signup-login-button').click().url().should('eq', Cypress.config().baseUrl +'/login');
cy.get('#ipc-signup-login-button').click().url().should('eq', `${Cypress.config().baseUrl}/login`);
});
});
16 changes: 8 additions & 8 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,13 +3,13 @@
"version": "0.1.0",
"private": true,
"dependencies": {
"@babel/core": "^7.18.9",
"@babel/core": "^7.18.10",
"@chakra-ui/icons": "^1.1.7",
"@chakra-ui/react": "^1.6.6",
"@chakra-ui/system": "^1.6.6",
"@chakra-ui/theme-tools": "^1.1.9",
"@emotion/react": "^11.9.3",
"@emotion/styled": "^11.9.3",
"@emotion/react": "^11.10.0",
"@emotion/styled": "^11.10.0",
"aleph-sdk-ts": "^2.2.2",
"crypto-js": "^4.1.1",
"eth-crypto": "^2.3.0",
Expand All @@ -21,7 +21,7 @@
"react-dom": "^17.0.2",
"react-icons": "^4.4.0",
"typescript": "^4.7.4",
"web3": "^1.7.4"
"web3": "^1.7.5"
},
"scripts": {
"dev": "next dev -p 8080",
Expand Down Expand Up @@ -50,11 +50,11 @@
"@types/node": "^12.20.15",
"@types/react": "^17.0.11",
"@types/react-dom": "^17.0.8",
"@typescript-eslint/eslint-plugin": "^5.30.7",
"@typescript-eslint/parser": "^5.30.7",
"cypress": "^10.3.1",
"@typescript-eslint/eslint-plugin": "^5.32.0",
"@typescript-eslint/parser": "^5.32.0",
"cypress": "^10.4.0",
"cypress-file-upload": "^5.0.8",
"eslint": "^8.20.0",
"eslint": "^8.21.0",
"eslint-config-airbnb": "^19.0.4",
"eslint-config-airbnb-typescript": "^17.0.0",
"eslint-config-prettier": "^8.5.0",
Expand Down
15 changes: 9 additions & 6 deletions pages/_app.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,9 +19,10 @@ const App = ({ Component, pageProps }: AppProps) => {
const [auth, setAuth] = useState<Auth | undefined>(undefined);
const [user, setUser] = useState<User | undefined>(undefined);
const [error, setError] = useState<Error | unknown>(undefined);
const [files, setFiles] = useState<IPCFile[] | undefined>([]);
const [folders, setFolders] = useState<IPCFolder[] | undefined>([]);
const [contacts, setContacts] = useState<IPCContact[] | undefined>([]);
const [files, setFiles] = useState<IPCFile[]>([]);
const [folders, setFolders] = useState<IPCFolder[]>([]);
const [contacts, setContacts] = useState<IPCContact[]>([]);
const [path, setPath] = useState('/');
const toast = useToast();

useEffect(() => {
Expand Down Expand Up @@ -68,12 +69,14 @@ const App = ({ Component, pageProps }: AppProps) => {
<UserContext.Provider value={{ user: user as User, setUser }}>
<DriveContext.Provider
value={{
files: files as IPCFile[],
files,
setFiles,
folders: folders as IPCFolder[],
folders,
setFolders,
contacts: contacts as IPCContact[],
contacts,
setContacts,
path,
setPath,
}}
>
<Component {...pageProps} />
Expand Down
136 changes: 4 additions & 132 deletions pages/dashboard.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,16 +1,15 @@
import { ChangeEvent, useEffect, useState } from 'react';
import { useRouter } from 'next/router';

import { Box, VStack, Button, HStack, useDisclosure, useToast, Input, FormControl, FormLabel } from '@chakra-ui/react';
import { Box, VStack, Button, HStack, useDisclosure, useToast, Input } from '@chakra-ui/react';

import { useUserContext } from 'contexts/user';

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

import Modal from 'components/Modal';

import { generateFileKey } from 'utils/generateFileKey';
import { getFileContent, extractFilename } from 'utils/fileManipulation';
import { extractFilename } from 'utils/fileManipulation';

import { ResponsiveBar } from 'components/ResponsiveBar';
import { DisplayCards } from 'components/DisplayCards';
Expand All @@ -20,19 +19,13 @@ const Dashboard = (): JSX.Element => {
const toast = useToast({ duration: 2000, isClosable: true });
const router = useRouter();
const { user } = useUserContext();
const { isOpen, onOpen, onClose } = useDisclosure();
const { isOpen: isOpenProgram, onOpen: onOpenProgram, onClose: onCloseProgram } = useDisclosure();
const { isOpen: isOpenCreateFolder, onOpen: onOpenCreateFolder, onClose: onCloseCreateFolder } = useDisclosure();
const { setFiles, folders, setFolders, setContacts } = useDriveContext();
const { setFiles, setFolders, setContacts } = useDriveContext();
const [programs, setPrograms] = useState<IPCProgram[]>([]);
const [sharedFiles, setSharedFiles] = useState<IPCFile[]>([]);
const [selectedTab, setSelectedTab] = useState(0);
const [path, setPath] = useState('/');
const [isUploadLoading, setIsUploadLoading] = useState(false);
const [isDeployLoading, setIsDeployLoading] = useState(false);
const [isCreateFolderLoading, setIsCreateFolderLoading] = useState(false);
const [fileEvent, setFileEvent] = useState<ChangeEvent<HTMLInputElement> | undefined>(undefined);
const [nameEvent, setNameEvent] = useState('');
const [selectedProgram, setSelectedProgram] = useState<IPCProgram>({
name: '',
hash: '',
Expand Down Expand Up @@ -96,76 +89,12 @@ const Dashboard = (): JSX.Element => {
setIsDeployLoading(false);
};

const uploadFile = async () => {
if (!fileEvent) return;
const filename = extractFilename(fileEvent.target.value);
const fileContent = await getFileContent(fileEvent.target.files ? fileEvent.target.files[0] : []);
const key = generateFileKey();
if (!filename || !fileContent) {
toast({ title: 'Invalid file', status: 'error' });
setFileEvent(undefined);
setIsUploadLoading(false);
return;
}

const file: IPCFile = {
name: filename,
hash: fileContent,
size: fileEvent.target.files![0].size,
createdAt: Date.now(),
key: { iv: '', ephemPublicKey: '', ciphertext: '', mac: '' },
path,
};

setIsUploadLoading(true);
if (user.account) {
const upload = await user.drive.upload(file, key);
if (!upload.success || !upload.file) {
toast({ title: upload.message, status: upload.success ? 'success' : 'error' });
} else {
user.drive.files.push(upload.file);

const shared = await user.contact.addFileToContact(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);
setIsUploadLoading(false);
};

const createFolder = async () => {
setIsCreateFolderLoading(true);
if (nameEvent) {
const folder: IPCFolder = {
name: nameEvent,
path,
createdAt: Date.now(),
};

const created = await user.contact.createFolder(folder);
toast({ title: created.message, status: created.success ? 'success' : 'error' });
if (created.success) {
setFolders([...folders, folder]);
}
}
setIsCreateFolderLoading(false);
setNameEvent('');
onCloseCreateFolder();
};

return (
<HStack minH="100vh" minW="100vw" align="start">
<ResponsiveBar
onOpen={onOpen}
onOpenProgram={onOpenProgram}
onOpenCreateFolder={onOpenCreateFolder}
setSelectedTab={setSelectedTab}
isUploadLoading={isUploadLoading}
isDeployLoading={isDeployLoading}
isCreateFolderLoading={isCreateFolderLoading}
selectedTab={selectedTab}
/>
<VStack w="100%" m="32px !important">
Expand All @@ -175,8 +104,6 @@ const Dashboard = (): JSX.Element => {
myPrograms={programs}
sharedFiles={sharedFiles}
index={selectedTab}
path={path}
setPath={setPath}
isRedeployLoading={isDeployLoading}
onOpenRedeployProgram={onOpenProgram}
setSelectedProgram={setSelectedProgram}
Expand Down Expand Up @@ -210,61 +137,6 @@ const Dashboard = (): JSX.Element => {
id="ipc-dashboard-deploy-program"
/>
</Modal>
<Modal
isOpen={isOpen}
onClose={onClose}
title="Upload a file"
CTA={
<Button
variant="inline"
w="100%"
mb="16px"
onClick={uploadFile}
isLoading={isUploadLoading}
id="ipc-dashboard-upload-file-modal-button"
>
Upload file
</Button>
}
>
<Input
type="file"
h="100%"
w="100%"
p="10px"
onChange={(e: ChangeEvent<HTMLInputElement>) => setFileEvent(e)}
id="ipc-dashboard-upload-file"
/>
</Modal>
<Modal
isOpen={isOpenCreateFolder}
onClose={onCloseCreateFolder}
title="Create a folder"
CTA={
<Button
variant="inline"
w="100%"
mb="16px"
onClick={createFolder}
isLoading={isCreateFolderLoading}
id="ipc-dashboard-create-folder-modal-button"
>
Create Folder
</Button>
}
>
<FormControl>
<FormLabel>Name</FormLabel>
<Input
type="text"
w="100%"
p="10px"
my="4px"
onChange={(e: ChangeEvent<HTMLInputElement>) => setNameEvent(e.target.value)}
id="ipc-dashboard-input-folder-name"
/>
</FormControl>
</Modal>
</HStack>
);
};
Expand Down
26 changes: 0 additions & 26 deletions src/components/CustomButtons.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,19 +5,6 @@ type CustomButtonProps = {
isLoading: boolean;
};

export const UploadButton = ({ onClick, isLoading }: CustomButtonProps): JSX.Element => (
<Button
w="100%"
backgroundColor={'white'}
justifyContent="flex-start"
onClick={onClick}
isLoading={isLoading}
id="ipc-upload-button"
>
Upload a file
</Button>
);

export const DeployButton = ({ onClick, isLoading }: CustomButtonProps): JSX.Element => (
<Button
w="100%"
Expand All @@ -31,19 +18,6 @@ export const DeployButton = ({ onClick, isLoading }: CustomButtonProps): JSX.Ele
</Button>
);

export const CreateFolderButton = ({ onClick, isLoading }: CustomButtonProps): JSX.Element => (
<Button
w="100%"
backgroundColor={'white'}
justifyContent="flex-start"
onClick={onClick}
isLoading={isLoading}
id="ipc-create-folder-button"
>
Create a folder
</Button>
);

export const RedeployButton = ({ onClick, isLoading }: CustomButtonProps): JSX.Element => (
<Button
variant="inline"
Expand Down
Loading

0 comments on commit 71c3b03

Please sign in to comment.