From 37f914d9ece01a48fdd9fdc15e6ed3c9c0c5054c Mon Sep 17 00:00:00 2001 From: Chinedu Ekene Okpala <36667083+AllStackDev1@users.noreply.github.com> Date: Wed, 14 Dec 2022 19:06:23 +0100 Subject: [PATCH] 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 --- .../src/routes/[owner]/[name]/index.tsx | 56 +-------- solidjs-tailwind/src/App.jsx | 9 ++ .../BranchNavigation.jsx} | 32 +++--- .../BranchNavigation.module.css} | 0 .../BranchNavigation.stories.jsx} | 4 +- .../src/components/BranchNavigation/index.js | 1 + .../components/FileExplorer/FileExplorer.jsx | 107 +++++++++++------- solidjs-tailwind/src/components/Repo/Repo.jsx | 12 ++ .../src/components/Repo/index.jsx | 1 + .../src/components/RepoAbout/RepoAbout.jsx | 13 ++- .../components/RepoAbout/RepoAbout.spec.jsx | 70 ++++++++++-- .../RepoHeading/{index.ts => index.js} | 0 .../src/components/RepoNavigation/index.js | 1 - .../src/components/RepoReadMe/RepoReadMe.jsx | 42 +++---- solidjs-tailwind/src/contexts/RepoContext.jsx | 65 +++++++++-- solidjs-tailwind/src/pages/RepoDetails.jsx | 26 +++++ solidjs-tailwind/src/pages/RepoTree.jsx | 23 ++++ solidjs-tailwind/src/routes.js | 3 + 18 files changed, 309 insertions(+), 156 deletions(-) rename solidjs-tailwind/src/components/{RepoNavigation/RepoNavigation.jsx => BranchNavigation/BranchNavigation.jsx} (62%) rename solidjs-tailwind/src/components/{RepoNavigation/RepoNavigation.module.css => BranchNavigation/BranchNavigation.module.css} (100%) rename solidjs-tailwind/src/components/{RepoNavigation/RepoNavigation.stories.jsx => BranchNavigation/BranchNavigation.stories.jsx} (89%) create mode 100644 solidjs-tailwind/src/components/BranchNavigation/index.js create mode 100644 solidjs-tailwind/src/components/Repo/Repo.jsx create mode 100644 solidjs-tailwind/src/components/Repo/index.jsx rename solidjs-tailwind/src/components/RepoHeading/{index.ts => index.js} (100%) delete mode 100644 solidjs-tailwind/src/components/RepoNavigation/index.js create mode 100644 solidjs-tailwind/src/pages/RepoDetails.jsx create mode 100644 solidjs-tailwind/src/pages/RepoTree.jsx diff --git a/qwik-graphql-tailwind/src/routes/[owner]/[name]/index.tsx b/qwik-graphql-tailwind/src/routes/[owner]/[name]/index.tsx index 4e8f4a576..d490e57f4 100644 --- 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('repo-context'); export default component$(() => { @@ -110,7 +102,7 @@ export default component$(() => { useContextProvider(RepoContext, store); return ( -
+
{ - 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 { - 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 index 2353d0fe9..bc0d5352f 100644 --- 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() { + + + + {/* */} + diff --git a/solidjs-tailwind/src/components/RepoNavigation/RepoNavigation.jsx b/solidjs-tailwind/src/components/BranchNavigation/BranchNavigation.jsx similarity index 62% rename from solidjs-tailwind/src/components/RepoNavigation/RepoNavigation.jsx rename to solidjs-tailwind/src/components/BranchNavigation/BranchNavigation.jsx index d10c72726..41e09f3c5 100644 --- a/solidjs-tailwind/src/components/RepoNavigation/RepoNavigation.jsx +++ b/solidjs-tailwind/src/components/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 (