Implement layout for Deploy section of creating new project (#7)

* Implement layout for deploy page

* Add time functionality in deploy page

---------

Co-authored-by: neeraj <neeraj.rtly@gmail.com>

packages/frontend/package.json

@@ -18,6 +18,7 @@
     "react-router-dom": "^6.20.1",
     "react-scripts": "5.0.1",
     "react-tabs": "^6.0.2",
+    "react-timer-hook": "^3.0.7",
     "typescript": "^4.9.5",
     "web-vitals": "^2.1.4"
   },

packages/frontend/src/components/DeployStep.tsx

@@ -0,0 +1,67 @@
+import React, { useState } from 'react';
+
+import { Stopwatch, setStopWatchOffset } from './StopWatch';
+import FormatMillisecond from './FormatMilliSecond';
+
+const PROCESS_LOG =
+  "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.";
+
+enum DeployStatus {
+  PROCESSING = 'progress',
+  COMPLETE = 'complete',
+  NOT_STARTED = 'notStarted',
+}
+
+interface DeployStepsProps {
+  status: DeployStatus;
+  title: string;
+  step?: string;
+  startTime?: string;
+  processTime?: string;
+}
+
+const DeployStep = ({
+  step,
+  status,
+  title,
+  startTime,
+  processTime,
+}: DeployStepsProps) => {
+  const [collapse, setCollapse] = useState(false);
+
+  return (
+    <>
+      <div className="border-b-2 border-slate-200 flex justify-between p-2 gap-2">
+        {status === DeployStatus.NOT_STARTED && <div>{step}</div>}
+        {status === DeployStatus.PROCESSING && <div>O</div>}
+        {status === DeployStatus.COMPLETE && (
+          <div>
+            <button
+              onClick={() => {
+                setCollapse(!collapse);
+              }}
+            >
+              {collapse ? '-' : '+'}
+            </button>
+          </div>
+        )}
+        <div className="grow">{title}</div>
+        {status === DeployStatus.PROCESSING && (
+          <>
+            ^<Stopwatch offsetTimestamp={setStopWatchOffset(startTime!)} />
+          </>
+        )}
+        {status === DeployStatus.COMPLETE && (
+          <>
+            ^<FormatMillisecond time={Number(processTime)} />{' '}
+          </>
+        )}
+      </div>
+      <div className={`text-sm ${!collapse ? 'hidden' : ''}`}>
+        {PROCESS_LOG}
+      </div>
+    </>
+  );
+};
+
+export { DeployStep, DeployStatus };

packages/frontend/src/components/FormatMilliSecond.tsx

@@ -0,0 +1,18 @@
+import { Duration } from 'luxon';
+import React from 'react';
+
+const FormatMillisecond = ({ time }: { time: number }) => {
+  const formatTime = Duration.fromMillis(time)
+    .shiftTo('days', 'hours', 'minutes', 'seconds')
+    .toObject();
+  return (
+    <div>
+      {formatTime.days !== 0 && <span>{formatTime.days}d&nbsp;</span>}
+      {formatTime.hours !== 0 && <span>{formatTime.hours}h&nbsp;</span>}
+      {formatTime.minutes !== 0 && <span>{formatTime.minutes}m&nbsp;</span>}
+      <span>{formatTime.seconds}s</span>
+    </div>
+  );
+};
+
+export default FormatMillisecond;

packages/frontend/src/components/StopWatch.tsx

@@ -0,0 +1,23 @@
+import React from 'react';
+import { useStopwatch } from 'react-timer-hook';
+
+import FormatMillisecond from './FormatMilliSecond';
+
+const setStopWatchOffset = (time: string) => {
+  const providedTime = new Date(time);
+  const currentTime = new Date();
+  const timeDifference = currentTime.getTime() - providedTime.getTime();
+  currentTime.setMilliseconds(currentTime.getMilliseconds() + timeDifference);
+  return currentTime;
+};
+
+const Stopwatch = ({ offsetTimestamp }: { offsetTimestamp: Date }) => {
+  const { totalSeconds } = useStopwatch({
+    autoStart: true,
+    offsetTimestamp: offsetTimestamp,
+  });
+
+  return <FormatMillisecond time={totalSeconds * 1000} />;
+};
+
+export { Stopwatch, setStopWatchOffset };

packages/frontend/src/pages/projects/Create.tsx

@@ -3,6 +3,7 @@ import { Outlet, useNavigate } from 'react-router-dom';
 
 const CreateProject = () => {
   const navigate = useNavigate();
+
   return (
     <div className="bg-white rounded-3xl h-full p-4">
       <div className="flex p-2">

packages/frontend/src/pages/projects/create/Template.tsx

@@ -1,6 +1,5 @@
 import React from 'react';
-
-import CreateRepo from '../../../components/CreateRepo';
+import { Outlet } from 'react-router-dom';
 
 const CreateWithTemplate = () => {
   return (
@@ -16,7 +15,7 @@ const CreateWithTemplate = () => {
           <div>2 Deploy</div>
         </div>
         <div className="col-span-2">
-          <CreateRepo />
+          <Outlet />
         </div>
       </div>
     </div>

packages/frontend/src/pages/projects/create/routes.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 
 import NewProject from './index';
 import CreateWithTemplate from './Template';
+import { templateRoutes } from './template/routes';
 
 export const createProjectRoutes = [
   {
@@ -11,5 +12,6 @@ export const createProjectRoutes = [
   {
     path: 'template',
     element: <CreateWithTemplate />,
+    children: templateRoutes,
   },
 ];

packages/frontend/src/pages/projects/create/template/Deploy.tsx

@@ -0,0 +1,52 @@
+import React from 'react';
+
+import { DeployStep, DeployStatus } from '../../../../components/DeployStep';
+import {
+  Stopwatch,
+  setStopWatchOffset,
+} from '../../../../components/StopWatch';
+
+const Deploy = () => {
+  return (
+    <div>
+      <div className="flex justify-between mb-6">
+        <div>
+          <h4>Deployment started ...</h4>
+          <div className="flex">
+            ^&nbsp;
+            <Stopwatch
+              offsetTimestamp={setStopWatchOffset(Date.now().toString())}
+            />
+          </div>
+        </div>
+        <div>
+          <button className="border rounded-xl p-1 text-sm">^Cancel</button>
+        </div>
+      </div>
+      <DeployStep
+        title="Building"
+        status={DeployStatus.COMPLETE}
+        step="1"
+        processTime="72000"
+      />
+      <DeployStep
+        title="Deployment summary"
+        status={DeployStatus.PROCESSING}
+        step="2"
+        startTime={Date.now().toString()}
+      />
+      <DeployStep
+        title="Running checks"
+        status={DeployStatus.NOT_STARTED}
+        step="3"
+      />
+      <DeployStep
+        title="Assigning domains"
+        status={DeployStatus.NOT_STARTED}
+        step="4"
+      />
+    </div>
+  );
+};
+
+export default Deploy;

packages/frontend/src/pages/projects/create/template/index.tsx

@@ -1,7 +1,8 @@
 import React from 'react';
 import { useForm, Controller } from 'react-hook-form';
+import { Link } from 'react-router-dom';
 
-import Dropdown from './Dropdown';
+import Dropdown from '../../../../components/Dropdown';
 
 const USER_OPTIONS = [
   { value: 'saugatyadav1', label: 'saugatyadav1' },
@@ -88,9 +89,11 @@ const CreateRepo = () => {
         </label>
       </div>
       <div className="mb-2">
+        <Link to={'/projects/create/template/deploy'}>
           <button className="bg-blue-500 rounded-xl p-2" type="submit">
             Deploy ^
           </button>
+        </Link>
       </div>
     </form>
   );

packages/frontend/src/pages/projects/create/template/routes.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+
+import CreateRepo from './index';
+import Deploy from './Deploy';
+
+export const templateRoutes = [
+  {
+    index: true,
+    element: <CreateRepo />,
+  },
+  {
+    path: 'deploy',
+    element: <Deploy />,
+  },
+];

yarn.lock

@@ -10280,6 +10280,11 @@ react-tabs@^6.0.2:
     clsx "^2.0.0"
     prop-types "^15.5.0"
 
+react-timer-hook@^3.0.7:
+  version "3.0.7"
+  resolved "https://registry.yarnpkg.com/react-timer-hook/-/react-timer-hook-3.0.7.tgz#ac42c43d0034b873cbf97b44eb34ccb2b11fe5e0"
+  integrity sha512-ATpNcU+PQRxxfNBPVqce2+REtjGAlwmfoNQfcEBMZFxPj0r3GYdKhyPHdStvqrejejEi0QvqaJZjy2lBlFvAsA==
+
 react@^18.2.0:
   version "18.2.0"
   resolved "https://registry.npmjs.org/react/-/react-18.2.0.tgz"