Merge pull request #4340 from cpinitiative/pull-button

cpinitiative · Feb 25, 2024 · 7dca467 · 7dca467
2 parents b1ea6cb + 9ef1142
commit 7dca467
Show file tree

Hide file tree

Showing 2 changed files with 50 additions and 2 deletions.
diff --git a/src/atoms/editor.ts b/src/atoms/editor.ts
@@ -53,7 +53,7 @@ export const octokitAtom = atom(get =>
   get(tokenAtom) === null ? null : new Octokit({ auth: get(tokenAtom) })
 );
 export const forkAtom = atom<string | undefined>(undefined);
-export const baseTabAtom = atom('content');
+export const baseTabAtom = atom<'content' | 'problems'>('content');
 export const editingSolutionAtom = atom(get => {
   const activeFile = get(activeFileAtom);
   return activeFile && activeFile.path.startsWith('solutions');

diff --git a/src/components/Editor/EditorTabBar.tsx b/src/components/Editor/EditorTabBar.tsx
@@ -1,11 +1,12 @@
 import { Buffer } from 'buffer';
 import classNames from 'classnames';
-import { useAtomValue } from 'jotai';
+import { useAtomValue, useSetAtom } from 'jotai';
 import React, { useCallback, useState } from 'react';
 import {
   branchAtom,
   githubInfoAtom,
   octokitAtom,
+  saveFileAtom,
   tabAtom,
   trueFileAtom,
   trueFilePathAtom,
@@ -39,8 +40,11 @@ const EditorTabBar: React.FC<EditorTabBarProps> = ({
   const octokit = useAtomValue(octokitAtom);
   const branch = useAtomValue(branchAtom);
   const [commitState, setCommitState] = useState('Commit Code');
+  const [pullState, setPullState] = useState('Pull Code');
   const filePath = useAtomValue(trueFilePathAtom);
   const file = useAtomValue(trueFileAtom);
+  const saveFile = useSetAtom(saveFileAtom);
+  const tab = useAtomValue(tabAtom);
   const [dialogOpen, setDialogOpen] = useState(false);
   const updateFile = useCallback(
     async file => {
@@ -83,6 +87,39 @@ const EditorTabBar: React.FC<EditorTabBarProps> = ({
     },
     [octokit, githubInfo, branch, filePath]
   );
+  const pullCode = useCallback(async () => {
+    if (!octokit || !githubInfo || !branch) return;
+    setPullState('Pulling...');
+    const response = (
+      await octokit.request('GET /repos/{owner}/{repo}/contents/{path}', {
+        owner: githubInfo.login,
+        repo: 'usaco-guide',
+        path: filePath,
+        ref: branch,
+        headers: {
+          'X-GitHub-Api-Version': '2022-11-28',
+        },
+      })
+    ).data;
+    if (!('type' in response) || response.type !== 'file') return; // should not happen
+    saveFile({
+      path: filePath,
+      update(f) {
+        if (tab == 'content') {
+          return {
+            ...f,
+            markdown: Buffer.from(response.content, 'base64').toString('utf-8'),
+          };
+        } else {
+          return {
+            ...f,
+            problems: Buffer.from(response.content, 'base64').toString('utf-8'),
+          };
+        }
+      },
+    });
+    setPullState('Pull Code');
+  }, [octokit, githubInfo, branch, filePath, tab, saveFile]);
   return (
     <>
       <div className="flex bg-gray-50 dark:bg-gray-950">
@@ -149,6 +186,17 @@ const EditorTabBar: React.FC<EditorTabBarProps> = ({
             {commitState}
           </button>
         )}
+        {githubInfo && octokit && file && branch && (
+          <button
+            className={classNames(
+              'hover:text-gray-800 dark:hover:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-800 active:bg-gray-200 dark:active:bg-gray-800',
+              'px-3 py-2 font-medium text-sm focus:outline-none transition'
+            )}
+            onClick={() => pullCode()}
+          >
+            {pullState}
+          </button>
+        )}
       </div>
       <AddProblemModal
         isOpen={dialogOpen}