Merge pull request #23 from PoCInnovation/dev

feat: add file sharing & better UI

.gitignore

@@ -30,3 +30,5 @@ cypress/screenshots
 cypress/videos
 
 .metamask
+
+/.vscode

README.md

@@ -63,17 +63,59 @@ You are now ready to access to your decentralized cloud :boom: !
 <details>
   <summary>Dashboard</summary>
 
- ![Dashboard](.github/assets/dashboard.png)
+ ![Dashboard](.github/assets/ipc-dashboard.png)
 
 </details>
 
 <details>
-  <summary>Dashboard - Upload document</summary>
+  <summary>Dashboard - Upload a file</summary>
 
- ![Dashboard Upload](.github/assets/dashboardUpload.png)
+ ![Dashboard Upload](.github/assets/ipc-dashboard-upload-a-file.png)
 
 </details>
 
+<details>
+  <summary>Dashboard - Share a file</summary>
+
+![Dashboard Upload](.github/assets/ipc-dashboard-share-a-file.png)
+
+</details>
+
+<details>
+  <summary>Dashboard - Files shared</summary>
+
+![Dashboard Upload](.github/assets/ipc-dashboard-files-shared.png)
+
+</details>
+
+<details>
+  <summary>Dashboard - Contacts</summary>
+
+![Dashboard Upload](.github/assets/ipc-dashboard-contacts.png)
+
+</details>
+
+<details>
+  <summary>Dashboard - Add a contact</summary>
+
+![Dashboard Upload](.github/assets/ipc-dashboard-add-a-contact.png)
+
+</details>
+
+<details>
+  <summary>Dashboard - Update a contact</summary>
+
+![Dashboard Upload](.github/assets/ipc-dashboard-update-a-contact.png)
+
+</details>
+
+<details>
+  <summary>Dashboard - User's profile</summary>
+
+![Dashboard Upload](.github/assets/ipc-dashboard-my-profile.png)
+
+</details>
+
 ## How ? :thinking:
 
 **Technologies 🧑‍💻**
@@ -87,6 +129,78 @@ We use [Aleph SDK TS](https://github.com/aleph-im/aleph-sdk-ts#readme).
 **Security 🛡️**  
 Every file that you upload will be encrypted thanks to [crypto-js](https://www.npmjs.com/package/crypto-js).
 
+**How it works?**
+
+<details>
+    <summary>Full overview</summary>
+
+<img src=".github/assets/ipc-graph.png" width="85%" />
+</details>
+
+---
+
+- For each file, a random key is generated and the content of the file is encrypted with this key.
+- The content is pushed into a store message via the aleph network.
+- The hash of the store message and the key are added to the 'Contacts' post message.
+
+<details>
+    <summary>Upload a file</summary>
+
+<img src=".github/assets/ipc-upload-a-file.png" width="50%" />
+
+</details>
+
+---
+
+- For each contacts into the 'Post Message - Contacts', the files and contacts are get.
+- An occurrence between the address of the user and the contacts is searched.
+- For each file found, metadata about the files are retrieved.
+
+<details>
+    <summary>Load a file</summary>
+
+<img src=".github/assets/ipc-file-loading.png" width="50%" />
+
+</details>
+
+---
+
+- The content is retrieved from the aleph network from his hash.
+- The content is decrypt with the key, itself decrypt with the private key of the user.
+
+<details>
+    <summary>Download a file</summary>
+
+<img src=".github/assets/ipc-download-a-file.png" width="50%" />
+
+</details>
+
+---
+
+- The hash and the key are encrypted with the public key of the contact.
+- These infos are added to the list of shared files of the contact.
+
+<details>
+    <summary>Share a file</summary>
+
+<img src=".github/assets/ipc-share-a-file.png" width="50%" />
+
+</details>
+
+---
+
+- One post message, with the list of contacts and the list of shared files for each contacts
+- The post message contains the info about the contact, his name, address, public key and a list of shared files
+
+<details>
+    <summary>Post messages</summary>
+
+<div>
+<img src=".github/assets/ipc-post-message.png" width="50%" />
+</div>
+
+</details>
+
 ## Our PoC team :ok_hand:
 
 ### September 2021 - Today

cypress/integration/dashboard.spec.js

@@ -14,55 +14,6 @@ describe('Create account for DashboardView tests', () => {
 	});
 });
 
-describe('Good front for DashboardView', () => {
-	it('Go to dashboard view', () => {
-		cy.visit('http://localhost:3000/login');
-		cy.wait(1000);
-		cy.get('#ipc-loginView-text-area').click().type(dashboardSpecMnemonic);
-		cy.get('#ipc-loginView-credentials-button').click();
-	});
-
-	it('Good title', () => {
-		cy.get('#ipc-sideBar-title').should('contain', 'Inter Planetary Cloud');
-	});
-
-	it('Good name for upload button', () => {
-		cy.get('#ipc-dashboardView-drawer-button').click({force: true});
-		cy.get('#ipc-upload-button').should('contain', 'Upload a file');
-	});
-});
-
-describe('Good Modal Front for DashboardView', () => {
-	it('Go to upload modal into dashboard view', () => {
-		cy.visit('http://localhost:3000/login');
-		cy.wait(1000);
-		cy.get('#ipc-loginView-text-area').click().type(dashboardSpecMnemonic);
-		cy.get('#ipc-loginView-credentials-button').click().wait(3000);
-		cy.get('#ipc-dashboardView-drawer-button').click({force: true});
-		cy.get('#ipc-upload-button').click();
-	});
-
-	it('Good header', () => {
-		cy.get('header').should('contain', 'Upload a file');
-	});
-
-	it('Good number of buttons', () => {
-		cy.get('button').should('have.length', 3);
-	});
-
-	it('Good number of input', () => {
-		cy.get('input[type=file]').should('have.length', 1);
-	});
-
-	it('Good name for upload a file button', () => {
-		cy.get('#ipc-dashboardView-upload-file-modal-button').should('contain', 'Upload file');
-	});
-
-	it('Good name for close button', () => {
-		cy.get('#ipc-modal-close-button').should('contain', 'Close');
-	});
-});
-
 describe('Upload a file modal for DashboardView', () => {
 	const fixtureFile = 'upload_test_file.txt';
 
@@ -71,20 +22,20 @@ describe('Upload a file modal for DashboardView', () => {
 		cy.wait(1000);
 		cy.get('#ipc-loginView-text-area').click().type(dashboardSpecMnemonic);
 		cy.get('#ipc-loginView-credentials-button').click().wait(3000);
-		cy.get('#ipc-dashboardView-drawer-button').click({force: true});
-		cy.get('#ipc-upload-button').click();
+		cy.get('#ipc-dashboardView-drawer-button').click({ force: true });
+		cy.get('#ipc-upload-button').click().wait(2500);
 	});
 
 	it('Good number of buttons after upload', () => {
 		cy.get('#ipc-dashboardView-upload-file').attachFile(fixtureFile);
 		cy.get('#ipc-dashboardView-upload-file-modal-button').click();
 		cy.wait(2000);
-		cy.get('button').should('have.length', 2);
+		cy.get('button').should('have.length', 8);
 	});
 
 	it('Good number of buttons after closing modal', () => {
 		cy.get('#ipc-modal-close-button').click();
-		cy.get('button').should('have.length', 2);
+		cy.get('button').should('have.length', 8);
 	});
 });
 
@@ -94,8 +45,9 @@ describe('Download a file for DashboardView', () => {
 		cy.wait(1000);
 		cy.get('#ipc-loginView-text-area').click().type(dashboardSpecMnemonic);
 		cy.get('#ipc-loginView-credentials-button').click();
+		cy.wait(2500);
 		cy.get('#ipc-dashboardView-download-button').click();
-		cy.wait(1000);
+		cy.wait(3000);
 	});
 
 	it('Good content for downloaded file', () => {

cypress/integration/dashboardFront.spec.js

@@ -0,0 +1,64 @@
+let dashboardSpecMnemonic = '';
+
+describe('Create account for DashboardView tests', () => {
+	it('Connect', () => {
+		cy.visit('http://localhost:3000/signup');
+		cy.wait(1000);
+		cy.get('#ipc-signupView-credentials-signup-button').click();
+		cy.get('#ipc-signupView-text-area')
+			.invoke('val')
+			.then((input) => {
+				dashboardSpecMnemonic = input;
+			});
+		cy.get('#ipc-modal-close-button').click();
+	});
+});
+
+describe('Good front for DashboardView', () => {
+	it('Go to dashboard view', () => {
+		cy.visit('http://localhost:3000/login');
+		cy.wait(1000);
+		cy.get('#ipc-loginView-text-area').click().type(dashboardSpecMnemonic);
+		cy.get('#ipc-loginView-credentials-button').click();
+	});
+
+	it('Good title', () => {
+		cy.get('#ipc-sideBar-title').should('contain', 'Inter Planetary Cloud');
+	});
+
+	it('Good name for upload button', () => {
+		cy.get('#ipc-dashboardView-drawer-button').click({ force: true });
+		cy.get('#ipc-upload-button').should('contain', 'Upload a file');
+	});
+});
+
+describe('Good Modal Front for DashboardView', () => {
+	it('Go to upload modal into dashboard view', () => {
+		cy.visit('http://localhost:3000/login');
+		cy.wait(1000);
+		cy.get('#ipc-loginView-text-area').click().type(dashboardSpecMnemonic);
+		cy.get('#ipc-loginView-credentials-button').click().wait(3000);
+		cy.get('#ipc-dashboardView-drawer-button').click({ force: true });
+		cy.get('#ipc-upload-button').click();
+	});
+
+	it('Good header', () => {
+		cy.get('header').should('contain', 'Upload a file');
+	});
+
+	it('Good number of buttons', () => {
+		cy.get('button').should('have.length', 8);
+	});
+
+	it('Good number of input', () => {
+		cy.get('input[type=file]').should('have.length', 1);
+	});
+
+	it('Good name for upload a file button', () => {
+		cy.get('#ipc-dashboardView-upload-file-modal-button').should('contain', 'Upload file');
+	});
+
+	it('Good name for close button', () => {
+		cy.get('#ipc-modal-close-button').should('contain', 'Close');
+	});
+});

package.json

@@ -15,6 +15,7 @@
     "aleph-sdk-ts": "^2.2.1",
     "crypto-js": "^4.0.0",
     "env-var": "^7.1.1",
+    "eth-crypto": "^2.2.0",
     "ethers": "^5.5.2",
     "framer-motion": "^4.1.17",
     "it-all": "^1.0.5",
@@ -23,6 +24,7 @@
     "react": "^17.0.2",
     "react-clipboard.js": "^2.0.16",
     "react-dom": "^17.0.2",
+    "react-icons": "^4.3.1",
     "react-router-dom": "^5.2.0",
     "react-scripts": "4.0.3",
     "typescript": "^4.3.4",

src/components/ContactCard.tsx

@@ -0,0 +1,28 @@
+import { Box, Flex, Text, VStack } from '@chakra-ui/react';
+import { IPCContact } from '../types/types';
+
+type FileCardProps = {
+	contact: IPCContact;
+	children: JSX.Element;
+};
+
+export const ContactCard = ({ contact, children }: FileCardProps): JSX.Element => (
+	<Box
+		p="16px"
+		bg="white"
+		w="100%"
+		boxShadow="0px 2px 3px 3px rgb(240, 240, 240)"
+		borderRadius="4px"
+		border="1px solid rgb(200, 200, 200)"
+		mb="8px"
+		display="flex"
+		justifyContent="space-between"
+	>
+		<VStack w="100%" justify="space-between" align="center">
+			<Text fontWeight="500">{contact.name}</Text>
+			<Flex w="100%" justify="space-between" align="center">
+				{children}
+			</Flex>
+		</VStack>
+	</Box>
+);