more changes

stackblitz-labs · Dec 22, 2024 · 820f6bb · 820f6bb
1 parent 099b003
commit 820f6bb
Show file tree

Hide file tree

Showing 8 changed files with 336 additions and 267 deletions.
diff --git a/app/components/git/GitCloneModal.tsx b/app/components/git/GitCloneModal.tsx
@@ -1,6 +1,6 @@
 import { useCallback, useEffect, useState } from 'react';
 import { Dialog, DialogRoot } from '~/components/ui/Dialog';
-import { GitHubAuth } from '~/lib/github/GitHubAuth';
+import { GitHubAuth } from '~/components/github/GitHubAuth';
 import { getGitHubUser, getUserRepos } from '~/lib/github/github.client';
 import { toast } from 'react-toastify';
 import { GitCloneSpinner } from './GitCloneSpinner';

diff --git a/app/lib/github/GitHubAuth.tsx → app/components/github/GitHubAuth.tsx b/app/lib/github/GitHubAuth.tsx → app/components/github/GitHubAuth.tsx
@@ -1,5 +1,5 @@
 import React, { useState, useCallback, useEffect } from 'react';
-import { GITHUB_CONFIG } from './config';
+import { GITHUB_CONFIG } from '~/lib/github/config';
 
 interface GitHubAuthProps {
   onAuthComplete?: (token: string) => void;

diff --git a/app/components/github/GitHubAuthModal.tsx b/app/components/github/GitHubAuthModal.tsx
@@ -3,7 +3,7 @@ import { useCallback, useEffect, useRef, useState } from 'react';
 import { workbenchStore } from '~/lib/stores/workbench';
 import { Octokit } from '@octokit/rest';
 import { toast } from 'react-toastify';
-import { GitHubAuth } from '~/lib/github/GitHubAuth';
+import { GitHubAuth } from '~/components/github/GitHubAuth';
 import { getGitHubUser } from '~/lib/github/github.client';
 
 interface GitHubAuthModalProps {
@@ -142,14 +142,14 @@ export function GitHubAuthModal({
 
     try {
       // Always use force push
-      const result = await workbenchStore.pushToGitHub(repoName, user.login, token, true);
+      const result = await workbenchStore.pushToGitHub(repoName, user.login, token, true, repoVisibility);
       onPushComplete?.(true, result.html_url);
     } catch (error) {
       console.error('Failed to push to GitHub:', error);
       setError(error instanceof Error ? error.message : 'Failed to push to GitHub');
       onPushComplete?.(false);
     }
-  }, [repoName, user, token, onAuthComplete, onPushComplete]);
+  }, [repoName, user, token, onAuthComplete, onPushComplete, repoVisibility]);
 
   // Monitor localStorage for GitHub token
   useEffect(() => {

diff --git a/app/components/github/GitHubPushOverlay.tsx b/app/components/github/GitHubPushOverlay.tsx
@@ -0,0 +1,10 @@
+export function GitHubPushOverlay() {
+  return (
+    <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50">
+      <div className="bg-[#0F0F0F] rounded-xl p-6 flex flex-col items-center gap-4 border border-purple-500/30">
+        <div className="w-12 h-12 border-4 border-t-purple-500 border-purple-200/20 rounded-full animate-spin" />
+        <p className="text-bolt-elements-textPrimary">Pushing your project to GitHub...</p>
+      </div>
+    </div>
+  );
+}
diff --git a/app/components/github/useGitHubPush.tsx b/app/components/github/useGitHubPush.tsx
@@ -0,0 +1,68 @@
+import { useState } from 'react';
+import { toast } from 'react-toastify';
+import { getGitHubUser } from '~/lib/github/github.client';
+
+export function useGitHubPush() {
+  const [isAuthModalOpen, setIsAuthModalOpen] = useState(false);
+  const [isPushingToGitHub, setIsPushingToGitHub] = useState(false);
+
+  const handlePushToGitHub = async () => {
+    try {
+      // Check for existing GitHub token
+      const existingToken = localStorage.getItem('github_token');
+
+      if (existingToken) {
+        // Get the GitHub user info directly to validate token
+        await getGitHubUser(existingToken);
+      }
+
+      // Show auth modal, passing the existing token if we have one
+      setIsAuthModalOpen(true);
+    } catch (error) {
+      console.error('Failed to use existing GitHub token:', error);
+
+      // If token is invalid, remove it
+      localStorage.removeItem('github_token');
+      setIsAuthModalOpen(true);
+    }
+  };
+
+  const handleAuthComplete = async () => {
+    setIsAuthModalOpen(false);
+    setIsPushingToGitHub(true);
+  };
+
+  const handlePushComplete = (success: boolean, repoUrl?: string) => {
+    setIsPushingToGitHub(false);
+
+    if (success) {
+      toast.success(
+        <div className="flex flex-col gap-1">
+          <span>Successfully pushed to GitHub!</span>
+          {repoUrl && (
+            <a
+              href={repoUrl}
+              target="_blank"
+              rel="noopener noreferrer"
+              className="text-sm text-blue-500 hover:text-blue-600"
+            >
+              View Repository →
+            </a>
+          )}
+        </div>,
+        { autoClose: 5000 },
+      );
+    } else {
+      toast.error('Failed to push to GitHub. Please try again.');
+    }
+  };
+
+  return {
+    isAuthModalOpen,
+    isPushingToGitHub,
+    setIsAuthModalOpen,
+    handlePushToGitHub,
+    handleAuthComplete,
+    handlePushComplete,
+  };
+}
diff --git a/app/components/workbench/Workbench.client.tsx b/app/components/workbench/Workbench.client.tsx
@@ -18,7 +18,8 @@ import { EditorPanel } from './EditorPanel';
 import { Preview } from './Preview';
 import useViewport from '~/lib/hooks';
 import { GitHubAuthModal } from '~/components/github/GitHubAuthModal';
-import { getGitHubUser } from '~/lib/github/github.client';
+import { GitHubPushOverlay } from '~/components/github/GitHubPushOverlay';
+import { useGitHubPush } from '~/components/github/useGitHubPush';
 
 interface WorkspaceProps {
   chatStarted?: boolean;
@@ -59,8 +60,14 @@ export const Workbench = memo(({ chatStarted, isStreaming }: WorkspaceProps) =>
   renderLogger.trace('Workbench');
 
   const [isSyncing, setIsSyncing] = useState(false);
-  const [isAuthModalOpen, setIsAuthModalOpen] = useState(false);
-  const [isPushingToGitHub, setIsPushingToGitHub] = useState(false);
+  const {
+    isAuthModalOpen,
+    isPushingToGitHub,
+    setIsAuthModalOpen,
+    handlePushToGitHub,
+    handleAuthComplete,
+    handlePushComplete,
+  } = useGitHubPush();
 
   const hasPreview = useStore(computed(workbenchStore.previews, (previews) => previews.length > 0));
   const showWorkbench = useStore(workbenchStore.showWorkbench);
@@ -171,29 +178,7 @@ export const Workbench = memo(({ chatStarted, isStreaming }: WorkspaceProps) =>
                       <div className="i-ph:terminal" />
                       Toggle Terminal
                     </PanelHeaderButton>
-                    <PanelHeaderButton
-                      className="mr-1 text-sm"
-                      onClick={async () => {
-                        try {
-                          // Check for existing GitHub token
-                          const existingToken = localStorage.getItem('github_token');
-
-                          if (existingToken) {
-                            // Get the GitHub user info directly to validate token
-                            await getGitHubUser(existingToken);
-                          }
-
-                          // Show auth modal, passing the existing token if we have one
-                          setIsAuthModalOpen(true);
-                        } catch (error) {
-                          console.error('Failed to use existing GitHub token:', error);
-
-                          // If token is invalid, remove it
-                          localStorage.removeItem('github_token');
-                          setIsAuthModalOpen(true);
-                        }
-                      }}
-                    >
+                    <PanelHeaderButton className="mr-1 text-sm" onClick={handlePushToGitHub}>
                       <div className="i-ph:github-logo" />
                       Push to GitHub
                     </PanelHeaderButton>
@@ -239,46 +224,13 @@ export const Workbench = memo(({ chatStarted, isStreaming }: WorkspaceProps) =>
         <GitHubAuthModal
           isOpen={isAuthModalOpen}
           onClose={() => setIsAuthModalOpen(false)}
-          onAuthComplete={async () => {
-            setIsAuthModalOpen(false);
-            setIsPushingToGitHub(true);
-          }}
-          onPushComplete={(success: boolean, repoUrl?: string) => {
-            setIsPushingToGitHub(false);
-
-            if (success) {
-              toast.success(
-                <div className="flex flex-col gap-1">
-                  <span>Successfully pushed to GitHub!</span>
-                  {repoUrl && (
-                    <a
-                      href={repoUrl}
-                      target="_blank"
-                      rel="noopener noreferrer"
-                      className="text-sm text-blue-500 hover:text-blue-600"
-                    >
-                      View Repository →
-                    </a>
-                  )}
-                </div>,
-                { autoClose: 5000 },
-              );
-            } else {
-              toast.error('Failed to push to GitHub. Please try again.');
-            }
-          }}
+          onAuthComplete={handleAuthComplete}
+          onPushComplete={handlePushComplete}
           initialToken={localStorage.getItem('github_token')}
         />
 
         {/* Loading Overlay */}
-        {isPushingToGitHub && (
-          <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50">
-            <div className="bg-[#0F0F0F] rounded-xl p-6 flex flex-col items-center gap-4 border border-purple-500/30">
-              <div className="w-12 h-12 border-4 border-t-purple-500 border-purple-200/20 rounded-full animate-spin" />
-              <p className="text-bolt-elements-textPrimary">Pushing your project to GitHub...</p>
-            </div>
-          </div>
-        )}
+        {isPushingToGitHub && <GitHubPushOverlay />}
       </motion.div>
     )
   );