Save gitHub token in DB and unauthenticate on expiry (#58)

packages/frontend/src/components/projects/create/ConnectAccount.tsx

@@ -19,8 +19,8 @@ const ConnectAccount = ({ onToken }: ConnectAccountInterface) => {
   const handleCode = async (code: string) => {
     // Pass code to backend and get access token
     const {
-      authenticateGithub: { token },
-    } = await client.authenticateGithub(code);
+      authenticateGitHub: { token },
+    } = await client.authenticateGitHub(code);
     onToken(token);
   };
 

packages/frontend/src/components/projects/create/RepositoryList.tsx

@@ -14,12 +14,12 @@ const REPOS_PER_PAGE = 5;
 
 interface RepositoryListProps {
   repoSelectionHandler: (repo: GitRepositoryDetails) => void;
-  token: string;
+  octokit: Octokit;
 }
 
 const RepositoryList = ({
   repoSelectionHandler,
-  token,
+  octokit,
 }: RepositoryListProps) => {
   const [searchedRepo, setSearchedRepo] = useState(DEFAULT_SEARCHED_REPO);
   const [selectedAccount, setSelectedAccount] = useState('');
@@ -31,11 +31,6 @@ const RepositoryList = ({
     GitRepositoryDetails[]
   >([]);
 
-  const octokit = useMemo(() => {
-    // TODO: Create github/octokit context
-    return new Octokit({ auth: token });
-  }, [token]);
-
   useEffect(() => {
     const fetchUserAndOrgs = async () => {
       const user = await octokit.rest.users.getAuthenticated();
@@ -45,9 +40,7 @@ const RepositoryList = ({
       setSelectedAccount(user.data.login);
     };
 
-    if (token) {
-      fetchUserAndOrgs();
-    }
+    fetchUserAndOrgs();
   }, [octokit]);
 
   const debouncedSearchedRepo = useDebounce<string>(searchedRepo, 500);

packages/frontend/src/components/projects/create/TemplateCard.tsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import toast from 'react-hot-toast';
 
 import { IconButton, Typography } from '@material-tailwind/react';
 
@@ -10,25 +11,40 @@ interface TemplateDetails {
 }
 interface TemplateCardProps {
   framework: TemplateDetails;
+  isGitAuth: boolean;
 }
 
-const TemplateCard: React.FC<TemplateCardProps> = ({ framework }) => {
+const CardDetails = ({ framework }: { framework: TemplateDetails }) => {
   return (
-    <Link to={'/projects/create/template'}>
-      <div className="h-14 group bg-gray-200 border-gray-200 rounded-lg shadow p-4 flex items-center justify-between">
-        <Typography className="grow">
-          {framework.icon} {framework.framework}
-        </Typography>
-        <div>
-          <IconButton
-            size="sm"
-            className="rounded-full hidden group-hover:block"
-          >
-            {'>'}
-          </IconButton>
-        </div>
+    <div className="h-14 group bg-gray-200 border-gray-200 rounded-lg shadow p-4 flex items-center justify-between">
+      <Typography className="grow">
+        {framework.icon} {framework.framework}
+      </Typography>
+      <div>
+        <IconButton size="sm" className="rounded-full hidden group-hover:block">
+          {'>'}
+        </IconButton>
       </div>
+    </div>
+  );
+};
+
+const TemplateCard: React.FC<TemplateCardProps> = ({
+  framework,
+  isGitAuth,
+}) => {
+  return isGitAuth ? (
+    <Link to="/projects/create/template">
+      <CardDetails framework={framework} />
     </Link>
+  ) : (
+    <a
+      onClick={() =>
+        toast.error('Connect Git account to start with a template')
+      }
+    >
+      <CardDetails framework={framework} />
+    </a>
   );
 };
 

packages/frontend/src/components/projects/project/settings/GitTabPanel.tsx

@@ -4,25 +4,14 @@ import toast from 'react-hot-toast';
 
 import { Button, Input, Switch, Typography } from '@material-tailwind/react';
 
-import RepositoryList from '../../create/RepositoryList';
-import RepoConnectedSection from './RepoConnectedSection';
-import GitSelectionSection from './GitSelectionSection';
-import { GitRepositoryDetails, GitSelect } from '../../../../types/project';
+import { GitRepositoryDetails } from '../../../../types/project';
 import WebhookCard from './WebhookCard';
 
 const GitTabPanel = () => {
-  const [gitSelect, setGitSelect] = useState('none');
-  const [linkedRepo, setLinkedRepo] = useState<GitRepositoryDetails>();
+  // TODO: Get linked repo from project
+  const [linkedRepo] = useState<GitRepositoryDetails>();
   const [webhooksArray, setWebhooksArray] = useState<Array<string>>([]);
 
-  const gitSelectionHandler = (git: GitSelect) => {
-    setGitSelect(git);
-  };
-
-  const repoSelectionHandler = (repoDetails: GitRepositoryDetails) => {
-    setLinkedRepo(repoDetails);
-  };
-
   const {
     register,
     handleSubmit,
@@ -44,22 +33,8 @@ const GitTabPanel = () => {
     <>
       <div className="mb-2 p-2">
         <Typography variant="h6" className="text-black">
-          Connect Git repository
+          Git repository
         </Typography>
-        <Typography variant="small">
-          Create deployments for any commits pushed to your Git repository.
-        </Typography>
-        {linkedRepo && <RepoConnectedSection linkedRepo={linkedRepo} />}
-        {!linkedRepo &&
-          (GitSelect.NONE === gitSelect ? (
-            <GitSelectionSection gitSelectionHandler={gitSelectionHandler} />
-          ) : (
-            <RepositoryList
-              repoSelectionHandler={repoSelectionHandler}
-              // TODO: Pass Github access token after authentication
-              token=""
-            />
-          ))}
 
         <div className="flex justify-between mt-4">
           <div>