git-truck 0.8.2 → 0.8.6-experimental

package/src/routes/{repo.tsx → $repo.tsx}

@@ -1,30 +1,49 @@
-import { ActionFunction, json, LoaderFunction, useLoaderData } from "remix"
+import { ActionFunction, ErrorBoundaryComponent, json, Link, LoaderFunction, useLoaderData } from "remix"
 import { Providers } from "~/components/Providers"
-import { Box, Container, Grower, InlineCode, StyledP } from "~/components/util"
+import { Box, Container, Grower, Code, StyledP } from "~/components/util"
 import { SidePanel } from "~/components/SidePanel"
 import { Main } from "~/components/Main"
-import { AnalyzerData } from "~/analyzer/model"
+import { AnalyzerData, TruckUserConfig } from "~/analyzer/model"
 import { analyze, openFile, updateTruckConfig } from "~/analyzer/analyze.server"
 import { GlobalInfo } from "~/components/GlobalInfo"
 import { Options } from "~/components/Options"
 import SearchBar from "~/components/SearchBar"
 import { Spacer } from "~/components/Spacer"
 import { Legend } from "~/components/Legend"
-import { getArgs } from "~/analyzer/args.server"
+import { getTruckConfigWithArgs } from "~/analyzer/args.server"
 import { HiddenFiles } from "~/components/HiddenFiles"
 import semverCompare from "semver-compare"
 import { Details } from "~/components/Details"
+import { resolve } from "path"
 
-let useCacheNextTime = false
+let invalidateCache = false
 
-export const loader: LoaderFunction = async () => {
-  const useCache = useCacheNextTime
-  const data = await analyze(useCache)
-  useCacheNextTime = false
+export const loader: LoaderFunction = async ({ params, request }) => {
+  if (params["repo"] === "favicon.ico") {
+    return null
+  }
+
+  const args = await getTruckConfigWithArgs(params["repo"] as string)
+
+  const options: TruckUserConfig = {
+    invalidateCache: invalidateCache || args.invalidateCache,
+  }
+  if (params["repo"]) {
+    options.path = resolve(args.path, params["repo"])
+  }
+
+  const branch = new URL(request.url).searchParams.get("branch")
+  if (branch) options.branch = decodeURIComponent(branch)
+
+  const data = await analyze({ ...args, ...options })
+  invalidateCache = false
   return json<AnalyzerData>(data)
 }
 
-export const action: ActionFunction = async ({ request }) => {
+export const action: ActionFunction = async ({ request, params }) => {
+  if (!params["repo"]) {
+    throw Error("This can never happen, since this route is only called if a repo exists in the URL")
+  }
   const formData = await request.formData()
   const refresh = formData.get("refresh")
   const unignore = formData.get("unignore")
@@ -32,12 +51,15 @@ export const action: ActionFunction = async ({ request }) => {
   const fileToOpen = formData.get("open")
 
   if (refresh) {
-    useCacheNextTime = true
+    invalidateCache = true
     return null
   }
 
+  const args = await getTruckConfigWithArgs(params["repo"])
+  const path = resolve(args.path, params["repo"])
+
   if (ignore && typeof ignore === "string") {
-    await updateTruckConfig((await getArgs()).path, (prevConfig) => {
+    await updateTruckConfig(path, (prevConfig) => {
       const hiddenFilesSet = new Set((prevConfig?.hiddenFiles ?? []).map((x) => x.trim()))
       hiddenFilesSet.add(ignore)
 
@@ -50,7 +72,7 @@ export const action: ActionFunction = async ({ request }) => {
   }
 
   if (unignore && typeof unignore === "string") {
-    await updateTruckConfig((await getArgs()).path, (prevConfig) => {
+    await updateTruckConfig(resolve(args.path, params["repo"]), (prevConfig) => {
       const hiddenFilesSet = new Set((prevConfig?.hiddenFiles ?? []).map((x) => x.trim()))
       hiddenFilesSet.delete(unignore.trim())
 
@@ -70,9 +92,32 @@ export const action: ActionFunction = async ({ request }) => {
   return null
 }
 
+export const ErrorBoundary: ErrorBoundaryComponent = ({ error }) => {
+  console.error(error.message)
+  console.error(error.stack)
+  return (
+    <Container>
+      <div />
+      <Box>
+        <h1>An error occured!</h1>
+        <p>See console for more infomation.</p>
+        <Code>{error.stack}</Code>
+        <div>
+          <Link to=".">Retry</Link>
+        </div>
+        <div>
+          <Link to="..">Go back</Link>
+        </div>
+      </Box>
+    </Container>
+  )
+}
+
 export default function Index() {
   const data = useLoaderData<AnalyzerData>()
 
+  if (!data) return null
+
   return (
     <Providers data={data}>
       <Container>
@@ -89,8 +134,7 @@ export default function Index() {
               <p>Update available: {data.latestVersion}</p>
               <StyledP>Currently installed: {data.currentVersion}</StyledP>
               <StyledP>
-                To update, close application and run:{" "}
-                <InlineCode>npx git-truck@latest</InlineCode>
+                To update, close application and run: <Code inline>npx git-truck@latest</Code>
               </StyledP>
             </Box>
           ) : null}

package/src/routes/index.tsx

@@ -1,62 +1,172 @@
-import { useNavigate } from "react-router-dom"
-import { useEffect } from "react"
+import { ActionFunction, json, Link, LoaderFunction, useLoaderData, useNavigate, useSubmit, useTransition } from "remix"
 import styled from "styled-components"
+import { getArgsWithDefaults } from "~/analyzer/args.server"
+import { getBaseDirFromPath, getDirName } from "~/analyzer/util.server"
+import { Spacer } from "~/components/Spacer"
+import { Box, BoxSubTitle, Code, Grower, TextButton } from "~/components/util"
+import { AnalyzingIndicator } from "~/components/AnalyzingIndicator"
+import { resolve } from "path"
+import { Repository } from "~/analyzer/model"
+import { GitCaller } from "~/analyzer/git-caller.server"
+import { useMount } from "react-use"
 
-const LoadingPane = styled.div`
-  padding: 0.5em 2em;
-  display: grid;
-  place-items: center;
-  border-radius: 5px;
+interface IndexData {
+  repositories: Repository[]
+  baseDir: string
+  baseDirName: string
+  repo: Repository | null
+  hasRedirected: boolean
+}
 
-  /* hide_initially animation */
-  opacity: 0;
-  animation: hide_initially 0s linear forwards;
-  animation-delay: 1s;
-`
+let hasRedirected = false
 
-const FullViewbox = styled.div`
-  display: grid;
-  place-items: center;
-  height: 100vh;
-  width: 100vw;
-`
+export const loader: LoaderFunction = async () => {
+  const args = await getArgsWithDefaults()
+  const [repo, repositories] = await GitCaller.scanDirectoryForRepositories(args.path)
+  const baseDir = resolve(repo ? getBaseDirFromPath(args.path) : args.path)
+  const repositoriesResponse = json<IndexData>({
+    repositories,
+    baseDir,
+    baseDirName: getDirName(baseDir),
+    repo,
+    hasRedirected,
+  })
 
-const StyledPath = styled.path`
-  fill: none;
-  stroke: #4580ff;
-  /* transition: 1s; */
-  animation: dash 2s ease-in-out alternate infinite;
-`
+  const response = repositoriesResponse
+  hasRedirected = true
 
-const LoadingText = styled.div`
-  grid-area: 1/2;
-`
+  return response
+}
 
-const StyledSVG = styled.svg`
-  grid-area: 1/2;
-`
+export const action: ActionFunction = async ({ request }) => {
+  const formData = await request.formData()
+  if (formData.has("hasRedirected")) {
+    hasRedirected = true
+  }
+  return null
+}
 
 export default function Index() {
+  const loadterData = useLoaderData<IndexData>()
+  const { repositories, baseDir, baseDirName, repo, hasRedirected } = loadterData
+  const transitionData = useTransition()
   const navigate = useNavigate()
-  useEffect(() => {
-    navigate("/repo/")
-  }, [navigate])
+  const submit = useSubmit()
 
-  const width = 20
-  const height = 20
-  const length = width + height
+  const willRedirect = repo && !hasRedirected
+  useMount(() => {
+    if (willRedirect) {
+      const data = new FormData()
+      data.append("hasRedirected", "true")
+      submit(data, { method: "post" })
+      navigate(`/${repo.name}`)
+    }
+  })
 
-  const path = `M0,0 m-${width * 0.5},-${height * 0.5} l${width},0 l0,${height} l-${width},0 l0,-${height} Z`
-  const viewBox = `-${height * 0.5} -${width * 0.5} ${height} ${width}`
+  const cachedRepositories = repositories.filter((repo) => repo.data?.cached)
+  const notCachedRepositories = repositories.filter((repo) => !repo.data?.cached)
 
+  if (transitionData.state !== "idle" || willRedirect) return <AnalyzingIndicator />
   return (
-    <FullViewbox>
-      <LoadingPane>
-        <LoadingText>Analyzing...</LoadingText>
-        <StyledSVG height="160px" width="160px" viewBox={viewBox}>
-          <StyledPath strokeDasharray={length * 0.5} strokeDashoffset={length * 2} d={path}></StyledPath>
-        </StyledSVG>
-      </LoadingPane>
-    </FullViewbox>
+    <Wrapper>
+      <Spacer />
+      <H1>{baseDir}</H1>
+      <Spacer />
+      <p>
+        Found {repositories.length} git repositories in the folder <Code inline>{baseDirName}</Code>.
+      </p>
+      {repositories.length === 0 ? (
+        <>
+          <Spacer />
+          <p>
+            Try running <Code inline>git-truck</Code> in another folder or provide another path as argument.
+          </p>
+        </>
+      ) : null}
+      {cachedRepositories.length > 0 ? (
+        <>
+          <Spacer xxl />
+          <h2>Ready to view</h2>
+          <nav>
+            <Ul>
+              {cachedRepositories.map((repo) => (
+                <Li key={repo.name}>
+                  <SLink to={repo.name} tabIndex={-1}>
+                    <Box>
+                      <BoxSubTitle title={repo.name}>{repo.name}</BoxSubTitle>
+                      <Spacer />
+                      <Actions>
+                        <Grower />
+                        <TextButton>{repo.data?.cached ? "View" : "Analyze"}</TextButton>
+                      </Actions>
+                    </Box>
+                  </SLink>
+                </Li>
+              ))}
+            </Ul>
+          </nav>
+        </>
+      ) : null}
+      {notCachedRepositories.length > 0 ? (
+        <>
+          <Spacer xxl />
+          <h2>Needs to be analyzed before viewing</h2>
+          <nav>
+            <Ul>
+              {notCachedRepositories.map((repo) => (
+                <Li key={repo.name}>
+                  <SLink to={repo.name} tabIndex={-1}>
+                    <Box>
+                      <BoxSubTitle title={repo.name}>{repo.name}</BoxSubTitle>
+                      <Spacer />
+                      <Actions>
+                        <Grower />
+                        <TextButton>{repo.data?.cached ? "View" : "Analyze"}</TextButton>
+                      </Actions>
+                    </Box>
+                  </SLink>
+                </Li>
+              ))}
+            </Ul>
+          </nav>
+        </>
+      ) : null}
+    </Wrapper>
   )
 }
+
+const Wrapper = styled.div`
+  width: calc(100vw - 2 * var(--side-panel-width));
+  margin: auto;
+`
+const H1 = styled.h1`
+  font-family: "Courier New", Courier, monospace;
+`
+
+const Ul = styled.ul`
+  list-style: none;
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+`
+
+const Li = styled.li`
+  margin: 0;
+`
+
+const Tag = styled.span`
+  font-size: 0.7em;
+  text-transform: uppercase;
+  padding: calc(0.25 * var(--unit)) calc(var(--unit));
+  letter-spacing: 0.2em;
+  color: white;
+  background-color: hsl(210, 100%, 50%);
+  border-radius: 1000px;
+`
+
+const Actions = styled.div`
+  display: flex;
+`
+
+const SLink = styled(Link)`
+  text-decoration: none;
+`