feat: adds retry method

.eslintrc.json

@@ -19,6 +19,7 @@
     "@typescript-eslint/no-unused-vars": "error",
     "tailwind/class-order": "error",
     "jsx-a11y/no-onchange": "off",
+    "jsx-a11y/anchor-is-valid": "off",
     "prettier/prettier": [
       "error",
       {

src/components/Templates/Project/Planner/index.tsx

@@ -1,4 +1,5 @@
 import Head from 'next/head';
+import Link from 'next/link';
 import React, { useState } from 'react';
 import { FormattedMessage, useIntl } from 'react-intl';
 import Image from 'next/image';
@@ -48,9 +49,9 @@ const LoadingState: React.FC = () => {
   );
 };
 
-type ErrorStateProps = Pick<PlannerTemplateProps, 'error' | 'handleTryAgain'>;
+type ErrorStateProps = Pick<PlannerTemplateProps, 'slug' | 'error' | 'handleTryAgain'>;
 
-const ErrorState: React.FC<ErrorStateProps> = ({ error }) => {
+const ErrorState: React.FC<ErrorStateProps> = ({ error, handleTryAgain, slug }) => {
   const { errorMessage } = useUnityPlayerContext();
 
   const intl = useIntl();
@@ -69,17 +70,34 @@ const ErrorState: React.FC<ErrorStateProps> = ({ error }) => {
       </p>
 
       {error && (
-        <Button className="mt-4">
+        <Button className="mt-4" onClick={handleTryAgain}>
           <FormattedMessage id="common.tryAgain" />
         </Button>
       )}
+
+      {errorMessage && (
+        <Link
+          href={{
+            pathname: '/project/[slug]/planner',
+            query: { slug }
+          }}
+          // disable prefetch to hard refresh
+          prefetch={false}
+        >
+          <a>
+            <Button className="mt-4">
+              <FormattedMessage id="common.tryAgain" />
+            </Button>
+          </a>
+        </Link>
+      )}
     </CenterContent>
   );
 };
 
 type PlannerProps = PlannerTemplateProps;
 
-const Planner: React.FC<PlannerProps> = ({ data, loading, error, handleTryAgain }) => {
+const Planner: React.FC<PlannerProps> = ({ slug, data, loading, error, handleTryAgain }) => {
   const { loadingProgress, state } = useUnityPlayerContext();
 
   return (
@@ -96,21 +114,22 @@ const Planner: React.FC<PlannerProps> = ({ data, loading, error, handleTryAgain
         {/* Content on top of unity player */}
         <div className="absolute inset-0 pointer-events-none">
           {(state === 'loading' || loading) && <LoadingState />}
-          {(state === 'error' || error) && <ErrorState handleTryAgain={handleTryAgain} error={error} />}
+          {(state === 'error' || error) && <ErrorState slug={slug} handleTryAgain={handleTryAgain} error={error} />}
         </div>
       </div>
     </div>
   );
 };
 
 type PlannerTemplateProps = {
+  slug: string;
   data?: PlannerQuery;
   loading: boolean;
   error?: string;
   handleTryAgain: () => void;
 };
 
-const PlannerTemplate: React.FC<PlannerTemplateProps> = ({ data, loading, error, handleTryAgain }) => {
+const PlannerTemplate: React.FC<PlannerTemplateProps> = ({ slug, data, loading, error, handleTryAgain }) => {
   const intl = useIntl();
 
   return (
@@ -125,7 +144,7 @@ const PlannerTemplate: React.FC<PlannerTemplateProps> = ({ data, loading, error,
       </Head>
       <div id="build-template">
         <UnityPlayerProvider>
-          <Planner data={data} loading={loading} error={error} handleTryAgain={handleTryAgain} />
+          <Planner slug={slug} data={data} loading={loading} error={error} handleTryAgain={handleTryAgain} />
         </UnityPlayerProvider>
       </div>
     </>

src/components/Templates/Project/Planner/styles.tsx

@@ -1,6 +1,6 @@
 import styled, { StyledComponent } from 'styled-components';
 
 export const CenterContent = styled.div.attrs(() => ({
-  className: 'flex flex-col items-center justify-center w-full h-full'
+  className: 'flex flex-col items-center justify-center w-full h-full pointer-events-auto'
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
 }))`` as StyledComponent<'div', any, Record<string, unknown>, never>;

src/pages/project/[slug]/planner.tsx

@@ -23,7 +23,6 @@ const PlannerContainer: NextPage<PlannerContainerProps> = ({ slug, data: ssrData
   // ***********
 
   // ** Queries
-  // Get the profile details(this query will probably get the info from the apollo cache)
   const [getPlanner, { data, error: queryError, refetch, loading }] = usePlannerLazyQuery({
     // This makes the "loading" state to be updated when we run "refetch"
     // if we don't do this, it'll run in background and state will only be updated if the query finishes
@@ -57,7 +56,15 @@ const PlannerContainer: NextPage<PlannerContainerProps> = ({ slug, data: ssrData
     }
   }, [refetch]);
 
-  return <PlannerTemplate data={data || ssrData} loading={loading} error={error} handleTryAgain={handleTryAgain} />;
+  return (
+    <PlannerTemplate
+      slug={slug}
+      data={data || ssrData}
+      loading={loading}
+      error={error}
+      handleTryAgain={handleTryAgain}
+    />
+  );
 };
 
 export const getServerSideProps: GetServerSideProps<WithApolloProps<PlannerServerSideProps>, PlannerParams> = async ({