feat(SyncGithub): Disable fetch if data is incomplete

src/data/gamesExternal.ts

@@ -8,7 +8,7 @@ import { WEEK } from "~/utils/date"
 import { parseMarkdownTable } from "~/utils/parseMarkdownTable"
 
 import { gamesAtom } from "./games"
-import { githubAtom } from "./github"
+import { useGithub } from "./github"
 import { playersAtom } from "./players"
 import { fetchRepoFile } from "./service/fetchRepoFile"
 
@@ -50,14 +50,14 @@ const splitUserStats = (userStats: string) => {
 }
 export const useGames = () => {
   const [games, setGames] = useAtom(externalGamesAtom)
-  const [{ filePath }] = useAtom(githubAtom)
+  const { filePath, incomplete } = useGithub()
 
   const refreshGames = useCallback(() => {
     setGames(null)
   }, [setGames])
 
   useEffect(() => {
-    if (games != null) return
+    if (incomplete || games != null) return
 
     void fetchRepoFile(filePath)
       .then(text => {
@@ -79,7 +79,7 @@ export const useGames = () => {
           }))
       })
       .then(setGames)
-  }, [filePath, games, setGames])
+  }, [incomplete, filePath, games, setGames])
 
   return { games, refreshGames }
 }

src/data/github.ts

@@ -24,8 +24,16 @@ export const githubAtom = atom<GithubData>({
   ],
 })
 
+const isIncomplete = (github: GithubData) =>
+  !github.branch ||
+  !github.filePath ||
+  !github.repoName ||
+  !github.repoOwner ||
+  !github.token
+
 export const useGithub = () => {
   const [github, setGithub] = useAtom(githubAtom)
+  const incomplete = isIncomplete(github)
 
   const setGithubAttribute = <Attribute extends keyof GithubData>(
     key: Attribute,
@@ -34,6 +42,7 @@ export const useGithub = () => {
 
   return {
     ...github,
+    incomplete,
     setGithubAttribute,
   }
 }
@@ -60,7 +69,6 @@ export const onGithubMouseDown = () => {
   window.addEventListener("mousemove", onMouseMove)
 
   timeout = setTimeout(() => {
-    console.log("timeout", holding)
     if (!holding.current) return
     showGithubOptions.set(prev => !prev)
   }, 3000)

src/pages/settings/SyncGithub.tsx

@@ -6,6 +6,7 @@ import { Icon } from "~/components/Icon"
 import { LoadingData } from "~/components/LoadingData"
 import { Button } from "~/components/ui/button"
 import { useGames } from "~/data/gamesExternal"
+import { useGithub } from "~/data/github"
 
 const useDelayValueChange = <T,>(value: T, delay = 500) => {
   const [blockedValue, setBlockedValue] = useState(value)
@@ -45,6 +46,7 @@ const useDelayValueChange = <T,>(value: T, delay = 500) => {
 export const SyncGithub = () => {
   const [loading, setLoading] = useState(false)
   const { games, refreshGames } = useGames()
+  const { incomplete } = useGithub()
 
   const onRefresh = () => {
     refreshGames()
@@ -61,7 +63,7 @@ export const SyncGithub = () => {
     )
 
   return (
-    <Button variant="flat" onClick={onRefresh}>
+    <Button variant="flat" onClick={onRefresh} disabled={incomplete}>
       <Icon icon={RefreshCw} size="sm" />
       Sync data
     </Button>