Add GitHub Action for TypeScript compile check

.github/workflows/check_ts.yml

@@ -0,0 +1,61 @@
+name: 'check-ts'
+# run this check on PRs 
+on:
+  pull_request: 
+    branches: [main]
+jobs:
+  ts:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - name: Install Node
+        uses: actions/setup-node@v4
+      - name: Install client depencies
+        working-directory: client 
+        run: npm ci 
+      - name: Install server depencies
+        working-directory: server
+        run: |
+          npx prisma generate 
+          npm ci
+      - name: Run build 
+        working-directory: client
+        run: |
+          npm run lint
+          npm run build
+      # get the lines modified in this PR
+      # - name: Get diff lines
+
+      #   id: diff
+      #   uses: Equip-Collaboration/[email protected]
+      #   with:
+      #     include: '["\\.tsx?$"]'
+
+      # # get the files modified in this PR
+      # - name: Detecting files changed
+      #   id: files
+      #   uses: umani/[email protected]
+      #   with:
+      #     repo-token: ${{ github.token }}
+      #     pattern: '^.*\.tsx?$'
+
+      # # echo the changed files 
+      # - name: List files changed
+      #   run: |
+      #     echo 'Files modified: ${{steps.files.outputs.files_updated}}'
+      #     echo 'Files added: ${{steps.files.outputs.files_created}}'
+      #     echo 'Files removed: ${{steps.files.outputs.files_deleted}}'
+
+      # # run the action 
+      # - uses: Arhia/[email protected]
+      #   with:
+      #     repo-token: ${{ secrets.GITHUB_TOKEN }}
+      #     use-check: true                                         # if the action fails, the PR wil fail 
+      #     check-fail-mode: added                                  # only check for added errors 
+      #     files-changed: ${{steps.files.outputs.files_updated}}
+      #     files-added: ${{steps.files.outputs.files_created}}
+      #     files-deleted: ${{steps.files.outputs.files_deleted}}
+      #     line-numbers: ${{steps.diff.outputs.lineNumbers}}
+      #     output-behaviour: both                                  # use github annotations and comments on the PR
+      #     comment-behaviour: new                                  # every run of this action will create a new comment 
+      #     ts-config-path: './client/tsconfig.json'                # use the tsconfig.json in the client directory 

client/src/components/ProjectsView.tsx

@@ -59,7 +59,11 @@ export default function ProjectsView(props: {
               )}
               {proj.meetType}
             </Blob>
-            {proj.tags.map(tag => <Blob><p>{tag}</p></Blob>)}
+            {proj.tags.map((tag) => (
+              <Blob>
+                <p>{tag}</p>
+              </Blob>
+            ))}
           </div>
         </Link>
       ))}

client/src/components/Spinner.tsx

@@ -1,8 +1,5 @@
-// import styled from "styled-components"
-// import PropTypes from "prop-types"
-
 //Buffering animation - the circle that spins when things are loading
-export default function Spinner({ size }: { size?: number}) {
+export default function Spinner({ size }: { size?: number }) {
   return (
     <div role="status">
       <svg
@@ -27,42 +24,3 @@ export default function Spinner({ size }: { size?: number}) {
     </div>
   );
 }
-
-// const StyledSpinner = styled.div`
-//   width: ${({ size }) => size};
-//   height: ${({ size }) => size};
-//   display: flex;
-//   /* position: relative; */
-//   transform: scale(0.5);
-//   transform-origin: center;
-//   pointer-events: ${({ loading }) => (loading ? "none" : "all")};
-
-//   & div {
-//     box-sizing: border-box;
-//     display: block;
-//     position: absolute;
-//     width: ${({ size }) => size};
-//     height: ${({ size }) => size};
-//     border: 8px solid ${({ color }) => color};
-//     border-radius: 50%;
-//     animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
-//     border-color: ${({ color }) => color} transparent transparent transparent;
-//   }
-//   & div:nth-child(1) {
-//     animation-delay: -0.45s;
-//   }
-//   & div:nth-child(2) {
-//     animation-delay: -0.3s;
-//   }
-//   & div:nth-child(3) {
-//     animation-delay: -0.15s;
-//   }
-//   @keyframes lds-ring {
-//     0% {
-//       transform: rotate(0deg);
-//     }
-//     100% {
-//       transform: rotate(360deg);
-//     }
-//   }
-// `

client/src/components/TagsAutocomplete.tsx

@@ -10,14 +10,14 @@ export default function TagsAutocomplete(params: AutcompleteParams) {
   const [input, setInput] = useState<string>('');
   const [showOpts, setShowOpts] = useState(false);
   const inputRef = useRef<HTMLInputElement>(null);
-   const { data: autocompleteOptions } = trpc.tags.getAutocompleteOptions.useQuery(input);
+  const { data: autocompleteOptions } =
+    trpc.tags.getAutocompleteOptions.useQuery(input);
 
   const handleSelect = (tag: string) => {
     params.onSelect(tag);
     setInput('');
   };
 
-
   return (
     <div className="relative w-full">
       <StyledInput
@@ -31,25 +31,27 @@ export default function TagsAutocomplete(params: AutcompleteParams) {
         value={input}
       />
 
-
       {showOpts && (
         <div className="flex flex-col border px-2 w-full absolute mt-2 bg-zinc-50 py-4 rounded-lg shadow-sm gap-2">
-          {autocompleteOptions && autocompleteOptions?.length > 0 ?
+          {autocompleteOptions && autocompleteOptions?.length > 0 ? (
             autocompleteOptions?.map((tag) => (
               <div
                 onMouseDown={(e) => {
                   e.preventDefault();
                 }}
                 onMouseUp={() => {
                   handleSelect(tag.name);
-                  inputRef.current?.blur()
-                  setInput('')
+                  inputRef.current?.blur();
+                  setInput('');
                 }}
                 className="flex hover:bg-zinc-200 rounded-md px-2 py-1 hover:cursor-pointer transition-colors"
               >
                 <p className="">{tag.name}</p>
               </div>
-            )) : <div>Sorry no Matches</div>}
+            ))
+          ) : (
+            <div>Sorry no Matches</div>
+          )}
         </div>
       )}
     </div>

client/src/main.tsx

@@ -93,12 +93,12 @@ const router = createBrowserRouter([
           },
           {
             path: 'members',
-            element: <MemberList/>
+            element: <MemberList />,
           },
           {
             path: 'edit',
-            element: <EditProject/>
-          }
+            element: <EditProject />,
+          },
         ],
       },
       {

client/src/pages/CreateProj.tsx

@@ -19,11 +19,6 @@ export type FormState = {
   image: Blob | null | string;
 };
 
-type TagsState = {
-  input: string;
-  tags: string[];
-};
-
 export default function CreateProj() {
   //elements to fill when creating a project.
   const [formState, setFormState] = useState<FormState>({
@@ -87,7 +82,8 @@ export default function CreateProj() {
   function handleSubmit(e: React.FormEvent<HTMLFormElement>) {
     e.preventDefault();
     if (!user) return;
-    if (!formState.image) return;
+    if (!formState.image || typeof formState.image === 'string') return;
+
     uploadImageMutation.mutate(formState.image);
   }
   //gets files view and inputs view from formstate.
@@ -122,12 +118,9 @@ function AddTagsView({
   addedTags: string[];
   setAddedTags: React.Dispatch<React.SetStateAction<string[]>>;
 }) {
-  const [errors, setErrors] = useState<string[]>([]);
-
   function handleAddTag(tag: string) {
     const val: string = tag.trim();
     if (addedTags.indexOf(val) !== -1) {
-      setErrors((prev) => [...prev, 'you have already added this tag']);
       return;
     }
     if (val === '') return;
@@ -156,7 +149,9 @@ function AddTagsView({
             })}
           </>
         ) : (
-          <div className='text-zinc-400 text-md lowercase'>No tags selected, search one!</div>
+          <div className="text-zinc-400 text-md lowercase">
+            No tags selected, search one!
+          </div>
         )}
       </ul>
       <TagsAutocomplete onSelect={handleAddTag} />
@@ -311,7 +306,9 @@ export function FilesView({
         <h1 className="text-zinc-800 font-medium mb-4 flex items-center justify-between">
           Select a picture
         </h1>
-        <label htmlFor='image' className='bg-zinc-300 p-3 rounded-lg'>Select file</label>
+        <label htmlFor="image" className="bg-zinc-300 p-3 rounded-lg">
+          Select file
+        </label>
         <input
           type="file"
           accept="image/*"
@@ -343,7 +340,11 @@ export function FilesView({
             onClose={() => setFormState((prev) => ({ ...prev, image: null }))}
           />
           <img
-            src={typeof formState.image === "string" ? formState.image : URL.createObjectURL(formState.image)}
+            src={
+              typeof formState.image === 'string'
+                ? formState.image
+                : URL.createObjectURL(formState.image)
+            }
             className="w-full max-w-2xl"
           />
         </Image>
@@ -392,7 +393,7 @@ function SubmitBtnView({
             loading ? 'opacity-100' : 'opacity-0'
           }`}
         >
-          <Spinner size="1.5rem" />
+          <Spinner size={16} />
         </div>
       </button>
     </SubmitWrapper>
@@ -416,32 +417,6 @@ const SubmitWrapper = styled.div<SubmitWrapperProps>`
   }
 `;
 
-const FilesWrapper = styled.div`
-  display: flex;
-  flex-direction: column;
-  gap: 1rem;
-  height: fit-content;
-  min-height: 21rem;
-
-  label {
-    all: unset;
-    font-family: inherit;
-    white-space: nowrap;
-    border: 2px dashed #27a0f2;
-    border-radius: 0.5rem;
-    padding: 1rem 2rem;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    gap: 1rem;
-
-    span {
-      font-size: 0.9rem;
-      color: ${({ theme }) => theme.colors.subText};
-    }
-  }
-`;
-
 const Image = styled.div`
   position: relative;
   width: fit-content;