feat: Filename update modal

PoCInnovation · May 27, 2022 · d8c39e0 · d8c39e0
1 parent 7e3b86f
commit d8c39e0
Show file tree

Hide file tree

Showing 4 changed files with 124 additions and 1 deletion.
diff --git a/src/components/DisplayFileCards.tsx b/src/components/DisplayFileCards.tsx
@@ -16,6 +16,7 @@ type FileCardsProps = {
 	setContactInfo: React.Dispatch<React.SetStateAction<IPCContact>>;
 	onOpenContactUpdate: () => void;
 	onOpenContactAdd: () => void;
+	onOpenUpdateFileName: () => void;
 	deleteContact: (contactToDelete: IPCContact) => Promise<void>;
 };
 
@@ -31,6 +32,7 @@ export const DisplayFileCards = ({
 	setContactInfo,
 	onOpenContactUpdate,
 	onOpenContactAdd,
+	onOpenUpdateFileName,
 	deleteContact,
 }: FileCardsProps): JSX.Element => {
 	if (index === 0)
@@ -41,6 +43,7 @@ export const DisplayFileCards = ({
 				isDownloadLoading={isDownloadLoading}
 				setSelectedFile={setSelectedFile}
 				onOpenShare={onOpenShare}
+				onOpenUpdateFileName={onOpenUpdateFileName}
 			/>
 		);
 	if (index === 1)
@@ -51,6 +54,7 @@ export const DisplayFileCards = ({
 				isDownloadLoading={isDownloadLoading}
 				setSelectedFile={setSelectedFile}
 				onOpenShare={onOpenShare}
+				onOpenUpdateFileName={onOpenUpdateFileName}
 			/>
 		);
 	if (index === 2)

diff --git a/src/components/FileCards.tsx b/src/components/FileCards.tsx
@@ -1,5 +1,5 @@
 import { Button, Icon } from '@chakra-ui/react';
-import { DownloadIcon } from '@chakra-ui/icons';
+import { DownloadIcon, EditIcon } from '@chakra-ui/icons';
 import { MdPeopleAlt } from 'react-icons/md';
 import React from 'react';
 import FileCard from './FileCard';
@@ -11,6 +11,7 @@ type FileCardsProps = {
 	isDownloadLoading: boolean;
 	setSelectedFile: React.Dispatch<React.SetStateAction<IPCFile>>;
 	onOpenShare: () => void;
+	onOpenUpdateFileName: () => void;
 };
 
 export const FileCards = ({
@@ -19,6 +20,7 @@ export const FileCards = ({
 	isDownloadLoading,
 	setSelectedFile,
 	onOpenShare,
+	onOpenUpdateFileName,
 }: FileCardsProps): JSX.Element => (
 	<>
 		{files.map((file) => (
@@ -51,6 +53,21 @@ export const FileCards = ({
 					>
 						<Icon as={MdPeopleAlt} />
 					</Button>
+					<Button
+						variant="inline"
+						size="sm"
+						w="100%"
+						p="0px"
+						mx="4px"
+						onClick={async () => {
+							setSelectedFile(file);
+							onOpenUpdateFileName();
+						}}
+						isLoading={isDownloadLoading}
+						id="ipc-dashboardView-update-filename-button"
+					>
+						<EditIcon />
+					</Button>
 				</>
 			</FileCard>
 		))}

diff --git a/src/lib/contact.ts b/src/lib/contact.ts
@@ -185,6 +185,48 @@ class Contact {
 		}
 	}
 
+	public async updateFileName(concernedFile: IPCFile, newName: string): Promise<ResponseType> {
+		try {
+			if (this.account) {
+				const owner = this.account.address;
+				if (
+					this.contacts.find((contact, contactIndex) => {
+						if (owner === contact.address) {
+							return this.contacts[contactIndex].files.find((file, fileIndex) => {
+								if (file.hash === concernedFile.hash) {
+									this.contacts[contactIndex].files[fileIndex].name = newName;
+									return true;
+								}
+								return false;
+							});
+						}
+						return false;
+					})
+				) {
+					await post.Publish({
+						APIServer: DEFAULT_API_V2,
+						channel: ALEPH_CHANNEL,
+						inlineRequested: true,
+						storageEngine: ItemType.ipfs,
+						account: this.account,
+						postType: 'amend',
+						content: {
+							header: 'InterPlanetaryCloud2.0 - Contacts',
+							contacts: this.contacts,
+						},
+						ref: this.contactsPostHash,
+					});
+					return { success: true, message: 'Filename updated' };
+				}
+				return { success: false, message: 'File does not exist' };
+			}
+			return { success: false, message: 'Failed to load account' };
+		} catch (err) {
+			console.log(err);
+			return { success: false, message: 'Failed to update this filename' };
+		}
+	}
+
 	public async addFileToContact(contactAddress: string, mainFile: IPCFile): Promise<ResponseType> {
 		try {
 			if (this.account) {

diff --git a/src/views/DashboardView.tsx b/src/views/DashboardView.tsx
@@ -35,6 +35,7 @@ const Dashboard = (): JSX.Element => {
 	const { user } = useUserContext();
 	const { isOpen, onOpen, onClose } = useDisclosure();
 	const { isOpen: isOpenContactAdd, onOpen: onOpenContactAdd, onClose: onCloseContactAdd } = useDisclosure();
+	const { isOpen: isOpenUpdateFileName, onOpen: onOpenUpdateFileName, onClose: onCloseUpdateFileName } = useDisclosure();
 	const { isOpen: isOpenContactUpdate, onOpen: onOpenContactUpdate, onClose: onCloseContactUpdate } = useDisclosure();
 	const { isOpen: isOpenShare, onOpen: onOpenShare, onClose: onCloseShare } = useDisclosure();
 	const [files, setFiles] = useState<IPCFile[]>([]);
@@ -51,6 +52,7 @@ const Dashboard = (): JSX.Element => {
 	const [isDownloadLoading, setIsDownloadLoading] = useState(false);
 	const [fileEvent, setFileEvent] = useState<ChangeEvent<HTMLInputElement> | undefined>(undefined);
 	const [contactsNameEvent, setContactNameEvent] = useState<ChangeEvent<HTMLInputElement> | undefined>(undefined);
+	const [fileNameEvent, setFileNameEvent] = useState<ChangeEvent<HTMLInputElement> | undefined>(undefined);
 	const [contactsPublicKeyEvent, setContactPublicKeyEvent] = useState<ChangeEvent<HTMLInputElement> | undefined>(
 		undefined,
 	);
@@ -172,6 +174,32 @@ const Dashboard = (): JSX.Element => {
 		setIsDownloadLoading(false);
 	};
 
+	const updateFileName = async () => {
+		setIsDownloadLoading(true);
+		try {
+			if (fileNameEvent) {
+				const filename = fileNameEvent.target.value;
+				const update = await user.contact.updateFileName(selectedFile, filename);
+				toast({
+					title: update.message,
+					status: update.success ? 'success' : 'error',
+					duration: 2000,
+					isClosable: true,
+				});
+				onCloseUpdateFileName();
+			}
+		} catch (error) {
+			console.error(error);
+			toast({
+				title: 'Unable to change name',
+				status: 'error',
+				duration: 2000,
+				isClosable: true,
+			});
+		}
+		setIsDownloadLoading(false);
+	};
+
 	const shareFile = async (contact: IPCContact) => {
 		setIsDownloadLoading(true);
 		try {
@@ -344,6 +372,7 @@ const Dashboard = (): JSX.Element => {
 						setContactInfo={setContactInfo}
 						onOpenContactUpdate={onOpenContactUpdate}
 						onOpenContactAdd={onOpenContactAdd}
+						onOpenUpdateFileName={onOpenUpdateFileName}
 						deleteContact={deleteContact}
 					/>
 				</VStack>
@@ -443,6 +472,37 @@ const Dashboard = (): JSX.Element => {
 					<Text as="i">* Fill, to update the info</Text>
 				</>
 			</Modal>
+			<Modal
+				isOpen={isOpenUpdateFileName}
+				onClose={onCloseUpdateFileName}
+				title="Update filename"
+				CTA={
+					<Button
+						variant="inline"
+						w="100%"
+						mb="16px"
+						onClick={updateFileName}
+						isLoading={isUploadLoading}
+						id="ipc-dashboardView-update-filename-button"
+					>
+						Update the filename
+					</Button>
+				}
+			>
+				<>
+					<Text>New name *</Text>
+					<Input
+						type="text"
+						w="100%"
+						p="10px"
+						my="4px"
+						placeholder={selectedFile.name}
+						onChange={(e: ChangeEvent<HTMLInputElement>) => setFileNameEvent(e)}
+						id="ipc-dashboardView-input-update-filename"
+					/>
+					<Text as="i">* Fill, to update the info</Text>
+				</>
+			</Modal>
 			<Modal isOpen={isOpenShare} onClose={onCloseShare} title="Select your contact">
 				<VStack spacing="16px" overflowY="auto">
 					{contacts.map((contact) => {