Create repo only at the last step

README.md

@@ -3,7 +3,7 @@
 [![prettier][prettier-badge]][prettier-url]
 [![TypeScript][typescript-badge]][typescript-url]
 
-Reactivated.app is an open-source app that scans your JS dependencies every 4 hours and generates a cool sum up.
+Reactivated.app is an open-source app that scans your JS dependencies every 4 hours and generates cool dashboards.
 
 ## Quick Demo
 
@@ -81,7 +81,7 @@ $ npm run test:cov
 
 ```bash
 cd front
-cp f.env.dist .env
+cp .env.dist .env
 yarn
 ```
 

api/src/repository/repository.controller.ts

@@ -75,6 +75,81 @@ export class RepositoryController implements CrudController<Repository> {
     return this;
   }
 
+  @ApiOperation({
+    summary: 'Setup a repository branch and main path',
+    description: 'Also checks for package.json & yarn.lock existence',
+  })
+  @Post('setup')
+  async setupRepository(@Body() repo: Repository, @Request() req) {
+    const user = await this.usersService.getById(req.user.id);
+    let hasYarnLock = true;
+
+    const response = await this.githubService.getRepository({
+      fullName: repo.fullName,
+      token: user.githubToken,
+    });
+
+    const { data } = response;
+
+    try {
+      await this.githubService.getFile({
+        branch: repo.branch,
+        name: repo.fullName,
+        path: repo.path,
+        token: req.user.githubToken,
+        fileName: 'package.json',
+      });
+
+      try {
+        await this.githubService.getFile({
+          branch: repo.branch,
+          name: repo.fullName,
+          path: repo.path,
+          token: req.user.githubToken,
+          fileName: 'yarn.lock',
+        });
+      } catch (error) {
+        hasYarnLock = false;
+        await this.githubService.getFile({
+          branch: repo.branch,
+          name: repo.fullName,
+          path: repo.path,
+          token: req.user.githubToken,
+          fileName: 'package-lock.json',
+        });
+      }
+    } catch (e) {
+      throw new NotFoundException();
+    }
+
+    const newRepo = {
+      name: data.name,
+      author: data.owner.login,
+      repoImg: data.owner.avatar_url,
+      repoUrl: data.html_url,
+      fullName: data.full_name,
+      githubId: data.id,
+      branch: repo.branch,
+      path: repo.path,
+      createdAt: new Date(),
+      users: [user],
+      hasYarnLock,
+    };
+
+    const repository = await this.service.addRepo(newRepo);
+
+    await this.queue.add('compute_yarn_dependencies', {
+      repositoryFullName: repository.fullName,
+      repositoryId: repository.githubId,
+      githubToken: req.user.githubToken,
+      branch: repository.branch,
+      path: repository.path,
+      hasYarnLock,
+    });
+
+    return repository;
+  }
+
   @ApiOperation({
     summary: 'Configure a repository branch and main path',
     description: 'Also checks for package.json & yarn.lock existence',
@@ -182,7 +257,7 @@ export class RepositoryController implements CrudController<Repository> {
 
     const repositories = await this.service.getAllRepos();
     const userRepos = repositories.filter((repo: Repository) =>
-      repo.users.some(repoUser => repoUser.id === user.id),
+      repo.users.some((repoUser) => repoUser.id === user.id),
     );
     const nbUserRepos = userRepos.length;
 

api/src/webhooks/webhooks.controller.ts

@@ -39,8 +39,8 @@ export class WebhooksController {
 
       if (user) {
         const repos = await this.repositoryService.getAllRepos();
-        const nbRepos = repos.filter(repo =>
-          repo.users.some(repoUser => repoUser.id === user.id),
+        const nbRepos = repos.filter((repo) =>
+          repo.users.some((repoUser) => repoUser.id === user.id),
         ).length;
         let repositories = [];
         let repositoriesRemoved = [];
@@ -53,7 +53,8 @@ export class WebhooksController {
         } else if (body.action === 'removed') {
           repositoriesRemoved = body.repositories_removed;
         }
-        await Promise.all(
+
+        /*await Promise.all(
           repositories.map(repoAdd => {
             const newRepo = {
               name: repoAdd.name,
@@ -74,10 +75,10 @@ export class WebhooksController {
               return this.repositoryService.addRepo(newRepo);
             }
           }),
-        );
+        );*/
 
         await Promise.all(
-          repositoriesRemoved.map(repoAdd => {
+          repositoriesRemoved.map((repoAdd) => {
             return this.repositoryService.deleteRepo(
               {
                 githubId: repoAdd.id,

front/public/index.html

@@ -27,7 +27,7 @@
     <meta property="og:title" content="Reactivated.app" />
     <meta
       property="og:description"
-      content="Reactivated.app is an open-source app that scans your JS dependencies every 4 hours and generates a cool sum up."
+      content="Reactivated.app is an open-source app that scans your JS dependencies every 4 hours and generates cool dashboards."
     />
     <meta
       property="og:image"
@@ -42,7 +42,7 @@
     <meta name="twitter:title" content="Reactivated.app" />
     <meta
       name="twitter:description"
-      content="Reactivated.app is an open-source app that scans your JS dependencies every 4 hours and generates a cool sum up."
+      content="Reactivated.app is an open-source app that scans your JS dependencies every 4 hours and generates cool dashboards."
     />
     <meta
       name="twitter:image"
@@ -52,7 +52,7 @@
     <meta property="og:title" content="Reactivated.app" />
     <meta
       property="og:description"
-      content="Reactivated.app is an open-source app that scans your JS dependencies every 4 hours and generates a cool sum up."
+      content="Reactivated.app is an open-source app that scans your JS dependencies every 4 hours and generates cool dashboards."
     />
     <meta property="og:type" content="website" />
     <meta property="og:url" content="https://Reactivated.app" />

front/src/api/repositories.ts

@@ -35,6 +35,14 @@ export const configureRepository = (params: ConfigureRepoParams) => {
   )
 }
 
+interface SetupRepoParams {
+  data: Pick<Repository, 'branch' | 'path' | 'fullName'>
+}
+
+export const setupRepository = (params: SetupRepoParams) => {
+  return API.post<Repository>(`/repositories/setup`, params.data)
+}
+
 export const findRepositoriesByName = (name: string) => {
   return API.get<Repository[]>(`/repositories`, {
     params: {

front/src/components/InstallationRepositories/InstallationRepositories.tsx

@@ -6,7 +6,7 @@ import InstallationRepositoriesList from '@components/InstallationRepositoriesLi
 
 interface Props {
   installations: GithubInstallation[]
-  onSelectRepo: (repo: GithubInstallationRepository) => void
+  onSelectRepo: (fullName: string) => void
 }
 
 const InstallationRepositories: React.FC<Props> = ({
@@ -36,7 +36,7 @@ const InstallationRepositories: React.FC<Props> = ({
     const repo = repos.find((repo) => repo.id === id)
 
     if (repo) {
-      onSelectRepo(repo)
+      onSelectRepo(repo.fullName)
     }
   }
 

front/src/containers/Home.tsx

@@ -60,7 +60,7 @@ const Home = ({ loading = false }: Props) => {
                 is an open-source app that scans your JS dependencies every 4
                 hours and generates{' '}
                 <Link textDecoration="underline" color="brand.500" href="/demo">
-                  a cool sum up
+                  cool dashboards
                 </Link>
                 .
               </Text>
@@ -103,7 +103,12 @@ const Home = ({ loading = false }: Props) => {
             maxWidth="60rem"
             marginX="auto"
           >
-            <Box width="100%" display="flex" justifyContent="center">
+            <Box
+              minHeight="30rem"
+              width="100%"
+              display="flex"
+              justifyContent="center"
+            >
               <Image
                 alt="Reactivated.app UI"
                 width="90%"

front/src/containers/Repository/AddRepo.tsx

@@ -10,6 +10,9 @@ import {
   InputRightElement,
   Input,
   Icon,
+  Alert,
+  AlertIcon,
+  AlertDescription,
 } from '@chakra-ui/core'
 import { FaGithub } from 'react-icons/fa'
 import useMessageListener from '@hooks/useMessageListener'
@@ -21,7 +24,6 @@ import { useHistory } from 'react-router'
 import { useRequest } from '@hooks/useRequest'
 import useChakraToast from '@hooks/useChakraToast'
 import Container from '@components/Container'
-import { Repository } from '../../typings/entities'
 
 enum Step {
   PROVIDER_SELECTION = 0,
@@ -56,7 +58,7 @@ const Wrapper: React.FC<IWrapperProps> = ({
 
       {caption && <Text ml={10}>{caption}</Text>}
 
-      <Box ml={10} mt={8}>
+      <Box ml={10} my={8}>
         {children}
       </Box>
     </Container>
@@ -73,10 +75,11 @@ const AddRepo = () => {
   } = useRequest<GithubInstallation[]>('installations', {
     fetcher: InstallationsAPI.getUserInstallations,
     initialData: [],
-    revalidateOnFocus: false,
+    revalidateOnFocus: true,
+    refreshInterval: 5000,
   })
   const [branches, setBranches] = useState<GithubBranch['name'][]>([])
-  const [selectedRepo, setSelectedRepo] = useState<Repository | null>(null)
+  const [selectedRepo, setSelectedRepo] = useState<string>()
   const history = useHistory()
   const toast = useChakraToast()
 
@@ -112,25 +115,12 @@ const AddRepo = () => {
 
   useMessageListener(onMessage)
 
-  const onSelectRepo = async (repo: GithubInstallationRepository) => {
-    const { data: repositories } = await RepositoryAPI.findRepositoriesByName(
-      repo.fullName,
-    )
+  const onSelectRepo = async (fullName: string) => {
     const { data: branches } = await RepositoryAPI.getRepositoryBranches(
-      repo.fullName,
+      fullName,
     )
 
-    if (repositories.length === 0) {
-      // Repo has been deleted in our db, we have to recover it
-      const { data: repository } = await RepositoryAPI.syncRepository(
-        repo.fullName,
-      )
-
-      setSelectedRepo(repository)
-    } else {
-      setSelectedRepo(repositories[0])
-    }
-
+    setSelectedRepo(fullName)
     setBranches(branches.map((branch) => branch.name))
     setStep(Step.REPO_CONFIGURATION)
   }
@@ -145,12 +135,11 @@ const AddRepo = () => {
     path?: string
   }) => {
     try {
-      await RepositoryAPI.configureRepository({
-        id: selectedRepo!.id,
+      await RepositoryAPI.setupRepository({
         data: {
           branch: data.branch,
           path: data.path || '/',
-          fullName: selectedRepo!.fullName,
+          fullName: selectedRepo!,
         },
       })
       history.push('/')
@@ -217,6 +206,7 @@ const AddRepo = () => {
               }}
             ></Input>
           </InputGroup>
+
           <InstallationRepositories
             installations={installations}
             onSelectRepo={onSelectRepo}
@@ -232,6 +222,13 @@ const AddRepo = () => {
             >
               Add it from GitHub
             </Button>
+            <Alert mt={8} status="info">
+              <AlertIcon />
+              <AlertDescription>
+                After adding a repository, the GitHub API may take a few seconds
+                before show it
+              </AlertDescription>
+            </Alert>
           </Box>
         </Wrapper>
       ) : (
@@ -262,7 +259,7 @@ const AddRepo = () => {
           <Flex>
             <RepoConfigForm
               branches={branches}
-              repoName={selectedRepo!.fullName}
+              repoName={selectedRepo!}
               onSubmit={onSubmitRepoConfig}
             />
           </Flex>