Program renaming feature

src/components/computing/github/GithubModal.tsx

@@ -58,11 +58,18 @@ const GithubModal = ({ isOpen, onClose }: { isOpen: boolean; onClose: () => void
 			});
 			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,
 				size: 0,
+				log: [
+					{
+						action: 'Program created',
+						date: Date.now(),
+					},
+				],
 			};
 			user.computing.programs.push(newProgram);
 			await user.computing.publishAggregate();

src/components/computing/programs/ProgramModal.tsx

@@ -44,11 +44,18 @@ const ProgramModal = ({
 		try {
 			const upload = await user.computing.uploadProgram(
 				{
+					id: crypto.randomUUID(),
 					name: customName || filename,
 					hash: '',
 					createdAt: Date.now(),
 					entrypoint: customEntrypoint || user.config?.defaultEntrypoint.value || 'main:app',
 					size: fileEvent.target.files[0].size,
+					log: [
+						{
+							action: 'Program created',
+							date: Date.now(),
+						},
+					],
 				},
 				fileEvent.target.files[0],
 				!!oldProgram,

src/components/contact/AddContact.tsx

@@ -30,6 +30,7 @@ const AddContact = (): JSX.Element => {
 					files: [],
 					folders: [],
 					config: undefined,
+					programs: []
 				});
 
 				toast({ title: add.message, status: add.success ? 'success' : 'error' });

src/components/dashboardPage/ProgramOptions.tsx

@@ -14,17 +14,23 @@ import {
 } from '@chakra-ui/react';
 import { useEffect } from 'react';
 
+
 import { IPCProgram } from 'types/types';
 
 import { useConfigContext } from 'contexts/config';
 
+
 import DeployProgram from 'components/computing/programs/DeployProgram';
 import GoToWebsiteProgram from 'components/programs/GoToWebsiteProgram';
+import RenameProgram from 'components/programs/RenameProgram';
+import DeleteProgram from 'components/programs/DeleteProgram';
 
-const ProgramOptionsContent = ({ program }: { program: IPCProgram }): JSX.Element => (
+const ProgramOptionsContent = ({ program }: { program: IPCProgram}): JSX.Element => (
 	<>
 		<GoToWebsiteProgram program={program} />
 		<DeployProgram selectedProgram={program} />
+		<RenameProgram program={program}/>
+		<DeleteProgram program={program}/>
 	</>
 );
 

src/components/programs/DeleteProgram.tsx

@@ -0,0 +1,100 @@
+import {
+	HStack,
+	Icon,
+	Text,
+	useBreakpointValue,
+	useDisclosure,
+	useColorMode,
+	useColorModeValue,
+} from '@chakra-ui/react';
+import { useState } from 'react';
+import { IoTrashSharp } from 'react-icons/io5';
+
+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';
+
+type DeleteProgramProps = {
+	program: IPCProgram;
+};
+
+const DeleteProgram = ({ program }: DeleteProgramProps): JSX.Element => {
+	const { user } = useUserContext();
+	const { programs, setPrograms } = useDriveContext();
+
+	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 DeleteActualProgram = async () => {
+		setIsLoading(true);
+		console.log(`hash = ${program.hash}`);
+        const update = await user.computing.UpdateDeleteProgram(program.hash);
+		console.log(`message = ${update.message}`);
+        if (update.success)
+			setPrograms([...programs]);
+		setIsLoading(false);
+		onClose();
+    }
+
+	return (
+		<HStack
+			spacing={isDrawer ? '24px' : '12px'}
+			p="8px 12px"
+			borderRadius="8px"
+			role="group"
+			onClick={onOpen}
+			w="100%"
+			cursor="pointer"
+			id="ipc-dashboard-delete-button"
+			_hover={{
+				bg: colorMode === 'light' ? 'blue.50' : 'gray.750',
+			}}
+		>
+			<Icon
+				as={IoTrashSharp}
+				_groupHover={{ color: 'red.800' }}
+				w={isDrawer ? '24px' : '20px'}
+				h={isDrawer ? '24px' : '20px'}
+			/>
+			<Text
+				fontSize="16px"
+				fontWeight="400"
+				_groupHover={{
+					color: 'red.800',
+					fontWeight: '500',
+				}}
+				color={textColor}
+			>
+				Delete
+			</Text>
+			<Modal
+				isOpen={isOpen}
+				onClose={onClose}
+				title="Delete program"
+				CTA={
+					<Button
+						variant="primary"
+						size="lg"
+						onClick={DeleteActualProgram}
+						isLoading={isLoading}
+						id="ipc-dashboard-delete-program-button"
+					>
+						Delete
+					</Button>
+				}
+			>
+				<Text color={textColor}>Are you sure you want to delete this program?</Text>
+			</Modal>
+		</HStack>
+	);
+};
+
+export default DeleteProgram;

src/components/programs/RenameProgram.tsx

@@ -0,0 +1,129 @@
+import {
+	HStack,
+	FormControl,
+	FormLabel,
+	Input,
+	useDisclosure,
+	Icon,
+	Text,
+	useBreakpointValue,
+	useColorMode,
+	useColorModeValue
+} from '@chakra-ui/react';
+
+import { BsPencil } from 'react-icons/bs';
+
+import type { IPCProgram } from 'types/types';
+
+import { textColorMode } from 'config/colorMode';
+
+import Modal from 'components/Modal';
+import Button from 'components/Button';
+
+import { ChangeEvent, useState } from 'react';
+
+
+import { useUserContext } from 'contexts/user';
+import { useDriveContext } from 'contexts/drive';
+
+type RenameProgramProps = {
+	program: IPCProgram;
+};
+
+const RenameProgram =  ({ program }: RenameProgramProps): JSX.Element =>  {
+	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 updateProgramName = async () => {
+		setIsLoading(true);
+		if (name) {
+			const update = await user.computing.updateProgramName(program, name);
+			if (update.success) {
+				const index = programs.indexOf(program);
+				if (index !== -1) {
+					programs[index].name = name;
+					programs[index].log.push({
+						action: `Renamed program to ${name}`,
+						date: Date.now(),
+					});
+				}
+				setPrograms([...programs]);
+			}
+		}
+		setName('');
+		setIsLoading(false);
+		onClose();
+	};
+
+	return (
+		<HStack
+			spacing={isDrawer ? '24px' : '12px'}
+			p="8px 12px"
+			borderRadius="8px"
+			role="group"
+			onClick={onOpen}
+			w="100%"
+			cursor="pointer"
+			id="ipc-dashboard-rename-button"
+			_hover={{
+				bg: colorMode === 'light' ? 'blue.50' : 'gray.750',
+			}}
+		>
+			<Icon
+				as={BsPencil}
+				_groupHover={{ color: 'red.800' }}
+				w={isDrawer ? '24px' : '20px'}
+				h={isDrawer ? '24px' : '20px'}
+			/>
+			<Text
+				fontSize="16px"
+				fontWeight="400"
+				_groupHover={{
+					color: 'red.800',
+					fontWeight: '500',
+				}}
+				color={textColor}
+			>
+				Rename
+			</Text>
+			<Modal
+				isOpen={isOpen}
+				onClose={onClose}
+				title="Rename the program"
+				CTA={
+					<Button
+						variant="primary"
+						size="lg"
+						onClick={updateProgramName}
+						isLoading={isLoading}
+						id="ipc-dashboard-update-programName-button"
+					>
+						OK
+					</Button>
+				}
+			>
+				<FormControl>
+					<FormLabel color={textColor}>New program name</FormLabel>
+					<Input
+						type="text"
+						w="100%"
+						p="10px"
+						my="4px"
+						placeholder={program.name}
+						onChange={(e: ChangeEvent<HTMLInputElement>) => setName(e.target.value)}
+						id="ipc-dashboard-input-update-programame"
+					/>
+				</FormControl>
+			</Modal>
+		</HStack>
+	);
+}
+
+export default RenameProgram;

src/lib/computing.ts

@@ -34,6 +34,7 @@ class Computing {
 		});
 	}
 
+
 	public async load(): Promise<ResponseType> {
 		try {
 			if (this.account) {
@@ -53,16 +54,15 @@ class Computing {
 		}
 	}
 
-	public async deleteProgram(programHash: string): Promise<ResponseType> {
+	public async UpdateDeleteProgram(programHash: string): Promise<ResponseType> {
 		try {
 			if (this.account) {
-				await forget.Publish({
+				const test = await forget.Publish({
 					channel: ALEPH_CHANNEL,
 					hashes: [programHash],
-					storageEngine: ItemType.ipfs,
+					storageEngine: ItemType.storage,
 					account: this.account,
 				});
-
 				return { success: true, message: 'program deleted' };
 			}
 			return { success: false, message: 'Failed to load account' };
@@ -72,6 +72,29 @@ class Computing {
 		}
 	}
 
+	public async updateProgramName(
+		concernedProgram: IPCProgram,
+		newName: string,
+	): Promise<ResponseType> {
+		try {
+			const copy = concernedProgram;
+			await Promise.all(
+				this.programs.map(async () => {
+					copy.name = newName;
+					copy.log.push({
+						action: `Renamed program to ${newName}`,
+						date: Date.now(),
+					});
+					await this.publishAggregate();
+				}),
+			);
+			return { success: true, message: 'Program name updated' };
+		} catch (err) {
+			console.error(err);
+			return { success: false, message: 'Failed to update program name' };
+		}
+	}
+
 	public async uploadProgram(
 		myProgram: IPCProgram,
 		uploadFile: File,
@@ -82,20 +105,18 @@ class Computing {
 			if (this.account) {
 				// remove old program from user's programs array
 				if (isRedeploy && oldProgramHash) {
-					const newProgramsArray: IPCProgram[] = this.programs.filter(
+					const newProgramsArray: IPCProgram[] = this.programs.filter (
 						(oldProgram: IPCProgram) => oldProgram !== oldProgramHash,
 					);
 					this.programs = newProgramsArray;
 				}
-
 				const programHashPublishProgram = await program.publish({
 					channel: ALEPH_CHANNEL,
 					account: this.account,
 					storageEngine: ItemType.storage,
 					file: uploadFile,
 					entrypoint: myProgram.entrypoint,
 				});
-
 				const newProgram: IPCProgram = {
 					...myProgram,
 					hash: programHashPublishProgram.item_hash,