fixes

riccardoperra · Oct 30, 2024 · 929c3db · 929c3db
1 parent 1ab906e
commit 929c3db
Show file tree

Hide file tree

Showing 4 changed files with 55 additions and 54 deletions.
diff --git a/packages/app/src/components/Home/Home.tsx b/packages/app/src/components/Home/Home.tsx
@@ -25,79 +25,85 @@ import {RepoCard} from './RepoCard/RepoCard';
 import {RepoCardFallback} from './RepoCard/RepoCardFallback';
 import {RepoSearch} from './RepoSearch/RepoSearch';
 import {ScratchList} from './ScratchList/ScratchList';
+import {OverlayLoader} from '~/ui/components/Loader/Loader';
 
-export const searchRepo = cache(
-  async (path: string | null) => (path ? getGithubData(path) : null),
-  'search-repo',
-);
+export const searchRepo = cache(async (path: string | null) => {
+  'use server';
+  if (!path) {
+    return null;
+  }
+  try {
+    const result = await getGithubData(path);
+    return {...result, error: null};
+  } catch (e) {
+    return {error: e as Error};
+  }
+}, 'repository');
 
 export function Home() {
-  const user = createAsync(() => loggedInUser());
+  const user = createAsync(() => loggedInUser(), {deferStream: true});
   const isCreatingScratch = useSubmission(createScratch);
   const [params] = useSearchParams();
   const repo = createAsync(() => searchRepo(params.repo as string | null));
 
   return (
-    <div class={homeLayoutWrapper}>
-      <div class={loggedInBar}>
-        <Suspense>
+    <Suspense fallback={<OverlayLoader />}>
+      <div class={homeLayoutWrapper}>
+        <div class={loggedInBar}>
           <CurrentUserBar user={user() || null} />
-        </Suspense>
-      </div>
+        </div>
 
-      <div class={homeContainer}>
-        <HomeTitle />
-        <div class={content}>
-          <Suspense>
+        <div class={homeContainer}>
+          <HomeTitle />
+          <div class={content}>
             <RepoSearch />
-          </Suspense>
 
-          <ErrorBoundary
-            fallback={(err, reset) => (
-              <div class={errorBanner}>{err.message}</div>
-            )}
-          >
             <Suspense fallback={<RepoCardFallback />}>
-              <Show when={repo()}>
+              <Show when={repo()} keyed>
                 {repo => {
-                  const [pendingTask] = useTransition();
-                  pendingTask();
                   return (
-                    <RepoCard
-                      repo={repo()!.repo}
-                      workflows={repo()!.workflows}
-                    />
+                    <Show
+                      fallback={
+                        <div class={errorBanner}>{repo.error?.message}</div>
+                      }
+                      when={repo.error === null && repo}
+                    >
+                      {repo => (
+                        <RepoCard
+                          repo={repo().repo}
+                          workflows={repo()!.workflows}
+                        />
+                      )}
+                    </Show>
                   );
                 }}
               </Show>
             </Suspense>
-          </ErrorBoundary>
 
-          <div class={choiceSeparator}>Or</div>
+            <div class={choiceSeparator}>Or</div>
 
-          <form action={createScratch.with()} class={form} method={'post'}>
-            <Button
-              loading={isCreatingScratch.pending}
-              block
-              theme={'tertiary'}
-              type={'submit'}
-              size={'lg'}
-            >
-              Create from scratch
-            </Button>
-          </form>
+            <form action={createScratch.with()} class={form} method={'post'}>
+              <Button
+                loading={isCreatingScratch.pending}
+                block
+                theme={'tertiary'}
+                type={'submit'}
+                size={'lg'}
+              >
+                Create from scratch
+              </Button>
+            </form>
 
-          <Suspense>
             <Show when={user()}>
               <div class={choiceSeparator}>Your scratches & forks</div>
 
               <ScratchList />
             </Show>
-          </Suspense>
-        </div>
+          </div>
 
-        <HomeFooter />
+          <HomeFooter />
+        </div>
       </div>
-    </div>
+    </Suspense>
   );
 }
diff --git a/packages/app/src/lib/githubApi.ts b/packages/app/src/lib/githubApi.ts
@@ -23,7 +23,6 @@ export type FetchResponse<T, E = unknown> =
 export async function getGithubRepo(
   name: string,
 ): Promise<FetchResponse<GithubGetRepositoryResponse, Error>> {
-  'use server';
   const response = await fetch(`https://ungh.cc/repos/${name}`);
   if (!response.ok) {
     if (response.status === 404) {
@@ -62,7 +61,6 @@ export function getGithubRepoFiles(
   repo: string,
   branch: string,
 ): Promise<GithubRepositoryFileResponse> {
-  'use server';
   return fetch(`https://ungh.cc/repos/${repo}/files/${branch}`).then(response =>
     response.json(),
   );
@@ -82,7 +80,6 @@ export async function getGithubRepoFileContent(
   branch: string,
   path: string,
 ): Promise<FetchResponse<GithubRepositoryFileContent, Error>> {
-  'use server';
   const response = await fetch(
     `https://ungh.cc/repos/${repo}/files/${branch}/${path}`,
   );
@@ -105,7 +102,6 @@ export function getGithubRepoWorkflowFiles(
   repo: string,
   branch: string,
 ): Promise<GithubRepositoryFile[]> {
-  'use server';
   return getGithubRepoFiles(repo, branch).then(response => {
     return response.files.filter(file =>
       file.path.startsWith('.github/workflows'),
@@ -120,7 +116,6 @@ class SearchRepoError extends Error {
 }
 
 export async function getGithubData(path: string) {
-  'use server';
   const result = await getGithubRepo(path);
   if (result.error) {
     throw new SearchRepoError(result.error.message);

diff --git a/packages/app/src/lib/scratchApi.ts b/packages/app/src/lib/scratchApi.ts
@@ -189,4 +189,4 @@ export const listUserScratches = cache(async () => {
   return database.listDocuments(databaseId, scratchCollectionId, [
     Query.equal('userId', user.$id),
   ]);
-}, 'list-scratches');
+}, 'list_scratches');
diff --git a/packages/app/src/ui/components/Loader/Loader.module.css b/packages/app/src/ui/components/Loader/Loader.module.css
@@ -22,11 +22,11 @@
   position: absolute;
   left: 0;
   top: 0;
-  width: '100%';
-  height: '100%';
+  width: 100%;
+  height: 100%;
   backdrop-filter: blur(30px);
   display: flex;
   align-items: center;
   justify-content: center;
-  background: rgba(0, 0, 0, 0.3);
+  background: rgba(0, 0, 0, 0.9);
 }