fix: render codesandbox ci on the client (#73)

* fix: render codesandbox ci on the client * fix minor check
codesandbox · May 20, 2024 · 6038c93 · 6038c93
1 parent 4fcfd1e
commit 6038c93
Show file tree

Hide file tree

Showing 8 changed files with 150 additions and 104 deletions.
diff --git a/components/StatusPage.tsx b/components/StatusPage.tsx
@@ -1,29 +1,32 @@
-import React, { useEffect } from "react";
-import styled from "styled-components";
-import { useRouter } from "next/router";
-import JavascriptTimeAgo from "javascript-time-ago";
+'use client';
+
+import React, { useEffect, useState } from 'react';
+import styled from 'styled-components';
+import { useRouter } from 'next/router';
+import JavascriptTimeAgo from 'javascript-time-ago';
 // The desired locales.
-import en from "javascript-time-ago/locale/en";
-
-import { HEADER_HEIGHT } from "./Header";
-import { StatusListItem } from "./StatusListItem";
-import { StatusList } from "./StatusList";
-import { Details } from "./Details";
-import { IPR, IBuild, getPrs, getBuilds, getPr } from "../utils/api";
-import { Layout } from "./Layout";
-import { SkeletonStatusPage } from "./SkeletonStatusPage";
-import { useGlobalState } from "../utils/state";
-import { colors } from "../theme/colors";
+import en from 'javascript-time-ago/locale/en';
+
+import { HEADER_HEIGHT } from './Header';
+import { StatusListItem } from './StatusListItem';
+import { StatusList } from './StatusList';
+import { Details } from './Details';
+import { IPR, IBuild, getPrs, getBuilds, getPr } from '../utils/api';
+import { Layout } from './Layout';
+import { SkeletonStatusPage } from './SkeletonStatusPage';
+import { useGlobalState } from '../utils/state';
+import { colors } from '../theme/colors';
 import {
   LEARN_MORE_DOCUMENT_URL,
-  INSTALL_GITHUB_URL
-} from "../utils/constants";
-import { BUILD_LINK, buildLink, PR_LINK, prLink } from "../utils/url";
-import { SetupPage } from "./SetupPage";
-import { Button } from "./_elements";
+  INSTALL_GITHUB_URL,
+} from '../utils/constants';
+import { BUILD_LINK, buildLink, PR_LINK, prLink } from '../utils/url';
+import { SetupPage } from './SetupPage';
+import { Button } from './_elements';
+import { useParams } from 'next/navigation';
 
 // Initialize the desired locales.
-JavascriptTimeAgo.locale(en);
+JavascriptTimeAgo.addLocale(en);
 
 type WrapperProps = {
   selectedPr?: string | string[];
@@ -44,22 +47,22 @@ const ErrorMessage = styled.p`
 const WrapperPRS = styled.div<WrapperProps>`
   @media screen and (max-width: 768px) {
     display: ${props =>
-      props.selectedPr || props.selectedBuild ? "none" : "block"};
+      props.selectedPr || props.selectedBuild ? 'none' : 'block'};
     width: 100%;
   }
 `;
 
 const WrapperBuilds = styled.div<WrapperProps>`
   @media screen and (max-width: 768px) {
     display: ${props =>
-      !props.selectedPr || props.selectedBuild ? "none" : "block"};
+      !props.selectedPr || props.selectedBuild ? 'none' : 'block'};
     width: 100%;
   }
 `;
 
 const WrapperDetails = styled.div<WrapperProps>`
   @media screen and (max-width: 768px) {
-    display: ${props => (!props.selectedBuild ? "none" : "block")};
+    display: ${props => (!props.selectedBuild ? 'none' : 'block')};
   }
   width: 100%;
   overflow: hidden;
@@ -86,9 +89,9 @@ const StatusPage = ({
   builds,
   notFound,
   showSetup,
-  error
+  error,
 }: StatusPageProps) => {
-  const [statePrs, setPrs] = useGlobalState("prs");
+  const [statePrs, setPrs] = useGlobalState('prs');
   const usedPrs = statePrs || prs;
   const { query: params } = useRouter();
 
@@ -104,9 +107,9 @@ const StatusPage = ({
     return (
       <SkeletonStatusPage>
         <ErrorMessage>
-          {typeof error === "string"
+          {typeof error === 'string'
             ? error
-            : "We could not find the repository you were looking for, have you installed the GitHub App?"}
+            : 'We could not find the repository you were looking for, have you installed the GitHub App?'}
         </ErrorMessage>
 
         <Button href={INSTALL_GITHUB_URL}>Install GitHub App</Button>
@@ -178,7 +181,7 @@ const StatusPage = ({
                 selected={pr.number === selectedPrNumber}
                 link={{
                   href: PR_LINK,
-                  as: prLink(username, repo, pr.number)
+                  as: prLink(username, repo, pr.number),
                 }}
               />
             ))}
@@ -199,7 +202,7 @@ const StatusPage = ({
                 selected={build.id === selectedBuildId}
                 link={{
                   href: BUILD_LINK,
-                  as: buildLink(username, repo, selectedPrNumber, build.id)
+                  as: buildLink(username, repo, selectedPrNumber, build.id),
                 }}
               />
             ))}
@@ -221,46 +224,76 @@ const StatusPage = ({
   );
 };
 
+export const ClientSideStatusPage = () => {
+  const [data, setData] = useState(undefined);
+  const { query: params } = useRouter();
+
+  useEffect(() => {
+    if (!params.username) {
+      return;
+    }
+
+    fetchData(params).then(data => {
+      setData(data);
+    });
+  }, [params]);
+
+  if (!data) {
+    return;
+  }
+
+  if (data.notFound) {
+    // @ts-expect-error
+    return <StatusPage notFound />;
+  }
+
+  if (data.error) {
+    // @ts-expect-error
+    return <StatusPage error={data.error} />;
+  }
+
+  return <StatusPage {...data.props} />;
+};
+
 function getTitle(username: string, repo: string, buildId?: number) {
   let title = `${username}/${repo}`;
 
-  if (typeof buildId !== "undefined") {
+  if (typeof buildId !== 'undefined') {
     title += ` #${buildId}`;
   }
 
   return title;
 }
 
-StatusPage.getInitialProps = async ({
-  query,
-  res
-}): Promise<
-  { title?: string } & (
-    | StatusPageProps
-    | { notFound: true; error?: string }
-    | { showSetup: true }
-    | { error: true })
-> => {
+export const getServerSideProps = async ({ query, res }) => {
+  return fetchData(query, res);
+};
+
+export const fetchData = async (query, res = undefined) => {
   try {
     const { username, repo } = query;
 
-    if (!username) {
-      throw new Error("Please define a username");
+    if (!username || Array.isArray(username)) {
+      throw new Error('Please define a username');
     }
 
-    if (!repo) {
-      throw new Error("Please define a repo");
+    if (!repo || Array.isArray(repo)) {
+      throw new Error('Please define a repo');
     }
 
     const { prs } = await getPrs(username, repo);
 
     if (prs.length === 0) {
       // No PRs have been registered yet
 
-      return { showSetup: true, title: "CodeSandbox CI Installed" };
+      return { showSetup: true, title: 'CodeSandbox CI Installed' };
     }
 
-    let prNumber = query.prNumber;
+    let prNumber =
+      query.prNumber && !Array.isArray(query.prNumber)
+        ? +query.prNumber
+        : undefined;
+
     if (!prNumber) {
       prNumber = prs[0].number;
     }
@@ -274,16 +307,15 @@ StatusPage.getInitialProps = async ({
       } catch (e) {
         return {
           notFound: true,
-          error: "We could not find the PR you were looking for"
+          error: 'We could not find the PR you were looking for',
         };
       }
       prs.unshift(selectedPR);
     }
-    let buildId = query.buildId;
-    if (!buildId) {
-      buildId = selectedPR.latestBuildId;
-    }
-    buildId = +buildId;
+    let buildId =
+      query.buildId && !Array.isArray(query.buildId)
+        ? +query.buildId
+        : selectedPR.latestBuildId;
 
     const { builds } = await getBuilds(username, repo, prNumber);
 
@@ -302,31 +334,30 @@ StatusPage.getInitialProps = async ({
             repo,
             selectedPR.number,
             selectedPR.latestBuild.id
-          )
+          ),
         });
         res.end();
         return;
       }
     }
 
     return {
-      username,
-      repo,
-      prs,
-      builds,
-      selectedPrNumber: prNumber,
-      selectedBuildId: buildId,
-      title: getTitle(username, repo, buildId)
+      props: {
+        username,
+        repo,
+        prs,
+        builds,
+        selectedPrNumber: prNumber,
+        selectedBuildId: buildId,
+        title: getTitle(username, repo, buildId),
+      },
     };
   } catch (e) {
     console.error(e);
-    if (e.response) {
-      if (res) {
-        res.status = e.response.status;
-      }
 
+    if (e.response) {
       if (e.response.status === 404) {
-        return { notFound: true, title: "Not Found" };
+        return { notFound: true, title: 'Not Found' };
       } else {
         return { error: true };
       }

diff --git a/components/TimeAgo.tsx b/components/TimeAgo.tsx
@@ -5,7 +5,7 @@ interface Props {
 }
 
 export const TimeAgo = ({ date, ...props }: Props) => (
-  <span title={new Date(date).toString()}>
-    <ReactTimeAgo date={date} {...props} />
+  <span suppressHydrationWarning title={new Date(date).toString()}>
+    <ReactTimeAgo suppressHydrationWarning date={date} {...props} />
   </span>
 );
diff --git a/package.json b/package.json
@@ -15,6 +15,7 @@
     "amplitude-js": "^5.6.0",
     "ansi-to-react": "^5.0.0",
     "axios": "^0.28.0",
+    "javascript-time-ago": "^2.5.10",
     "lru-cache": "^5.1.1",
     "next": "^14.0.0",
     "nprogress": "^0.2.0",
@@ -27,7 +28,8 @@
     "react-time-ago": "^7.2.1",
     "react-virtualized-auto-sizer": "^1.0.2",
     "react-window": "^1.8.5",
-    "styled-components": "^6.1.0"
+    "styled-components": "^6.1.0",
+    "swr": "^2.2.5"
   },
   "devDependencies": {
     "@types/amplitude-js": "^4.4.5",

diff --git a/pages/status/[username]/[repo]/index.tsx b/pages/status/[username]/[repo]/index.tsx
@@ -1,3 +1,8 @@
-import { StatusPage } from '../../../../components/StatusPage';
+import {
+  StatusPage,
+  ClientSideStatusPage,
+  getServerSideProps,
+} from '../../../../components/StatusPage';
 
-export default StatusPage;
+// export { getServerSideProps };
+export default ClientSideStatusPage;
diff --git a/pages/status/[username]/[repo]/pr/[prNumber]/builds/[buildId]/index.tsx b/pages/status/[username]/[repo]/pr/[prNumber]/builds/[buildId]/index.tsx
@@ -1,3 +1,8 @@
-import { StatusPage } from '../../../../../../../../components/StatusPage';
+import {
+  StatusPage,
+  ClientSideStatusPage,
+  getServerSideProps,
+} from '../../../../../../../../components/StatusPage';
 
-export default StatusPage;
+// export { getServerSideProps };
+export default ClientSideStatusPage;
diff --git a/pages/status/[username]/[repo]/pr/[prNumber]/index.tsx b/pages/status/[username]/[repo]/pr/[prNumber]/index.tsx
@@ -1,3 +1,8 @@
-import { StatusPage } from '../../../../../../components/StatusPage';
+import {
+  StatusPage,
+  ClientSideStatusPage,
+  getServerSideProps,
+} from '../../../../../../components/StatusPage';
 
-export default StatusPage;
+// export { getServerSideProps };
+export default ClientSideStatusPage;
diff --git a/utils/api.ts b/utils/api.ts
@@ -94,7 +94,7 @@ export async function getPrs(
 export async function getPr(
   username: string,
   repo: string,
-  pr: string
+  pr: number
 ): Promise<IPRResponse> {
   const key = `${username}/${repo}/${pr}`;
   let prPromise = prCache.get(key);