refactor: GitHub deployment and useless undefined config

Author: RezaRahemtola

package.json

@@ -3,23 +3,23 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
-    "@babel/core": "^7.21.3",
-    "@chakra-ui/icons": "^2.0.17",
-    "@chakra-ui/react": "^2.5.2",
-    "@chakra-ui/styled-system": "^2.6.2",
-    "@chakra-ui/system": "^2.5.2",
+    "@babel/core": "^7.21.8",
+    "@chakra-ui/icons": "^2.0.19",
+    "@chakra-ui/react": "^2.6.1",
+    "@chakra-ui/styled-system": "^2.9.0",
+    "@chakra-ui/system": "^2.5.7",
     "@chakra-ui/theme-tools": "^2.0.16",
-    "@emotion/react": "^11.10.6",
-    "@emotion/styled": "^11.10.6",
+    "@emotion/react": "^11.11.0",
+    "@emotion/styled": "^11.11.0",
     "aleph-sdk-ts": "^3.2.0",
-    "axios": "^1.3.4",
+    "axios": "^1.4.0",
     "boring-avatars": "^1.7.0",
     "crypto-js": "^4.1.1",
     "eth-crypto": "^2.6.0",
     "ethers": "^5.7.2",
-    "framer-motion": "^10.6.0",
+    "framer-motion": "^10.12.12",
     "git-clone": "^0.2.0",
-    "joi": "^17.8.4",
+    "joi": "^17.9.2",
     "js-file-download": "^0.4.12",
     "next": "^12.3.4",
     "next-auth": "4.10.3",
@@ -28,7 +28,7 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-icons": "^4.8.0",
-    "typescript": "^4.9.5"
+    "typescript": "^5.0.4"
   },
   "scripts": {
     "dev": "next dev",
@@ -55,21 +55,21 @@
     "@next/eslint-plugin-next": "^12.3.4",
     "@types/crypto-js": "^4.1.1",
     "@types/git-clone": "^0.2.0",
-    "@types/node": "^16.18.16",
-    "@types/react": "^18.0.28",
-    "@types/react-dom": "^18.0.11",
-    "@typescript-eslint/eslint-plugin": "^5.55.0",
-    "@typescript-eslint/parser": "^5.55.0",
+    "@types/node": "^16.18.31",
+    "@types/react": "^18.2.6",
+    "@types/react-dom": "^18.2.4",
+    "@typescript-eslint/eslint-plugin": "^5.59.6",
+    "@typescript-eslint/parser": "^5.59.6",
     "cypress": "^11.2.0",
     "cypress-file-upload": "^5.0.8",
-    "eslint": "^8.36.0",
+    "eslint": "^8.40.0",
     "eslint-config-airbnb": "^19.0.4",
     "eslint-config-airbnb-typescript": "^17.0.0",
-    "eslint-config-prettier": "^8.7.0",
+    "eslint-config-prettier": "^8.8.0",
     "eslint-plugin-import": "^2.27.5",
     "eslint-plugin-jsx-a11y": "^6.7.1",
     "eslint-plugin-react": "^7.32.2",
     "eslint-plugin-react-hooks": "^4.6.0",
-    "prettier": "^2.8.4"
+    "prettier": "^2.8.8"
   }
 }

pages/api/program/create.ts

@@ -3,8 +3,8 @@ import type { NextApiRequest, NextApiResponse } from 'next';
 import { createRouter } from 'next-connect';
 
 import validate from 'lib/middlewares/validation';
-import { compress, programPublish } from 'lib/services/deploy';
-import { cleanup, clone, getProgramName } from 'lib/services/git';
+import deploy from 'lib/services/deploy';
+import { clone, getProgramName } from 'lib/services/git';
 
 const router = createRouter<NextApiRequest, NextApiResponse>();
 
@@ -16,12 +16,8 @@ const postSchema = Joi.object({
 
 router.post(validate({ body: postSchema }), async (req, res) => {
 	const { repository, entrypoint } = req.body;
-	let itemHash = '';
-	await clone(repository).then(async (path: string) => {
-		const fileName: string = await compress(path);
-		itemHash = await programPublish(fileName, entrypoint);
-		await cleanup(path);
-	});
+	const path = await clone(repository);
+	const itemHash = await deploy(path, entrypoint);
 	return res.status(200).json({ name: getProgramName(repository), item_hash: itemHash, entrypoint });
 });
 

src/components/account/ConfigCard.tsx

@@ -36,9 +36,9 @@ const ConfigCard = (): JSX.Element => {
 		try {
 			const config1 = await user.contact.updateConfig(key, value);
 			setConfig({
-				...user.config!,
+				...user.config,
 				[key]: {
-					...user.config![key],
+					...user.config[key],
 					value,
 				},
 			});
@@ -74,18 +74,18 @@ const ConfigCard = (): JSX.Element => {
 									</Text>
 								</HStack>
 
-								{Object.keys(user?.config ?? []).map((key) => {
-									if (user.config![key].type === 'select')
+								{Object.keys(user.config).map((key) => {
+									if (user.config[key].type === 'select')
 										return (
 											<ConfigSelect key={`${key}-select`} option={key} isLoading={isLoading} onClick={changeConfig} />
 										);
 									return (
 										<HStack key={`${key}-input`} spacing="32px">
 											<Text color={textColor}>
 												<Box as="span" fontWeight="500">
-													{`${user.config![key].name}:`}
+													{`${user.config[key].name}:`}
 												</Box>{' '}
-												{user?.config![key].value ?? ''}
+												{user.config[key].value}
 											</Text>
 											<Button
 												variant="secondary"

src/components/contact/AddContact.tsx

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

src/components/dashboardPage/ProgramOptions.tsx

@@ -20,16 +20,16 @@ import { IPCProgram } from 'types/types';
 import { useConfigContext } from 'contexts/config';
 
 import DeployProgram from 'components/computing/programs/DeployProgram';
+import DeleteProgram from 'components/programs/DeleteProgram';
 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 }) => (
 	<>
 		<GoToWebsiteProgram program={program} />
 		<DeployProgram selectedProgram={program} />
-		<RenameProgram program={program}/>
-		<DeleteProgram program={program}/>
+		<RenameProgram program={program} />
+		<DeleteProgram program={program} />
 	</>
 );
 
@@ -43,7 +43,7 @@ const ProgramOptionsPopover = ({
 	clickPosition: { x: number; y: number };
 	popoverOpeningToggle: boolean;
 	popoverOpeningHandler: () => void;
-}): JSX.Element => {
+}) => {
 	const { config } = useConfigContext();
 	const { isOpen, onOpen, onClose } = useDisclosure();
 
@@ -88,7 +88,7 @@ const ProgramOptionsDrawer = ({
 	program: IPCProgram;
 	isOpen: boolean;
 	onClose: () => void;
-}): JSX.Element => (
+}) => (
 	<Drawer isOpen={isOpen} onClose={onClose} placement="bottom">
 		<DrawerOverlay />
 		<DrawerContent borderRadius="16px 16px 0px 0px">

src/components/navigation/SideBar.tsx

@@ -67,7 +67,7 @@ const SideBar = (): JSX.Element => {
 			p="32px"
 			spacing="64px"
 			bg={bgColor}
-			borderRight={{ base: '', lg: `1px solid ${colorMode === 'light' ? colors.gray['100'] : colors.gray['100']}` }}
+			borderRight={{ base: '', lg: `1px solid ${colors.gray['100']}` }}
 		>
 			<VStack w="100%" px="16px" spacing="32px">
 				<VStack w="100%" spacing="16px">

src/components/programs/DeleteProgram.tsx

@@ -33,14 +33,13 @@ const DeleteProgram = ({ program }: DeleteProgramProps): JSX.Element => {
 	const textColor = useColorModeValue(textColorMode.light, textColorMode.dark);
 	const { colorMode } = useColorMode();
 
-    const deleteActualProgram = async () => {
-			setIsLoading(true);
-			const update = await user.computing.deleteProgram(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.computing.deleteProgram(program.hash);
+		if (update.success) setPrograms(programs.filter((f) => f.hash !== program.hash));
+		setIsLoading(false);
+		onClose();
+	};
 
 	return (
 		<HStack

src/components/programs/RenameProgram.tsx

@@ -1,14 +1,14 @@
 import {
-	HStack,
 	FormControl,
 	FormLabel,
-	Input,
-	useDisclosure,
+	HStack,
 	Icon,
+	Input,
 	Text,
 	useBreakpointValue,
 	useColorMode,
-	useColorModeValue
+	useColorModeValue,
+	useDisclosure,
 } from '@chakra-ui/react';
 
 import { BsPencil } from 'react-icons/bs';
@@ -17,20 +17,19 @@ import type { IPCProgram } from 'types/types';
 
 import { textColorMode } from 'config/colorMode';
 
-import Modal from 'components/Modal';
 import Button from 'components/Button';
+import Modal from 'components/Modal';
 
 import { ChangeEvent, useState } from 'react';
 
-
-import { useUserContext } from 'contexts/user';
 import { useDriveContext } from 'contexts/drive';
+import { useUserContext } from 'contexts/user';
 
 type RenameProgramProps = {
 	program: IPCProgram;
 };
 
-const RenameProgram =  ({ program }: RenameProgramProps): JSX.Element =>  {
+const RenameProgram = ({ program }: RenameProgramProps) => {
 	const isDrawer = useBreakpointValue({ base: true, sm: false }) || false;
 	const { isOpen, onOpen, onClose } = useDisclosure();
 	const textColor = useColorModeValue(textColorMode.light, textColorMode.dark);
@@ -39,7 +38,7 @@ const RenameProgram =  ({ program }: RenameProgramProps): JSX.Element =>  {
 	const [isLoading, setIsLoading] = useState(false);
 
 	const { user } = useUserContext();
-	const {programs, setPrograms} = useDriveContext();
+	const { programs, setPrograms } = useDriveContext();
 
 	const updateProgramName = async () => {
 		setIsLoading(true);
@@ -124,6 +123,6 @@ const RenameProgram =  ({ program }: RenameProgramProps): JSX.Element =>  {
 			</Modal>
 		</HStack>
 	);
-}
+};
 
 export default RenameProgram;

src/lib/contact.ts

@@ -517,13 +517,13 @@ class Contact {
 	public async updateConfig(key: string, value: string): Promise<ResponseType> {
 		try {
 			const contact = this.contacts.find((c) => c.address === this.account.address);
-			if (contact) {
-				if (!contact.config![key]) {
+			if (contact?.config) {
+				if (!contact.config[key]) {
 					return { success: false, message: 'Invalid config key' };
 				}
-				contact.config![key].value = value;
+				contact.config[key].value = value;
 				await this.publishAggregate();
-				return { success: true, message: `${contact.config![key].name} changed` };
+				return { success: true, message: `${contact.config[key].name} changed` };
 			}
 			return { success: false, message: 'Failed to find account' };
 		} catch (err) {

src/lib/services/deploy.ts

@@ -6,13 +6,14 @@ import fs from 'node:fs';
 import child_process from 'child_process';
 
 import { ALEPH_CHANNEL } from 'config/constants';
+import { cleanup } from './git';
 
-async function compress(path: string): Promise<string> {
+const compress = (path: string) => {
 	child_process.execSync(`zip -r ${path} *`, { cwd: path });
 	return `${path}.zip`;
-}
+};
 
-async function programPublish(path: string, entrypoint: string): Promise<string> {
+const programPublish = async (path: string, entrypoint: string) => {
 	const programHashPublishProgram = await program.publish({
 		channel: ALEPH_CHANNEL,
 		account: ethereum.NewAccount().account,
@@ -21,6 +22,13 @@ async function programPublish(path: string, entrypoint: string): Promise<string>
 		entrypoint,
 	});
 	return programHashPublishProgram.item_hash;
-}
+};
 
-export { compress, programPublish };
+const deploy = async (path: string, entrypoint: string) => {
+	const fileName: string = compress(path);
+	const itemHash = await programPublish(fileName, entrypoint);
+	await cleanup(path);
+	return itemHash;
+};
+
+export default deploy;