feat: repository input

apps/frontend/src/components/settings/github.component.tsx

@@ -4,6 +4,8 @@ import { Button } from '@gitroom/react/form/button';
 import { FC, useCallback, useEffect, useState } from 'react';
 import { useFetch } from '@gitroom/helpers/utils/custom.fetch';
 import { deleteDialog } from '@gitroom/react/helpers/delete.dialog';
+import { Input } from '@gitroom/react/form/input';
+import { useToaster } from '@gitroom/react/toaster/toaster';
 
 const ConnectedComponent: FC<{
   id: string;
@@ -93,9 +95,9 @@ const ConnectComponent: FC<{
   deleteRepository: () => void;
 }> = (props) => {
   const { id, setConnected, deleteRepository } = props;
-  const [repo, setRepo] = useState<undefined | string>();
-  const [select, setSelect] = useState<undefined | string>();
+  const [url, setUrl] = useState('');
   const fetch = useFetch();
+  const toast = useToaster();
 
   const cancelConnection = useCallback(async () => {
     await (
@@ -108,42 +110,56 @@ const ConnectComponent: FC<{
   }, []);
 
   const completeConnection = useCallback(async () => {
+    const [select, repo] = url
+      .match(/https:\/\/github\.com\/([A-Za-z0-9_.-]+)\/([A-Za-z0-9_.-]+)/)!
+      .slice(1);
+
+    const response = await fetch(`/settings/organizations/${id}`, {
+      method: 'POST',
+      body: JSON.stringify({ login: `${select}/${repo}` }),
+    });
+
+    if (response.status === 404) {
+      toast.show('Repository not found', 'warning');
+      return ;
+    }
+
     setConnected(`${select}/${repo}`);
-    await (
-      await fetch(`/settings/organizations/${id}`, {
-        method: 'POST',
-        body: JSON.stringify({ login: `${select}/${repo}` }),
-      })
-    ).json();
-  }, [repo, select]);
+  }, [url]);
 
   return (
-    <div className="my-[16px] mt-[16px] h-[90px] bg-sixth border-fifth border rounded-[4px] p-[24px]">
-      <div className="flex items-center gap-[8px] font-[Inter]">
+    <div className="my-[16px] mt-[16px] h-[100px] bg-sixth border-fifth border rounded-[4px] px-[24px] flex">
+      <div className="flex items-center gap-[8px] font-[Inter] flex-1">
         <div>
           <Image src="/icons/github.svg" alt="GitHub" width={40} height={40} />
         </div>
         <div className="flex-1">Connect your repository</div>
         <Button
-          className="bg-transparent border-0 text-gray"
+          className="bg-transparent border-0 text-gray mt-[7px]"
           onClick={cancelConnection}
         >
           Cancel
         </Button>
-        <select
-          className="border border-fifth bg-transparent h-[40px]"
-          value={select}
-          onChange={(e) => setSelect(e.target.value)}
+        <Input
+          value={url}
+          disableForm={true}
+          removeError={true}
+          onChange={(e) => setUrl(e.target.value)}
+          name="github"
+          label=""
+          placeholder="Full GitHub URL"
+        />
+        <Button
+          className="h-[44px] mt-[7px]"
+          disabled={
+            !url.match(
+              /https:\/\/github\.com\/([A-Za-z0-9_.-]+)\/([A-Za-z0-9_.-]+)/
+            )
+          }
+          onClick={completeConnection}
         >
-          <option value="">Choose an organization</option>
-          {props.organizations.map((o) => (
-            <option key={o.id} value={o.login}>
-              {o.login}
-            </option>
-          ))}
-        </select>
-        <RepositoryComponent id={id} login={select} setRepo={setRepo} />
-        {!!repo && <Button onClick={completeConnection}>Connect</Button>}
+          Connect
+        </Button>
       </div>
     </div>
   );

libraries/nestjs-libraries/src/database/prisma/stars/stars.service.ts

@@ -1,4 +1,4 @@
-import { Injectable } from '@nestjs/common';
+import { HttpException, Injectable } from '@nestjs/common';
 import { StarsRepository } from '@gitroom/nestjs-libraries/database/prisma/stars/stars.repository';
 import { chunk, groupBy } from 'lodash';
 import dayjs from 'dayjs';
@@ -431,6 +431,11 @@ export class StarsService {
   }
 
   async updateGitHubLogin(orgId: string, id: string, login: string) {
+    const check = await fetch(`https://github.com/${login}`);
+    if (check.status === 404) {
+      throw new HttpException('GitHub repository not found', 404);
+    }
+
     this._workerServiceProducer
       .emit('sync_all_stars', { payload: { login } })
       .subscribe();

libraries/react-shared-libraries/src/form/input.tsx

@@ -1,23 +1,38 @@
-"use client";
+'use client';
 
-import {DetailedHTMLProps, FC, InputHTMLAttributes, useMemo} from "react";
-import {clsx} from "clsx";
-import {useFormContext} from "react-hook-form";
+import { DetailedHTMLProps, FC, InputHTMLAttributes, useMemo } from 'react';
+import { clsx } from 'clsx';
+import { useFormContext } from 'react-hook-form';
 
-export const Input: FC<DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement> & {error?: any, disableForm?: boolean, label: string, name: string}> = (props) => {
-    const {label, className, disableForm, error, ...rest} = props;
-    const form = useFormContext();
-    const err = useMemo(() => {
-        if (error) return error;
-        if (!form || !form.formState.errors[props?.name!]) return;
-        return form?.formState?.errors?.[props?.name!]?.message! as string;
-    }, [form?.formState?.errors?.[props?.name!]?.message, error]);
+export const Input: FC<
+  DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement> & {
+    removeError?: boolean;
+    error?: any;
+    disableForm?: boolean;
+    label: string;
+    name: string;
+  }
+> = (props) => {
+  const { label, removeError, className, disableForm, error, ...rest } = props;
+  const form = useFormContext();
+  const err = useMemo(() => {
+    if (error) return error;
+    if (!form || !form.formState.errors[props?.name!]) return;
+    return form?.formState?.errors?.[props?.name!]?.message! as string;
+  }, [form?.formState?.errors?.[props?.name!]?.message, error]);
 
-    return (
-        <div className="flex flex-col gap-[6px]">
-            <div className="font-['Inter'] text-[14px]">{label}</div>
-            <input {...disableForm ? {} : form.register(props.name)} className={clsx("bg-input h-[44px] px-[16px] outline-none border-fifth border rounded-[4px] text-inputText placeholder-inputText", className)} {...rest}  />
-            <div className="text-red-400 text-[12px]">{err || <>&nbsp;</>}</div>
-        </div>
-    )
-}
+  return (
+    <div className="flex flex-col gap-[6px]">
+      <div className="font-['Inter'] text-[14px]">{label}</div>
+      <input
+        {...(disableForm ? {} : form.register(props.name))}
+        className={clsx(
+          'bg-input h-[44px] px-[16px] outline-none border-fifth border rounded-[4px] text-inputText placeholder-inputText',
+          className
+        )}
+        {...rest}
+      />
+      {!removeError && <div className="text-red-400 text-[12px]">{err || <>&nbsp;</>}</div>}
+    </div>
+  );
+};