Merge branch 'main' into fix/typo

.github/workflows/deploy-cloudrun-release.yaml

@@ -0,0 +1,79 @@
+name: Deploy to Cloud Run (Release)
+on:
+  push:
+    branches:
+      - main
+jobs:
+  build-and-deploy:
+    runs-on: ubuntu-latest
+    permissions:
+      contents: 'read'
+      id-token: 'write'
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+
+      - name: Setup Node
+        uses: actions/setup-node@v4
+        with:
+          node-version: '20'
+          cache: 'yarn'
+
+      - name: Install dependencies and build
+        run: |
+          yarn install
+          yarn build
+
+      - name: Set up Docker Buildx
+        uses: docker/setup-buildx-action@v3
+
+      - name: Login to Google Cloud
+        id: auth
+        uses: google-github-actions/auth@v2
+        with:
+          token_format: access_token
+          workload_identity_provider: 'projects/228944830644/locations/global/workloadIdentityPools/gh-pool/providers/provider-github'
+          service_account: '[email protected]'
+
+      - name: Set up Cloud SDK
+        uses: 'google-github-actions/setup-gcloud@v2'
+        with:
+          version: '>= 363.0.0'
+
+      - name: Authorize Docker
+        id: docker-auth
+        uses: docker/login-action@v3
+        with:
+          username: 'oauth2accesstoken'
+          password: ${{ steps.auth.outputs.access_token }}
+          registry: asia-northeast1-docker.pkg.dev
+
+      - name: create .env file
+        run: |
+          echo "${{ secrets.ENV_VARS }}" > .env
+
+      - name: Build and push Docker image
+        uses: docker/build-push-action@v5
+        with:
+          push: true
+          tags: asia-northeast1-docker.pkg.dev/lgtmgen-project/dev-main/frontend:latest
+          context: .
+          file: ./cloudrun/Dockerfile
+
+      - name: Download Cloud Run Service YAML
+        run: |
+          gcloud run services describe dev-main-frontend --format yaml --region asia-northeast1 > ./service.yaml
+
+      # replace github_sha field to latest commit sha. Changing spec.template is required to deploy new revision.
+      # reference: https://cloud.google.com/run/docs/deploying?hl=ja#revision -- check yaml tab.
+      - name: Change some property of service-frontend-release.yaml
+        run: |
+          sed -i "s/github_sha: .*/github_sha: ${{ github.sha }}/g" ./cloudrun/service.yaml
+
+      - name: Deploy to Cloud Run
+        id: deploy
+        uses: google-github-actions/deploy-cloudrun@v2
+        with:
+          region: "asia-northeast1"
+          metadata: "./service.yaml"
+          env_vars_file: ".env"

cloudrun/Dockerfile

@@ -0,0 +1,16 @@
+FROM node:20-slim
+
+WORKDIR /app
+
+COPY ./.next ./.next
+COPY ./package.json ./package.json
+COPY ./yarn.lock ./yarn.lock
+COPY node_modules node_modules
+
+CMD ["yarn", "start"]
+
+ENV HOST=0.0.0.0
+
+ENV PORT=3000
+
+EXPOSE 3000

src/App.tsx

@@ -10,27 +10,14 @@ import useLGTMFetch from './hooks/useLGTMFetch';
 function App() {
 
   const [activePage, setActivePage] = useState(1);
-  const { LGTMUrls, loading, error } = useLGTMFetch(activePage);
-
-  const fetchMaxPageNum = () => {
-    // TODO: fetch data from the server
-    return 30;
-  }
-
-  const fetchLGTMsBy = (numPage: number) => {
-    const maxPageNum = fetchMaxPageNum();
-    if (0 <= numPage && numPage < maxPageNum) {
-      // TODO: fetch data from the server
-    } else {
-      throw new Error('Invalid page number');
-    }
-  }
+  const [uploaded, setUploaded] = useState(false);
+  const {LGTMUrls} = useLGTMFetch(activePage, uploaded, setUploaded);
 
   return (
     <UIProvider>
       <div className="App">
         <Header />
-        <SendImageButton />
+        <SendImageButton setUploaded={setUploaded} />
         <CardList {...LGTMUrls} />
         <Pagination activePage={activePage} setActivePage={setActivePage} />
       </div>

src/components/Pagination/index.tsx

@@ -42,21 +42,21 @@ export const Pagination = ({ activePage, setActivePage }: PaginationProps) => {
                 return (
                     activePage === pageNum ? (
                         <li className={styles.itemBox}>
-                            <a
+                            <button
                                 onClick={() => clickHandler(pageNum)}
                                 className={styles.active}
                             >
                                 {pageNum}
-                            </a>
+                            </button>
                         </li>
                     ) : (
                         <li className={styles.itemBox}>
-                            <a
+                            <button
                                 onClick={() => clickHandler(pageNum)}
                                 className={styles.item}
                             >
                                 {pageNum}
-                            </a>
+                            </button>
                         </li>
                     )
                 )

src/components/SendImageButton/index.tsx

@@ -2,22 +2,28 @@
 
 import React from 'react';
 import InputImage from '../InputImage';
-import { useSendImageForm, IMAGE_ID } from '../../hooks/useSendImageForm';
+import { useSendImage, IMAGE_ID } from '../../hooks/useSendImage';
 
-const SendImageButton: React.FC = () => {
-  const { fileInputRef, rest, ref, selectFile } = useSendImageForm();
+type SendImageButtonProps = {
+  setUploaded: (uploaded: boolean) => void;
+
+};
+
+const SendImageButton = ({ setUploaded }: SendImageButtonProps): JSX.Element => {
+  const { fileInputRef, rest, ref, selectFile } = useSendImage(setUploaded);
 
   const style = {
     container: "flex justify-center md:justify-end mt-4 md:mr-36",
     btn: 'text-white bg-gradient-to-r from-gray-400 via-gray-500 to-gray-600 hover:bg-gradient-to-br focus:ring-4 focus:outline-none focus:ring-gray-300 dark:focus:ring-gray-800 shadow-lg shadow-gray-500/50 dark:shadow-lg dark:shadow-gray-800/80 font-medium rounded-full text-sm px-5 py-2.5 text-center me-2 mb-2',
   };
+
   return (
     <div className={style.container}>
       <button onClick={selectFile} role="presentation" type="button" className={`${style.btn}`}>
         <p className="text-4xl">
           ➕ New LGTM
         </p>
-        <InputImage fileInputRef={fileInputRef} refCallback={ref} id={IMAGE_ID} {...rest} />
+        <InputImage  fileInputRef={fileInputRef} refCallback={ref} id={IMAGE_ID} {...rest} />
       </button>
     </div>
 

src/components/atoms/ButtonToChromeExtension/index.tsx

@@ -1,5 +1,3 @@
-import { config } from "process";
-
 const ButtonToChromeExtension = (): JSX.Element => {
 
   // TODO: set environment variable

src/components/atoms/NextButton/index.tsx

@@ -9,7 +9,7 @@ const NextButton = ({ clickHandler }: NextButtonProps) => {
 
     return (
         <li>
-            <a
+            <button
                 onClick={clickHandler}
                 className={styles.nextButton}
             >
@@ -26,7 +26,7 @@ const NextButton = ({ clickHandler }: NextButtonProps) => {
                         clip-rule="evenodd"
                     />
                 </svg>
-            </a>
+            </button>
         </li>
     )
 }

src/components/atoms/PrevButton/index.tsx

@@ -1,5 +1,3 @@
-import { click } from "@testing-library/user-event/dist/click";
-
 type PrevButtonProps = {
     clickHandler: () => void;
 }
@@ -9,7 +7,7 @@ const PrevButton = ({ clickHandler }: PrevButtonProps) => {
         prevButton: 'inline-flex size-12 items-center justify-center rounded border border-gray-100 bg-white text-gray-900 rtl:rotate-180 hover:bg-gray-200',
     }
     return (
-        <a
+        <button
             onClick={clickHandler}
             className={styles.prevButton}
         >
@@ -26,7 +24,7 @@ const PrevButton = ({ clickHandler }: PrevButtonProps) => {
                     clip-rule="evenodd"
                 />
             </svg>
-        </a>
+        </button>
     )
 }
 

src/hooks/useDisplayPage.ts

@@ -1,18 +1,24 @@
-import { useEffect, useState } from 'react';
+import { useEffect, useState, useCallback } from 'react';
 
 type UsePaginationProps = {
     activePage: number;
     setActivePage: (num: number) => void;
 }
 
 const useDisplayPageNums = ({ activePage, setActivePage }: UsePaginationProps) => {
-
-    // TODO: make it dynamic
     const NUM_MAX_PAGE = parseInt(process.env.REACT_APP_MAX_PAGE || '20');
     const NUM_DISPLAY_PAGE = 5;
 
     const [pageNums, setPageNums] = useState<number[]>([1, 2, 3, 4, 5]);
 
+    const generatePageNums = useCallback((numActivePage: number): number[] => {
+        if (numActivePage < 3) {
+            return [1, 2, 3, 4, 5];
+        } else if (numActivePage > NUM_MAX_PAGE - 3) {
+            return Array.from({ length: NUM_DISPLAY_PAGE }, (_, index) => NUM_MAX_PAGE - 4 + index);
+        }
+        return Array.from({ length: NUM_DISPLAY_PAGE }, (_, index) => numActivePage - 2 + index);
+    }, [NUM_MAX_PAGE, NUM_DISPLAY_PAGE]);
 
     useEffect(() => {
         if (activePage < 1) {
@@ -24,25 +30,7 @@ const useDisplayPageNums = ({ activePage, setActivePage }: UsePaginationProps) =
         } else {
             setPageNums(generatePageNums(activePage));
         }
-    }, [activePage]);
-
-    const generatePageNums = (numActivePage: number): number[] => {
-        // small page number case
-        if (numActivePage < 3) {
-            return [1, 2, 3, 4, 5];
-        } else if (numActivePage > NUM_MAX_PAGE - 3) { // large page number case
-            return Array.from({ length: NUM_DISPLAY_PAGE }, (_, index) => {
-                return NUM_MAX_PAGE - 4 + index;
-            });
-        }
-
-        // usual case
-        return Array.from({ length: NUM_DISPLAY_PAGE }, (_, index) => {
-            return numActivePage - 2 + index;
-        });
-    }
-
-
+    }, [activePage, generatePageNums, NUM_MAX_PAGE, setActivePage]);
 
     return { pageNums };
 }

src/hooks/useLGTMFetch.ts

@@ -1,7 +1,7 @@
 import { useState, useEffect } from 'react';
 import { list } from '../fetch/LGTM';
 
-const useLGTMFetch = (activePage: number) => {
+const useLGTMFetch = (activePage: number, uploaded: boolean, setUploaded: (uploaded: boolean) => void) => {
   const [LGTMUrls, setLGTMUrls] = useState<any>(null);
   const [loading, setLoading] = useState<boolean>(false);
   const [error, setError] = useState<any>(null);
@@ -17,10 +17,14 @@ const useLGTMFetch = (activePage: number) => {
         setError(error);
       }
       setLoading(false);
+
+      if (uploaded) {
+        setUploaded(false);
+      }
     };
 
     fetchData();
-  }, [activePage]);
+  }, [activePage, uploaded, setUploaded]);
 
   return { LGTMUrls, loading, error };
 }

src/hooks/useSendImageForm.tsx → src/hooks/useSendImage.ts

@@ -1,13 +1,14 @@
 import React, { useRef } from 'react';
 import { useForm } from 'react-hook-form';
+import { post } from '../fetch/LGTM'
 
 export const IMAGE_ID = 'image';
 
 type FormValues = {
   image: FileList;
 };
 
-export const useSendImageForm = () => {
+export const useSendImage = (setUploaded: (uploaded: boolean) => void) => {
   const { register, handleSubmit, reset } = useForm<FormValues>();
   const fileInputRef = useRef<HTMLInputElement | null>(null);
   const isImageSelected = useRef<boolean>(false);
@@ -46,16 +47,12 @@ export const useSendImageForm = () => {
 
   const sendImage = async (data: FormValues) => {
     if (!isImageSelected.current) return;
-
-    const formData = new FormData();
-    formData.append('image', data.image[0]);
     try {
-      const response = await fetch('https://example.com/upload', {
-        method: 'POST',
-        body: formData,
-      });
-      const responseData = await response.json();
-      console.log('サーバーからのレスポンス:', responseData);
+      const response = await post(new Blob([data.image[0]]));
+      setUploaded(true);
+      const imageUrl = response.imageUrl;
+
+      console.log('サーバーからのレスポンス:', imageUrl);
     } catch (error) {
       console.error('エラー:', error);
     }