make folder links work in source navigation

juandjara · Oct 12, 2023 · 3e37da4 · 3e37da4
1 parent ffd6200
commit 3e37da4
Show file tree

Hide file tree

Showing 4 changed files with 15 additions and 56 deletions.
diff --git a/app/components/source-files/FileDetails.tsx b/app/components/source-files/FileDetails.tsx
@@ -99,10 +99,10 @@ export default function FileDetails() {
           redirectTarget="source"
         />
       )}
-      <div className='relative flex items-center justify-start gap-2'>
+      <header className='relative flex items-center justify-start gap-2'>
         <Link
           className={clsx(buttonCN.cancel, buttonCN.small, buttonCN.iconSmall)}
-          to='./'
+          to={`./?open=${folder}`}
           title='Back to file tree'>
           <BackIcon />
         </Link>
@@ -129,7 +129,7 @@ export default function FileDetails() {
           menuPosition='top-full right-0 mt-2'
           externalLink={file.html_url}
         />
-      </div>
+      </header>
       <div className='my-4'>
         <input type="hidden" name="sha" value={file?.sha} />
         <FileContents file={file} />
@@ -141,7 +141,7 @@ export default function FileDetails() {
           className={`${buttonCN.normal} ${buttonCN.slate}`}>
           {busy ? 'Saving...' : 'Save'}
         </button>
-        <Link to='./'>
+        <Link to={`./?open=${folder}`}>
           <button
             type='button'
             className={`ml-2 ${buttonCN.normal} ${buttonCN.cancel}`}>

diff --git a/app/components/source-files/FileTree.tsx b/app/components/source-files/FileTree.tsx
@@ -1,48 +1,13 @@
-import { Link, useParams } from '@remix-run/react'
+import { Link, useParams, useSearchParams } from '@remix-run/react'
 import clsx from 'clsx'
 import type { TreeItem } from '@/lib/github'
-
-function DocumentIcon({ className = '' }: { className?: string }) {
-  return (
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      fill="none"
-      viewBox="0 0 24 24"
-      strokeWidth={1.5}
-      stroke="currentColor"
-      className={`w-6 h-6 ${className}`}
-    >
-      <path
-        strokeLinecap="round"
-        strokeLinejoin="round"
-        d="M19.5 14.25v-2.625a3.375 3.375 0 00-3.375-3.375h-1.5A1.125 1.125 0 0113.5 7.125v-1.5a3.375 3.375 0 00-3.375-3.375H8.25m2.25 0H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 00-9-9z"
-      />
-    </svg>
-  )
-}
-
-function FolderIcon({ className = '' }: { className?: string }) {
-  return (
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      fill="none"
-      viewBox="0 0 24 24"
-      strokeWidth={1.5}
-      stroke="currentColor"
-      className={`w-6 h-6 ${className}`}
-    >
-      <path
-        strokeLinecap="round"
-        strokeLinejoin="round"
-        d="M2.25 12.75V12A2.25 2.25 0 014.5 9.75h15A2.25 2.25 0 0121.75 12v.75m-8.69-6.44l-2.12-2.12a1.5 1.5 0 00-1.061-.44H4.5A2.25 2.25 0 002.25 6v12a2.25 2.25 0 002.25 2.25h15A2.25 2.25 0 0021.75 18V9a2.25 2.25 0 00-2.25-2.25h-5.379a1.5 1.5 0 01-1.06-.44z"
-      />
-    </svg>
-  )
-}
+import { getBasename } from '@/lib/pathUtils'
+import { FolderIcon, DocumentIcon, PlusIcon } from '@heroicons/react/24/outline'
+import { iconCN } from '@/lib/styles'
 
 function TreeItemIcon({ item }: { item: TreeItem }) {
-  if (item.type === 'blob') return <DocumentIcon className="flex-shrink-0 text-slate-400" />
-  if (item.type === 'tree') return <FolderIcon className="flex-shrink-0 text-slate-400" />
+  if (item.type === 'blob') return <DocumentIcon className={clsx('flex-shrink-0', iconCN.big)} />
+  if (item.type === 'tree') return <FolderIcon className={clsx('flex-shrink-0', iconCN.big)} />
   return null
 }
 
@@ -64,17 +29,17 @@ function NewFileItem({ path }: { path: string }) {
   const linkStyle = clsx(LIStyle, { 'text-slate-600 bg-gray-100': file === `${path}/new` })
   return (
     <Link to={path ? `${path}/new` : 'new'} className={linkStyle}>
-      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="w-6 h-6 text-slate-400">
-        <path strokeLinecap="round" strokeLinejoin="round" d="M12 4.5v15m7.5-7.5h-15" />
-      </svg>
+      <PlusIcon className={iconCN.big} />
       <p className='ml-2 font-medium'>New File</p>
     </Link>
   )
 }
 
 function DirItem(f: TreeItem, tree: TreeItem[]) {
-  const path = useParams()['*']
+  const [params] = useSearchParams()
+  const path = params.get('open')
   const isOpen = !!path && path.startsWith(f.path)
+
   return (
     <details open={isOpen}>
       <summary className={LIStyle}>
@@ -104,10 +69,6 @@ export default function FileTree({ tree, subpath }: { tree: TreeItem[]; subpath?
   )
 }
 
-function getBasename(path: string) {
-  return path.split('/').slice(-1)[0]
-}
-
 function escapeRegex(str: string) {
   return str.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')
 }

diff --git a/app/lib/github.ts b/app/lib/github.ts
@@ -178,8 +178,6 @@ export async function getFileContent(token: string, { repo, file, branch }: GetC
     }
   }) as { data: GithubFile }
 
-  console.log(data)
-
   if (data.type === 'dir') {
     return data
   }

diff --git a/app/routes/p/$project/source/$.tsx b/app/routes/p/$project/source/$.tsx
@@ -23,7 +23,7 @@ export async function loader({ request, params }: LoaderArgs) {
   })
 
   if (file.type === 'dir') {
-    return redirect(`/p/${params.project}/source`)
+    return redirect(`/p/${params.project}/source?open=${filename}`)
   }
 
   return json({ file })