Dev ip computing

src/app/AuthRoute.tsx

@@ -29,7 +29,7 @@ const AuthRoute = ({ children, ...rest }: AuthRouteProps): JSX.Element => {
 						id="ipc-title"
 						textAlign="center"
 					>
-						Inter Planetary Cloud
+						Inter Planetary Cloud / Computing
 					</Text>
 					<Text
 						fontSize={{ base: '6px', '3xs': '10px', '2xs': '12px', xs: '14px', '2sm': '16px' }}

src/components/CustomButtons.tsx

@@ -7,7 +7,7 @@ type UploadButtonProps = {
 };
 
 export const UploadButton = ({ text, onClick, isLoading }: UploadButtonProps): JSX.Element => (
-	<Button variant="inline" borderRadius="lg" onClick={onClick} isLoading={isLoading} id="ipc-upload-button">
+	<Button variant="inline" w="80%" borderRadius="lg" onClick={onClick} isLoading={isLoading} id="ipc-upload-button">
 		{text}
 	</Button>
 );
@@ -17,3 +17,9 @@ export const ContactButton = ({ text, onClick, isLoading }: UploadButtonProps):
 		{text}
 	</Button>
 );
+
+export const DeployButton = ({ text, onClick, isLoading }: UploadButtonProps): JSX.Element => (
+	<Button variant="inline" w="80%" borderRadius="lg" onClick={onClick} isLoading={isLoading} id="ipc-deploy-button">
+		{text}
+	</Button>
+);

src/components/DisplayFileCards.tsx

@@ -1,11 +1,12 @@
 import React from 'react';
-import { IPCContact, IPCFile } from '../types/types';
+import { IPCContact, IPCFile, IPCProgram } from '../types/types';
 import { FileCards } from './FileCards';
 import { ContactCards } from './ContactCards';
 import { ProfileCard } from './ProfileCard';
 
 type FileCardsProps = {
 	myFiles: IPCFile[];
+	myPrograms: IPCProgram[];
 	sharedFiles: IPCFile[];
 	contacts: IPCContact[];
 	index: number;
@@ -21,6 +22,7 @@ type FileCardsProps = {
 
 export const DisplayFileCards = ({
 	myFiles,
+	myPrograms,
 	sharedFiles,
 	contacts,
 	index,
@@ -37,6 +39,7 @@ export const DisplayFileCards = ({
 		return (
 			<FileCards
 				files={myFiles}
+				programs={[]}
 				downloadFile={downloadFile}
 				isDownloadLoading={isDownloadLoading}
 				setSelectedFile={setSelectedFile}
@@ -47,6 +50,7 @@ export const DisplayFileCards = ({
 		return (
 			<FileCards
 				files={sharedFiles}
+				programs={[]}
 				downloadFile={downloadFile}
 				isDownloadLoading={isDownloadLoading}
 				setSelectedFile={setSelectedFile}
@@ -63,6 +67,17 @@ export const DisplayFileCards = ({
 				deleteContact={deleteContact}
 			/>
 		);
+	if (index === 3)
+		return (
+			<FileCards
+				files={[]}
+				programs={myPrograms}
+				downloadFile={downloadFile}
+				isDownloadLoading={isDownloadLoading}
+				setSelectedFile={setSelectedFile}
+				onOpenShare={onOpenShare}
+			/>
+		);
 	return (
 		<ProfileCard profile={contacts[0]} setContactInfo={setContactInfo} onOpenContactUpdate={onOpenContactUpdate} />
 	);

src/components/FileCard.tsx

@@ -1,9 +1,9 @@
 import { Box, Flex, Text, VStack } from '@chakra-ui/react';
 
-import { IPCFile } from 'types/types';
+import { IPCFile, IPCProgram } from 'types/types';
 
 type FileCardProps = {
-	file: IPCFile;
+	file: IPCFile | IPCProgram;
 	children: JSX.Element;
 };
 

src/components/FileCards.tsx

@@ -3,10 +3,11 @@ import { DownloadIcon } from '@chakra-ui/icons';
 import { MdPeopleAlt } from 'react-icons/md';
 import React from 'react';
 import FileCard from './FileCard';
-import { IPCFile } from '../types/types';
+import { IPCFile, IPCProgram } from '../types/types';
 
 type FileCardsProps = {
 	files: IPCFile[];
+	programs: IPCProgram[];
 	downloadFile: (file: IPCFile) => Promise<void>;
 	isDownloadLoading: boolean;
 	setSelectedFile: React.Dispatch<React.SetStateAction<IPCFile>>;
@@ -15,13 +16,14 @@ type FileCardsProps = {
 
 export const FileCards = ({
 	files,
+	programs,
 	downloadFile,
 	isDownloadLoading,
 	setSelectedFile,
 	onOpenShare,
 }: FileCardsProps): JSX.Element => (
 	<>
-		{files.map((file) => (
+		{files.map((file: IPCFile) => (
 			<FileCard key={file.created_at} file={file}>
 				<>
 					<Button
@@ -30,7 +32,7 @@ export const FileCards = ({
 						w="100%"
 						p="0px"
 						mx="4px"
-						onClick={async () => downloadFile(file)}
+						onClick={async () => downloadFile(file as IPCFile)}
 						isLoading={isDownloadLoading}
 						id="ipc-dashboardView-download-button"
 					>
@@ -43,7 +45,7 @@ export const FileCards = ({
 						p="0px"
 						mx="4px"
 						onClick={() => {
-							setSelectedFile(file);
+							setSelectedFile(file as IPCFile);
 							onOpenShare();
 						}}
 						isLoading={isDownloadLoading}
@@ -54,5 +56,23 @@ export const FileCards = ({
 				</>
 			</FileCard>
 		))}
+		{programs.map((program: IPCProgram) => (
+			<FileCard key={program.created_at} file={program}>
+				<>
+					<Button
+						as="a"
+						href={`https://aleph.sh/vm/${program.hash}`}
+						target="_blank"
+						variant="inline"
+						size="sm"
+						w="100%"
+						p="0px"
+						id="ipc-computingView-forwardUrl-button"
+					>
+						Go to site
+					</Button>
+				</>
+			</FileCard>
+		))}
 	</>
 );

src/components/ResponsiveBar.tsx

@@ -18,28 +18,46 @@ import { HamburgerIcon } from '@chakra-ui/icons';
 import React from 'react';
 import colors from '../theme/foundations/colors';
 import Sidebar from './SideBar';
-import { UploadButton } from './CustomButtons';
+import { UploadButton, DeployButton } from './CustomButtons';
 
 type BarProps = {
 	onOpen: () => void;
+	onOpenProgram: () => void;
 	isUploadLoading: boolean;
+	isDeployLoading: boolean;
 	setSelectedTab: React.Dispatch<React.SetStateAction<number>>;
 	selectedTab: number;
 };
 
-export const LeftBar = ({ onOpen, isUploadLoading, setSelectedTab, selectedTab }: BarProps): JSX.Element => (
+export const LeftBar = ({
+	onOpen,
+	onOpenProgram,
+	isUploadLoading,
+	isDeployLoading,
+	setSelectedTab,
+	selectedTab,
+}: BarProps): JSX.Element => (
 	<Sidebar
 		uploadButton={<UploadButton text="Upload a file" onClick={() => onOpen()} isLoading={isUploadLoading} />}
+		deployButton={<DeployButton text="Deploy a program" onClick={onOpenProgram} isLoading={isDeployLoading} />}
 		contactTab="Contacts"
 		myFilesTab="My files"
+		myProgramsTab="My programs"
 		profileTab="My profile"
 		sharedFilesTab="Shared with me"
 		setSelectedTab={setSelectedTab}
 		currentTabIndex={selectedTab}
 	/>
 );
 
-export const BarWithDrawer = ({ onOpen, setSelectedTab, isUploadLoading, selectedTab }: BarProps): JSX.Element => {
+export const BarWithDrawer = ({
+	onOpen,
+	onOpenProgram,
+	setSelectedTab,
+	isDeployLoading,
+	isUploadLoading,
+	selectedTab,
+}: BarProps): JSX.Element => {
 	const { isOpen: isOpenDrawer, onOpen: onOpenDrawer, onClose: onCloseDrawer } = useDisclosure();
 	const placement: SlideDirection = 'left';
 
@@ -50,8 +68,10 @@ export const BarWithDrawer = ({ onOpen, setSelectedTab, isUploadLoading, selecte
 				<DrawerContent w="75%">
 					<LeftBar
 						onOpen={onOpen}
+						onOpenProgram={onOpenProgram}
 						setSelectedTab={setSelectedTab}
 						isUploadLoading={isUploadLoading}
+						isDeployLoading={isDeployLoading}
 						selectedTab={selectedTab}
 					/>
 				</DrawerContent>
@@ -70,7 +90,7 @@ export const BarWithDrawer = ({ onOpen, setSelectedTab, isUploadLoading, selecte
 							bgClip="text"
 							id="ipc-sideBar-title"
 						>
-							Inter Planetary Cloud
+							Inter Planetary Cloud / Computing
 						</Text>
 					</VStack>
 				</HStack>
@@ -80,23 +100,34 @@ export const BarWithDrawer = ({ onOpen, setSelectedTab, isUploadLoading, selecte
 	);
 };
 
-export const ResponsiveBar = ({ onOpen, setSelectedTab, isUploadLoading, selectedTab }: BarProps): JSX.Element => {
+export const ResponsiveBar = ({
+	onOpen,
+	onOpenProgram,
+	setSelectedTab,
+	isUploadLoading,
+	isDeployLoading,
+	selectedTab,
+}: BarProps): JSX.Element => {
 	const isDrawerNeeded: boolean = useBreakpointValue({ base: true, xs: true, lg: false }) || false;
 
 	if (!isDrawerNeeded)
 		return (
 			<LeftBar
 				onOpen={onOpen}
+				onOpenProgram={onOpenProgram}
 				setSelectedTab={setSelectedTab}
 				isUploadLoading={isUploadLoading}
+				isDeployLoading={isDeployLoading}
 				selectedTab={selectedTab}
 			/>
 		);
 	return (
 		<BarWithDrawer
 			onOpen={onOpen}
+			onOpenProgram={onOpenProgram}
 			setSelectedTab={setSelectedTab}
 			isUploadLoading={isUploadLoading}
+			isDeployLoading={isDeployLoading}
 			selectedTab={selectedTab}
 		/>
 	);

src/components/SideBar.tsx

@@ -7,8 +7,10 @@ type SideBarPropsType = {
 	contactTab: string;
 	myFilesTab: string;
 	sharedFilesTab: string;
+	myProgramsTab: string;
 	profileTab: string;
 	uploadButton: JSX.Element;
+	deployButton: JSX.Element;
 	setSelectedTab: React.Dispatch<React.SetStateAction<number>>;
 	currentTabIndex: number;
 };
@@ -17,8 +19,10 @@ const SideBar = ({
 	contactTab,
 	myFilesTab,
 	sharedFilesTab,
+	myProgramsTab,
 	profileTab,
 	uploadButton,
+	deployButton,
 	setSelectedTab,
 	currentTabIndex,
 }: SideBarPropsType): JSX.Element => (
@@ -40,7 +44,7 @@ const SideBar = ({
 				id="ipc-sideBar-title"
 				pb="64px"
 			>
-				Inter Planetary Cloud
+				Inter Planetary Cloud / Computing
 			</Text>
 			<Tabs defaultIndex={currentTabIndex} orientation="vertical" isFitted onChange={(index) => setSelectedTab(index)}>
 				<TabList>
@@ -68,6 +72,14 @@ const SideBar = ({
 					>
 						{contactTab}
 					</Tab>
+					<Tab
+						borderLeft={`5px solid ${colors.blue[700]}`}
+						_selected={{
+							borderLeft: `5px solid ${colors.red[700]}`,
+						}}
+					>
+						{myProgramsTab}
+					</Tab>
 					<Tab
 						borderLeft={`5px solid ${colors.blue[700]}`}
 						_selected={{
@@ -79,6 +91,7 @@ const SideBar = ({
 				</TabList>
 			</Tabs>
 			{uploadButton}
+			{deployButton}
 		</VStack>
 	</VStack>
 );