Solidjs create folder navigation (#1032)

* updated card to handle undefine * remove redundancy code * create repo route to serve as layout for all related repo pages * repo details page * update component base on repo context * updated test * test update
thisdot · Dec 14, 2022 · 37f914d · 37f914d
1 parent b036c33
commit 37f914d
Show file tree

Hide file tree

Showing 18 changed files with 309 additions and 156 deletions.
diff --git a/qwik-graphql-tailwind/src/routes/[owner]/[name]/index.tsx b/qwik-graphql-tailwind/src/routes/[owner]/[name]/index.tsx
@@ -7,9 +7,7 @@ import { parseTopics } from './parseTopics';
 import { RepoTree } from '~/components/repo-tree';
 import { RepoReadMe } from '~/components/repo-read-me';
 import { RepoAboutWidget } from '~/components/repo-about';
-import { ISSUES_QUERY } from '~/utils/queries/issues-query';
 import { BranchNavigation } from '~/components/branch-navigation';
-import { PULL_REQUEST_QUERY } from '~/utils/queries/pull-request';
 import { RepoHeader } from '~/components/repo-header';
 
 export interface SharedState {
@@ -48,12 +46,6 @@ export interface SharedState {
   };
 }
 
-interface IssuesPullRequestsQueryParams {
-  owner: string;
-  name: string;
-  first: number;
-}
-
 export const RepoContext = createContext<SharedState>('repo-context');
 
 export default component$(() => {
@@ -110,7 +102,7 @@ export default component$(() => {
   useContextProvider(RepoContext, store);
 
   return (
-    <div class="bg-white h-screen">
+    <div className="bg-white h-screen">
       <RepoHeader
         name={_name}
         owner={_owner}
@@ -182,49 +174,3 @@ export async function fetchRepoInfo(
 
   return await resp.json();
 }
-
-export async function fetchIssues(
-  { owner, name, first }: IssuesPullRequestsQueryParams,
-  abortController?: AbortController
-): Promise<any> {
-  const { executeQuery$ } = useQuery(ISSUES_QUERY);
-
-  const resp = await executeQuery$({
-    signal: abortController?.signal,
-    url: GITHUB_GRAPHQL,
-    variables: {
-      owner,
-      name,
-      first,
-    },
-    headersOpt: {
-      Accept: 'application/vnd.github+json',
-      authorization: `Bearer ${sessionStorage.getItem('token')}`,
-    },
-  });
-
-  return await resp.json();
-}
-
-export async function fetchPullRequests(
-  { owner, name, first }: IssuesPullRequestsQueryParams,
-  abortController?: AbortController
-): Promise<any> {
-  const { executeQuery$ } = useQuery(PULL_REQUEST_QUERY);
-
-  const resp = await executeQuery$({
-    signal: abortController?.signal,
-    url: GITHUB_GRAPHQL,
-    variables: {
-      owner,
-      name,
-      first,
-    },
-    headersOpt: {
-      Accept: 'application/vnd.github+json',
-      authorization: `Bearer ${sessionStorage.getItem('token')}`,
-    },
-  });
-
-  return await resp.json();
-}
diff --git a/solidjs-tailwind/src/App.jsx b/solidjs-tailwind/src/App.jsx
@@ -6,6 +6,10 @@ import SigninPage from './pages/Signin';
 import RedirectPage from './pages/Redirect';
 import Profile from './pages/Profile';
 import OrgProfile from './pages/OrgProfile';
+import RepoDetails from './pages/RepoDetails';
+// import RepoBlob from './pages/RepoBlob';
+import RepoTree from './pages/RepoTree';
+import { Repo } from './components/Repo';
 
 function App() {
   return (
@@ -17,6 +21,11 @@ function App() {
           <Route component={Home} path={ROUTES.HOME} />
           <Route component={Profile} path={ROUTES.PROFILE} />
           <Route component={OrgProfile} path={ROUTES.ORGPROFILE} />
+          <Route component={Repo} path={ROUTES.REPO_DETAILS}>
+            <Route component={RepoDetails} path={'/'}  />
+            <Route component={RepoTree} path={ROUTES.REPO_TREE} />
+            {/* <Route component={RepoBlob} path={ROUTES.REPO_BLOB} /> */}
+          </Route>
         </Route>
       </Routes>
     </>

diff --git a/...ponents/RepoNavigation/RepoNavigation.jsx → ...nts/BranchNavigation/BranchNavigation.jsx b/...ponents/RepoNavigation/RepoNavigation.jsx → ...nts/BranchNavigation/BranchNavigation.jsx
@@ -1,41 +1,47 @@
 import { For } from 'solid-js';
 import { Link } from '@solidjs/router';
 import { GitBranchIcon } from '../Icons';
-import styles from './RepoNavigation.module.css';
+import styles from './BranchNavigation.module.css';
+import { useParams } from '@solidjs/router';
+import { useRepo } from '../../contexts/RepoContext';
+
+function BranchNavigation() {
+  const params = useParams();
+  const { info } = useRepo();
+
+  const branch = info().branch || params.branch;
 
-function RepoNavigation(props) {
   // creates a proper GitHub url path from a repo path
   const hrefPath = (index) => {
-    const crumbPath = props.path
-      .split('/')
+    const crumbPath = params.path?.split('/')
       .filter(Boolean)
       .slice(0, index + 1)
       .join('/');
-    return `/${props.owner}/${props.name}/tree/${props.branch}/${crumbPath}`;
+    return `/${params.owner}/${params.name}/tree/${branch}/${crumbPath}`;
   };
 
   return (
     <nav class={styles.container}>
       <button class={styles.btn}>
-        <GitBranchIcon class={styles.btnIcon} /> {props.branch}{' '}
+        <GitBranchIcon class={styles.btnIcon} /> {branch}{' '}
         <span class={styles.btnCaret}>{'\u25BC'}</span>
       </button>
-      {props.path.split('/').filter(Boolean).length > 0 && (
+      {params.path?.split('/').filter(Boolean).length > 0 && (
         <div class={styles.crumbs}>
-          <Link href={`/${props.owner}/${props.name}`}>
+          <Link href={`/${params.owner}/${params.name}`}>
             <a
-              data-testid={`file explorer nav root ${props.name}`}
+              data-testid={`file explorer nav root ${params.name}`}
               class={styles.rootLink}
             >
-              {props.name}
+              {params.name}
             </a>
           </Link>
           <span class={styles.separator}>/</span>
-          <For each={props.path.split('/').filter(Boolean)}>
+          <For each={params.path?.split('/').filter(Boolean)}>
             {(crumb, index) => (
               <>
                 {index() ===
-                props.path.split('/').filter(Boolean).length - 1 ? (
+                params.path?.split('/').filter(Boolean).length - 1 ? (
                   <span
                     data-testid={`file explorer nav end ${crumb}`}
                     class={styles.crumbEnd}
@@ -64,4 +70,4 @@ function RepoNavigation(props) {
   );
 }
 
-export default RepoNavigation;
+export default BranchNavigation;
diff --git a/.../RepoNavigation/RepoNavigation.module.css → ...nchNavigation/BranchNavigation.module.css b/.../RepoNavigation/RepoNavigation.module.css → ...nchNavigation/BranchNavigation.module.css
diff --git a/...RepoNavigation/RepoNavigation.stories.jsx → ...chNavigation/BranchNavigation.stories.jsx b/...RepoNavigation/RepoNavigation.stories.jsx → ...chNavigation/BranchNavigation.stories.jsx
@@ -1,8 +1,8 @@
 import { Router } from '@solidjs/router';
-import RepoNavigation from './RepoNavigation';
+import RepoNavigation from './BranchNavigation';
 
 export default {
-  title: 'Components/Repo Navigation',
+  title: 'Components/Branch Navigation',
   component: RepoNavigation,
   argTypes: {
     name: {},

diff --git a/solidjs-tailwind/src/components/BranchNavigation/index.js b/solidjs-tailwind/src/components/BranchNavigation/index.js
@@ -0,0 +1 @@
+export { default as BranchNavigation } from './BranchNavigation';
diff --git a/solidjs-tailwind/src/components/FileExplorer/FileExplorer.jsx b/solidjs-tailwind/src/components/FileExplorer/FileExplorer.jsx
@@ -1,51 +1,80 @@
 import { For } from 'solid-js';
 import { Link } from '@solidjs/router';
-import { removeLastPathPart } from '../../utils/removeLastPathPart';
 import { document } from 'solid-heroicons/outline';
 import { folder } from 'solid-heroicons/solid';
 import { Icon } from 'solid-heroicons';
 import styles from './FileExplorer.module.css';
+import { useRepo } from '../../contexts/RepoContext';
+import { useParams } from '@solidjs/router';
+import { createResource } from 'solid-js';
+import getRepoTree from '../../services/get-repo-tree';
+import { createSignal } from 'solid-js';
+import { createEffect } from 'solid-js';
+
+const FileExplorerView = () => {
+  const [tree, setTree] = createSignal([]);
+  const { info } = useRepo();
+  const params = useParams();
+
+  const branch = params.branch || info().branch;
+  const basePath = `/${params.owner}/${params.name}`;
+  const backLink = `${basePath}/tree/${branch}/${params.path}`;
+
+  const [resTree] = createResource(`${branch}_${params.path}`, () =>
+    getRepoTree({
+      owner: params.owner,
+      name: params.name,
+      expression: `${branch}:${params.path || ''}`,
+    })
+  );
+
+  createEffect(() => {
+    if (resTree() && !resTree.loading) {
+      setTree(resTree()?.tree);
+    }
+  });
 
-const FileExplorerView = (props) => {
   return (
-    <div class={styles.container}>
-      {props.repoPath && (
-        <Link
-          href={`${props.basePath}/tree/${props.branch}/${removeLastPathPart(
-            props.repoPath
-          )}`}
-        >
-          <a class={styles.cellBack}>
-            <div class="text-blue-600">..</div>
-          </a>
-        </Link>
-      )}
-      <For each={props.items}>
-        {(item) => (
-          <div class={styles.cell}>
-            <div class="flex items-center">
-              <div class="mr-2.5">
-                {item.type === 'tree' ? (
-                  <Icon path={folder} class={styles.iconDir} />
-                ) : (
-                  <Icon path={document} class={styles.iconFile} />
-                )}
+    <>
+      {resTree.loading ? (
+        <div>Loading...</div>
+      ) : (
+        <div class={styles.container}>
+          {params.path && (
+            <Link href={backLink}>
+              <a class={styles.cellBack}>
+                <div class="text-blue-600">..</div>
+              </a>
+            </Link>
+          )}
+          <For each={tree()}>
+            {(item) => (
+              <div class={styles.cell}>
+                <div class="flex items-center">
+                  <div class="mr-2.5">
+                    {item.type === 'tree' ? (
+                      <Icon path={folder} class={styles.iconDir} />
+                    ) : (
+                      <Icon path={document} class={styles.iconFile} />
+                    )}
+                  </div>
+                  <Link
+                    href={`${basePath}/${item.type}/${branch}/${item.path}`}
+                  >
+                    <span
+                      data-testid={`file explorer list ${item.name}`}
+                      class={styles.link}
+                    >
+                      {item.name}
+                    </span>
+                  </Link>
+                </div>
               </div>
-              <Link
-                href={`${props.basePath}/${item.type}/${props.branch}/${item.path}`}
-              >
-                <a
-                  data-testid={`file explorer list ${item.name}`}
-                  class={styles.link}
-                >
-                  {item.name}
-                </a>
-              </Link>
-            </div>
-          </div>
-        )}
-      </For>
-    </div>
+            )}
+          </For>
+        </div>
+      )}
+    </>
   );
 };
 

diff --git a/solidjs-tailwind/src/components/Repo/Repo.jsx b/solidjs-tailwind/src/components/Repo/Repo.jsx
@@ -0,0 +1,12 @@
+import { Outlet } from '@solidjs/router';
+import { RepoProvider } from '../../contexts/RepoContext';
+
+const Repo = () => {
+  return (
+    <RepoProvider>
+      <Outlet />
+    </RepoProvider>
+  );
+};
+
+export default Repo;
diff --git a/solidjs-tailwind/src/components/Repo/index.jsx b/solidjs-tailwind/src/components/Repo/index.jsx
@@ -0,0 +1 @@
+export { default as Repo } from './Repo';
diff --git a/solidjs-tailwind/src/components/RepoAbout/RepoAbout.jsx b/solidjs-tailwind/src/components/RepoAbout/RepoAbout.jsx
@@ -3,16 +3,19 @@ import { Description } from './Description';
 import { HomepageUrl } from './HomePageUrl';
 import { Topics } from './Topics';
 import styles from './RepoAbout.module.css';
+import { useRepo } from '../../contexts/RepoContext';
+
+export const RepoAboutWidget = () => {
+  const {info} = useRepo();
 
-export const RepoAboutWidget = (props) => {
   return (
     <div class={styles.container}>
       <h3 class={styles.heading}>About</h3>
       <div class={styles.description}>
         <div data-testid="about-info" class="space-y-4">
-          <Description text={props.info.data?.description} />
-          <HomepageUrl homepageUrl={props.info.data?.homepageUrl} />
-          <Topics topics={props.info.data?.topics} />
+          <Description text={info().info?.description} />
+          <HomepageUrl homepageUrl={info().info?.homepageUrl} />
+          <Topics topics={info().info?.topics || []} />
         </div>
       </div>
       <div>
@@ -23,3 +26,5 @@ export const RepoAboutWidget = (props) => {
     </div>
   );
 }
+
+export default RepoAboutWidget;
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		export { default as BranchNavigation } from './BranchNavigation';