Skip to content

Commit

Permalink
feat: loading screen done
Browse files Browse the repository at this point in the history
  • Loading branch information
@itsjoeoui
itsjoeoui committed Dec 1, 2023
1 parent b987f7e commit 748b08f
Show file tree
Hide file tree
Showing 10 changed files with 171 additions and 49 deletions.
Binary file added build/logo.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
1 change: 1 addition & 0 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,6 +30,7 @@
"@radix-ui/react-icons": "^1.3.0",
"@radix-ui/react-label": "^2.0.2",
"@radix-ui/react-popover": "^1.0.7",
"@radix-ui/react-progress": "^1.0.3",
"@radix-ui/react-scroll-area": "^1.0.5",
"@radix-ui/react-select": "^2.0.0",
"@radix-ui/react-separator": "^1.0.3",
Expand Down
25 changes: 25 additions & 0 deletions pnpm-lock.yaml
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

Binary file added resources/PonyMaker.ttf
View file
Binary file not shown.
9 changes: 7 additions & 2 deletions src/main/windows.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,11 @@ let flowWindow: BrowserWindow | null = null;
let setupWindow: BrowserWindow | null = null;

export async function spawnFlowWindow(): Promise<void> {
if (setupWindow) {
setupWindow.close();
setupWindow = null;
}

if (flowWindow) {
if (flowWindow.isMinimized()) flowWindow.restore();
flowWindow.focus();
Expand Down Expand Up @@ -240,8 +245,8 @@ export async function spawnSetupWindow(): Promise<void> {

// Create the browser window.
setupWindow = new BrowserWindow({
width: 900,
height: 670,
width: 640,
height: 360,
show: false,
autoHideMenuBar: true,
titleBarStyle: 'hidden',
Expand Down
26 changes: 26 additions & 0 deletions src/renderer/src/components/ui/Progress.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,26 @@
import * as React from 'react';
import * as ProgressPrimitive from '@radix-ui/react-progress';

import { cn } from '@/utils/style';

const Progress = React.forwardRef<
React.ElementRef<typeof ProgressPrimitive.Root>,
React.ComponentPropsWithoutRef<typeof ProgressPrimitive.Root> & {
className?: string;
value?: number;
}
>(({ className, value, ...props }, ref) => (
<ProgressPrimitive.Root
ref={ref}
className={cn('relative h-4 w-full overflow-hidden rounded-full bg-secondary', className)}
{...props}
>
<ProgressPrimitive.Indicator
className="h-full w-full flex-1 bg-primary transition-all"
style={{ transform: `translateX(-${100 - (value || 0)}%)` }}
/>
</ProgressPrimitive.Root>
));
Progress.displayName = ProgressPrimitive.Root.displayName;

export { Progress };
145 changes: 98 additions & 47 deletions src/renderer/src/routes/index/Index.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import { useEffect, useState } from 'react';
import { SetupStatus } from '@/types/status';
import SetupStep from '@/components/index/SetupStep';
// import SetupStep from '@/components/index/SetupStep';
import {
AlertDialog,
AlertDialogAction,
Expand All @@ -11,34 +11,47 @@ import {
AlertDialogHeader,
AlertDialogTitle
} from '@/components/ui/AlertDialog';
import { Button } from '@/components/ui/Button';
// import { Button } from '@/components/ui/Button';
import { useLifecycleStore } from '@/stores/lifecycle';
import { isPackaged } from '@/utils/build';
import { trpcClient } from '@/main';
import { Progress } from '@/components/ui/Progress';
import logo from '../../../../../build/logo.png';
import useWebSocket, { ReadyState } from 'react-use-websocket';

const Setup = (): JSX.Element => {
const captainReady = useLifecycleStore((state) => state.captainReady);
const [latestStatus, setLatestStatus] = useState<string>('');
const [progress, setProgress] = useState(13);

const { setCaptainReady, captainReady } = useLifecycleStore((state) => ({
setCaptainReady: state.setCaptainReady,
captainReady: state.captainReady
}));

const [setupStatuses, setSetupStatuses] = useState<SetupStatus[]>([
{
status: 'running',
stage: 'check-python-installation',
message: 'Making sure Python 3.11 is installed on this machine.'
message: 'Making sure Python 3.11 is installed on this machine.',
percent: 10
},
{
status: 'pending',
stage: 'check-pipx-installation',
message: 'Check if Pipx is installed on this machine.'
message: 'Check if Pipx is installed on this machine.',
percent: 30
},
{
status: 'pending',
stage: 'install-dependencies',
message: 'Configure all the magic behind Flojoy Studio.'
message: 'Configure all the magic behind Flojoy Studio.',
percent: 50
},
{
status: 'pending',
stage: 'spawn-captain',
message: 'Start the Flojoy Studio backend.'
message: 'Start the Flojoy Studio backend.',
percent: 70
}
]);

Expand All @@ -54,14 +67,16 @@ const Setup = (): JSX.Element => {
updateSetupStatus({
stage: 'check-python-installation',
status: 'completed',
message: `Python ${data.split(' ')[1]} is installed!`
message: `Python ${data.split(' ')[1]} is installed!`,
percent: 20
});
} catch (err) {
console.error(err);
updateSetupStatus({
stage: 'check-python-installation',
status: 'error',
message: 'Cannot find any Python 3.11 installation on this machine :('
message: 'Cannot find any Python 3.11 installation on this machine :(',
percent: 0
});
setErrorTitle('Could not find Python 3.11 :(');
setErrorDesc('Please install Python 3.11 and try again!');
Expand All @@ -75,14 +90,16 @@ const Setup = (): JSX.Element => {
updateSetupStatus({
stage: 'check-pipx-installation',
status: 'completed',
message: `Pipx ${data} is installed!`
message: `Pipx ${data} is installed!`,
percent: 40
});
} catch (err) {
updateSetupStatus({
stage: 'check-pipx-installation',
status: 'warning',
message:
'Pipx is not currently installed, we will install it for you and restart Flojoy Studio!'
'Pipx is not currently installed, we will install it for you and restart Flojoy Studio!',
percent: 0
});
setNeedRestart(true);
}
Expand All @@ -99,7 +116,8 @@ const Setup = (): JSX.Element => {
updateSetupStatus({
stage: 'install-dependencies',
status: 'running',
message: `Flojoy Studio needs to restart for changes to take effect, restarting in ${i} second(s)`
message: `Flojoy Studio needs to restart for changes to take effect, restarting in ${i} second(s)`,
percent: 60
});
await new Promise((resolve) => setTimeout(resolve, 1000));
}
Expand All @@ -115,14 +133,16 @@ const Setup = (): JSX.Element => {
updateSetupStatus({
stage: 'install-dependencies',
status: 'completed',
message: 'Finished setting up all the magic behind Flojoy Studio.'
message: 'Finished setting up all the magic behind Flojoy Studio.',
percent: 60
});
}
} catch (err) {
updateSetupStatus({
stage: 'install-dependencies',
status: 'error',
message: 'Something went wrong when installing dependencies...'
message: 'Something went wrong when installing dependencies...',
percent: 0
});
setErrorTitle('Something went wrong :(');
// TODO: automate the log reporting part
Expand All @@ -140,7 +160,8 @@ const Setup = (): JSX.Element => {
updateSetupStatus({
stage: 'spawn-captain',
status: 'error',
message: 'Something went wrong when starting Flojoy Studio...'
message: 'Something went wrong when starting Flojoy Studio...',
percent: 0
});
setErrorTitle('Something went wrong :(');
// TODO: automate the log reporting part
Expand Down Expand Up @@ -176,6 +197,8 @@ const Setup = (): JSX.Element => {
return status;
});
});
setLatestStatus(setupStatus.message);
setProgress(setupStatus.percent);
};

useEffect(() => {
Expand Down Expand Up @@ -203,7 +226,8 @@ const Setup = (): JSX.Element => {
updateSetupStatus({
stage: 'check-pipx-installation',
status: 'running',
message: 'Checking if Pipx is installed on this machine!'
message: 'Checking if Pipx is installed on this machine!',
percent: 30
});
checkPipxInstallation();
break;
Expand All @@ -212,7 +236,8 @@ const Setup = (): JSX.Element => {
updateSetupStatus({
stage: 'install-dependencies',
status: 'running',
message: 'Working hard to set everything up! This may take a while for the first time...'
message: 'Working hard to set everything up! This may take a while for the first time...',
percent: 50
});
installDependencies();
break;
Expand All @@ -221,55 +246,81 @@ const Setup = (): JSX.Element => {
updateSetupStatus({
stage: 'spawn-captain',
status: 'running',
message: 'Almost there, starting Flojoy Studio...'
message: 'Almost there, starting Flojoy Studio...',
percent: 70
});
spawnCaptain();
break;
}
}
}, [setupStatuses]);

const { readyState } = useWebSocket('ws://localhost:2333/status', {
retryOnError: true,
shouldReconnect: () => true
});

useEffect(() => {
if (readyState === ReadyState.OPEN) {
setCaptainReady(true);
} else {
setCaptainReady(false);
}
}, [readyState]);

useEffect(() => {
if (captainReady) {
console.log('LOOOOL');
trpcClient.spawnFlowWindow.mutate();
}
}, [captainReady]);

return (
<div className="main-content flex flex-col items-center p-4">
<div className="py-4"></div>
<div className="text-4xl font-bold">Welcome to Flojoy Studio!</div>
<div className="py-1"></div>
<div className="">
We are excited to have you here, please give us some time to get everything ready :)
</div>
<div className="flex h-screen flex-col">
{/* <div className="py-4"></div> */}
{/* <div className="text-4xl font-bold">Welcome to Flojoy Studio!</div> */}
{/* <div className="py-1"></div> */}
{/* <div className=""> */}
{/* We are excited to have you here, please give us some time to get everything ready :) */}
{/* </div> */}
{/**/}
{/* <div className="py-4"></div> */}
{/**/}
{/* <div className="flex flex-col gap-2 rounded-xl bg-background p-4 md:w-1/2"> */}
{/* {setupStatuses.map((status, idx) => ( */}
{/* <SetupStep status={status.status} key={idx} message={status.message} /> */}
{/* ))} */}
{/* </div> */}
{/**/}
{/* <div className="py-4"></div> */}
{/**/}
{/* {setupStatuses.find((status) => status.status === 'error') && ( */}
{/* <Button */}
{/* onClick={async (): Promise<void> => { */}
{/* if (isPackaged()) { */}
{/* await trpcClient.restartFlojoyStudio.mutate(); */}
{/* } else { */}
{/* alert( */}
{/* 'Restart is not supported for dev build, please relaunch Flojoy Studio manually!' */}
{/* ); */}
{/* } */}
{/* }} */}
{/* > */}
{/* Retry */}
{/* </Button> */}
{/* )} */}

<div className="py-4"></div>
<div className="grow"></div>

<div className="flex flex-col gap-2 rounded-xl bg-background p-4 md:w-1/2">
{setupStatuses.map((status, idx) => (
<SetupStep status={status.status} key={idx} message={status.message} />
))}
<div className="flex items-center px-4">
<img src={logo} alt="logo" className="h-20 w-20" />
<span className="font-ponymaker text-flojoy text-6xl">Flojoy</span>
</div>

<div className="py-4"></div>
<div className="py-2"></div>
<div className="px-8 text-sm">{latestStatus}</div>
<div className="py-2"></div>

{setupStatuses.find((status) => status.status === 'error') && (
<Button
onClick={async (): Promise<void> => {
if (isPackaged()) {
await trpcClient.restartFlojoyStudio.mutate();
} else {
alert(
'Restart is not supported for dev build, please relaunch Flojoy Studio manually!'
);
}
}}
>
Retry
</Button>
)}
<Progress value={progress} className="h-2 w-full rounded-none" />

<AlertDialog open={showError} onOpenChange={setShowError}>
<AlertDialogContent>
Expand Down
Loading

0 comments on commit 748b08f

Please sign in to comment.