Merge branch 'develop' of https://github.com/nautible/nautible-app-ms…

…-front into develop
nautible · Jul 31, 2023 · 947ce11 · 947ce11
2 parents 84933e6 + 6a5abc7
commit 947ce11
Show file tree

Hide file tree

Showing 13 changed files with 6,641 additions and 7,541 deletions.
diff --git a/.github/workflows/main.yml b/.github/workflows/main.yml
@@ -4,19 +4,24 @@ on:
   push:
     branches: [ "develop","feature/*","hotfix/*" ]
   # Allows you to run this workflow manually from the Actions tab
-  # workflow_dispatch: 
+  workflow_dispatch: 
+
+permissions:
+  id-token: write
+  contents: read
 
 jobs:
   build:
     runs-on: ubuntu-latest
+    environment: develop # for azure oidc
     steps:
     - name: Checkout repo
       uses: actions/checkout@v3
 
     - name: setup node
       uses: actions/setup-node@v1
       with:
-        node-version: '12.x'
+        node-version: '18.x'
 
     - name: Cache node modules
       uses: actions/cache@v2
@@ -26,20 +31,21 @@ jobs:
         restore-keys: |
           ${{ runner.os }}-yarn-
 
-    - name: setup env file
+    # AWS
+    - name: setup env file for aws
       run: |
         cd $GITHUB_WORKSPACE/app
-        cp .env.auth-sample .env
+        sed -e "s/\$domain/${{ secrets.AWS_CLOUDFRONT_DOMAIN }}/" .env.auth-sample > .env
 
-    - name: Build
+    - name: Build for aws
       env:
         CI: false
       run: |
         cd $GITHUB_WORKSPACE/app
         yarn
         yarn build
 
-    - name: Test
+    - name: Test for aws
       env:
         CI: false
       run: |
@@ -49,11 +55,36 @@ jobs:
     - name: Configure AWS credentials
       uses: aws-actions/configure-aws-credentials@v1
       with:
-        aws-access-key-id: ${{ secrets.AWS_ACCESS_KEY_ID }}
-        aws-secret-access-key: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
-        aws-region: ${{ secrets.AWS_REGION }}
+        role-to-assume: arn:aws:iam::${{ secrets.AWS_ACCOUNT_ID }}:role/nautible-dev-githubactions-static-web-deploy-role
+        aws-region: ap-northeast-1
+
+    - name: deploy to aws s3 
+      run: |
+        cd $GITHUB_WORKSPACE/app
+        aws s3 sync ./build s3://${{ secrets.AWS_S3_STATIC_WEB_BUCKET }} --exclude "*.git/*" --delete
+
+    # Azure
+    - name: setup env file for azure
+      run: |
+        cd $GITHUB_WORKSPACE/app
+        sed -e "s/\$domain/${{ secrets.AZURE_FRONTDOOR_DOMAIN }}/" .env.auth-sample > .env
+
+    - name: Build for azure
+      env:
+        CI: false
+      run: |
+        cd $GITHUB_WORKSPACE/app
+        yarn
+        yarn build
+
+    - name: Azure Login
+      uses: azure/login@v1
+      with:
+        client-id: ${{ secrets.AZURE_CLIENT_ID }}
+        tenant-id: ${{ secrets.AZURE_TENANT_ID }}
+        subscription-id: ${{ secrets.AZURE_SUBSCRIPTION_ID }}
 
-    - name: deploy to s3 
+    - name: deploy to azure storage account
       run: |
         cd $GITHUB_WORKSPACE/app
-        aws s3 sync ./build s3://${{ secrets.S3_STATIC_WEB_BUCKET }} --exclude "*.git/*" --delete
+        az storage blob upload-batch --account-name nautibledevstaticweb -d '$web' -s ./build --overwrite=True
diff --git a/app/.env.auth-sample b/app/.env.auth-sample
@@ -1,5 +1,5 @@
-REACT_APP_URL_PREFIX=https://dr1d1engi0lfa.cloudfront.net/api/v1.0/nautible-app-ms
+REACT_APP_URL_PREFIX=https://$domain/api/v1.0/nautible-app-ms
 REACT_APP_AUTH_TYPE=keycloak
 REACT_APP_AUTH_KEYCLOAK_REALM=nautible-auth
 REACT_APP_AUTH_KEYCLOAK_CLIENT_ID=nautible-auth
-REACT_APP_AUTH_URL_PREFIX=https://dr1d1engi0lfa.cloudfront.net/api/v1.0/nautible-auth/auth/
+REACT_APP_AUTH_URL_PREFIX=https://$domain/api/v1.0/nautible-auth/auth/
diff --git a/app/package.json b/app/package.json
@@ -2,24 +2,27 @@
   "name": "app",
   "version": "0.1.0",
   "private": true,
+  "engines": {
+    "node": "^18.12.0"
+  },
   "dependencies": {
     "@material-ui/core": "^4.11.0",
     "@material-ui/icons": "^4.9.1",
-    "@testing-library/jest-dom": "^4.2.4",
-    "@testing-library/react": "^9.3.2",
-    "@testing-library/user-event": "^7.1.2",
-    "@types/jest": "^24.0.0",
-    "@types/node": "^12.0.0",
-    "@types/react": "^16.9.0",
-    "@types/react-dom": "^16.9.0",
-    "@types/react-router-dom": "^5.1.5",
-    "axios": "^0.21.0",
+    "@testing-library/jest-dom": "^5.16.5",
+    "@testing-library/react": "^13.4.0",
+    "@testing-library/user-event": "^14.4.3",
+    "@types/jest": "^29.2.0",
+    "@types/node": "^18.11.8",
+    "@types/react": "^18.0.24",
+    "@types/react-dom": "^18.0.8",
+    "@types/react-router-dom": "^5.3.3",
+    "axios": "^1.1.3",
     "keycloak-js": "18.0.0",
-    "react": "^16.13.1",
-    "react-dom": "^16.13.1",
-    "react-router-dom": "^5.2.0",
-    "react-scripts": "3.4.3",
-    "typescript": "~3.7.2"
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-router-dom": "^6.4.2",
+    "react-scripts": "^5.0.1",
+    "typescript": "^4.8.4"
   },
   "scripts": {
     "start": "react-scripts start",

diff --git a/app/src/App.tsx b/app/src/App.tsx
@@ -2,7 +2,7 @@ import React, { useState, useEffect } from 'react'
 
 import {
   BrowserRouter as Router,
-  Switch,
+  Routes,
   Route
 } from "react-router-dom";
 
@@ -56,26 +56,14 @@ const App: React.FC = () => {
         <Box className={classes.root}>
           <Header />
           { data.authenticated &&
-          <Switch>
-            <Route path="/" exact>
-              <ProductListPage />
-            </Route>
-            <Route path="/productDetail/:id" exact>
-              <ProductDetailPage />
-            </Route>
-            <Route path="/cart/" exact>
-              <CartPage />
-            </Route>
-            <Route path="/order/" exact>
-              <OrderPage />
-            </Route>
-            <Route path="/orderComplete/" exact>
-              <OrderCompletePage />
-            </Route>
-            <Route path="/orderHistory/" exact>
-              <OrderHistoryPage />
-            </Route>
-          </Switch>
+          <Routes>
+            <Route path="/" element={<ProductListPage />} />
+            <Route path="/productDetail/:id" element={<ProductDetailPage />} />
+            <Route path="/cart/" element={<CartPage />} />
+            <Route path="/order/" element={<OrderPage />} />
+            <Route path="/orderComplete/" element={<OrderCompletePage />} />
+            <Route path="/orderHistory/" element={<OrderHistoryPage />}/>
+          </Routes>
           }
           { !data.authenticated &&
             <BlankPage />

diff --git a/app/src/compornents/pages/cartPage.tsx b/app/src/compornents/pages/cartPage.tsx
@@ -2,7 +2,7 @@ import React, { useState, useEffect } from 'react';
 import axios from 'axios';
 import { makeStyles, createStyles, Theme } from '@material-ui/core/styles'
 
-import { useHistory } from "react-router-dom";
+import { useNavigate } from "react-router-dom";
 
 import CartItem from '../organisms/cartItem'
 import NavigationButton from '../molecules/navigationButton'
@@ -136,12 +136,12 @@ const CartPage: React.FC = () => {
     cart.allPrice = allPrice
   }
 
-  const history = useHistory()
+  const navigate = useNavigate()
   const forward = () => {
-    history.push("/order")
+    navigate("/order")
   }
   const back = () => {
-    history.push("/")
+    navigate("/")
   }
   return (
     <div className={classes.root}>

diff --git a/app/src/compornents/pages/orderCompletePage.tsx b/app/src/compornents/pages/orderCompletePage.tsx
@@ -6,7 +6,7 @@ import Box from '@material-ui/core/Box'
 import Button from '@material-ui/core/Button'
 import Typography from '@material-ui/core/Typography'
 
-import { useHistory } from 'react-router-dom'
+import { useNavigate } from 'react-router-dom'
 
 const useStyles = makeStyles((theme: Theme) =>
   createStyles({
@@ -21,9 +21,9 @@ const OrderCompletePage: React.FC = () => {
 
   const classes = useStyles()
 
-  const history = useHistory()
+  const navigate = useNavigate()
   const linkTop = () => {
-    history.push("/")
+    navigate("/")
   }
   return (
     <Box className={classes.root} m={2} p={1}>

diff --git a/app/src/compornents/pages/orderPage.tsx b/app/src/compornents/pages/orderPage.tsx
@@ -1,6 +1,6 @@
 import React, { useState, useEffect, useRef } from 'react'
 import axios from 'axios'
-import { useHistory } from "react-router-dom"
+import { useNavigate } from "react-router-dom"
 
 import NavigationButton from '../molecules/navigationButton'
 
@@ -100,12 +100,12 @@ const OrderPage: React.FC = () => {
   }, [setData]);
 
 
-  const history = useHistory()
+  const navigate = useNavigate()
   const forward = () => {
     setOpen(true)
   }
   const back = () => {
-    history.push("/cart")
+    navigate("/cart")
   }
 
   // 注文完了アクション
@@ -138,7 +138,7 @@ const OrderPage: React.FC = () => {
       console.log(err)
     })
 
-    history.push("/orderComplete")
+    navigate("/orderComplete")
   };
 
   // ダイアログを閉じる

diff --git a/app/src/compornents/pages/productDetailPage.tsx b/app/src/compornents/pages/productDetailPage.tsx
@@ -1,5 +1,5 @@
 import React, { useState, useEffect } from 'react';
-import { useHistory, useLocation } from "react-router-dom";
+import { useNavigate, useLocation } from "react-router-dom";
 import axios from 'axios';
 
 import { makeStyles, createStyles, Theme } from '@material-ui/core/styles'
@@ -38,7 +38,7 @@ const ProductDetailPage: React.FC = () => {
   // APIができたら入れ替え
   //const {id} = useParams<ParamTypes>()
   //const [data, setProduct] = useState({ product: '' });
-  const history = useHistory()
+  const navigate = useNavigate()
   const [data, setProduct] = useState<Product>({id: '', name: '', maker: '', price: 0, description: ''});
 
   // 商品詳細情報の取得
@@ -101,12 +101,12 @@ const ProductDetailPage: React.FC = () => {
 
   // カート画面へ進む
   const forward = () => {
-    history.push("/cart")
+    navigate("/cart")
   };
 
   // 商品一覧に戻る
   const back = () => {
-    history.push("/")
+    navigate("/")
   };
 
   return (

diff --git a/app/src/compornents/pages/productListPage.tsx b/app/src/compornents/pages/productListPage.tsx
@@ -58,14 +58,6 @@ type Data = {
 
 // 商品一覧画面
 const ProductListPage: React.FC = () => {
-  // const ProductListPage: React.FC<{keycloak: KeycloakInstance}> = ({keycloak}) => {
-
-  // console.log(keycloak.loadUserInfo())
-
-  // axios.interceptors.request.use((config) => {
-  //       config.headers.Authorization = `Bearer ${keycloak.token}`;
-  //       return Promise.resolve(config);
-  // });
 
   const classes = useStyles()
 

diff --git a/app/src/compornents/templates/header.tsx b/app/src/compornents/templates/header.tsx
@@ -1,6 +1,6 @@
 // public Compornents
 import React from 'react'
-import { Link, useHistory } from "react-router-dom"
+import { Link, useNavigate } from "react-router-dom"
 
 // Material-UI
 import { makeStyles, createStyles, Theme } from '@material-ui/core/styles'
@@ -40,6 +40,16 @@ const useStyles = makeStyles((theme: Theme) =>
       marginLeft: 'auto',
       height: '35px',
     },
+    headerLogin: {
+      display: 'flex',
+      marginLeft: 'auto',
+      height: '35px',
+    },
+    headerLogout: {
+      display: 'flex',
+      marginLeft: '10px',
+      height: '35px',
+    },
   })
 )
 
@@ -48,12 +58,12 @@ const HeaderNavigation: React.FC = () => {
 
   const classes = useStyles()
 
-  const history = useHistory()
+  const navigate = useNavigate()
   const linkCart = () => {
-    history.push("/cart")
+    navigate("/cart")
   }
   const linkOrderHistory = () => {
-    history.push("/orderHistory")
+    navigate("/orderHistory")
   }
   return (
     <div className={classes.root}>
@@ -67,7 +77,7 @@ const HeaderNavigation: React.FC = () => {
               <img src="/logo.png" alt="nautible" className={classes.headerLogo}/>
             </Typography>
           </Link>
-          { AuthService.getToken() != null &&
+          { (!AuthService.isAuthEnable() || AuthService.getToken() != null ) &&
           <div className={classes.headerMenu}>
             {
               //カートボタン
@@ -85,13 +95,17 @@ const HeaderNavigation: React.FC = () => {
                 <LibraryBooksIcon onClick={linkOrderHistory} />
               </Typography>
             </IconButton>
+          </div>
+          }
+          { AuthService.isAuthEnable() && AuthService.getToken() != null &&
+          <div className={classes.headerLogout}>
             <Button variant="contained" color="default" onClick={() => AuthService.logout()}>
                 ログアウト
             </Button>
           </div>
           }
           { AuthService.isAuthEnable() && AuthService.getToken() == null &&
-          <div className={classes.headerMenu}>
+          <div className={classes.headerLogin}>
             <Button variant="contained" color="default" onClick={() => AuthService.login()}>
                 ログイン
             </Button>