feat: added auth path

components/molecules/questions/Form.tsx

@@ -1,11 +1,14 @@
 import { FC, useCallback, useEffect, useMemo, useState } from 'react'
 import { useRouter } from 'next/router'
+import { useUser } from '@auth0/nextjs-auth0/client'
 import { Box, Heading, Text } from '@chakra-ui/react'
 import { Controller, FieldErrors, useForm } from 'react-hook-form'
 import DatasourceFooter from 'components/DatasourceFooter'
+import { API } from 'constants/api'
 import { useProfile } from 'hooks/profile'
 import { useAnswerController } from 'hooks/questions'
 import { toBoolean } from 'utils/datatype'
+import { setDynamicUrl } from 'utils/setUrl'
 import api from '../../../utils/api'
 import BasicButton from '../../atoms/buttons/Basic'
 import RadioGroups from '../../atoms/inputs/RadioGroup'
@@ -22,6 +25,7 @@ interface SendParams extends Profile.Profile {
 }
 
 const QuestionForm: FC<Props> = ({ questionPage }) => {
+  const { user } = useUser()
   const { profile, setProfile, userInfoDone } = useProfile()
   const [isTransitioning, setIsTransitioning] = useState(false)
 
@@ -100,13 +104,20 @@ const QuestionForm: FC<Props> = ({ questionPage }) => {
         estimate: questionPage.isLast || nextPageUid === 'result' ? true : false
       }
       try {
-        const { data } = await api.put(`/profiles/${profile?.id}`, params)
+        let data = []
+        if (user?.sub) {
+          const authUrl = setDynamicUrl(API.PROFILE.AUTH_PUT, { id: user.sub })
+          data = await api.put(authUrl, params)
+        } else {
+          const url = setDynamicUrl(API.PROFILE.PUT, { id: profile.id })
+          data = await api.put(url, params)
+        }
         setProfile(data)
       } catch (error) {
         console.log(error)
       }
     },
-    [profile, questionPage]
+    [profile, questionPage, user]
   )
 
   const nextQuestionUid = (data: { [key: string]: string | number }) => {

components/molecules/questions/UserinfoForm.tsx

@@ -1,13 +1,16 @@
 import { FC, useCallback } from 'react'
 import { useRouter } from 'next/router'
+import { useUser } from '@auth0/nextjs-auth0/client'
 import { Box, Heading } from '@chakra-ui/react'
 import { Controller, useForm } from 'react-hook-form'
 import BasicButton from 'components/atoms/buttons/Basic'
 import SelectBox from 'components/atoms/inputs/Select'
 import DatasourceFooter from 'components/DatasourceFooter'
+import { API } from 'constants/api'
 import { USERINFO_SKIP } from 'constants/localstorageKeys'
 import { useProfile } from 'hooks/profile'
 import api from 'utils/api'
+import { setDynamicUrl } from 'utils/setUrl'
 
 type FormData = {
   gender?: string
@@ -16,6 +19,7 @@ type FormData = {
 }
 
 const UserinfoForm: FC = () => {
+  const { user } = useUser()
   const router = useRouter()
   const { category } = router.query
 
@@ -36,11 +40,19 @@ const UserinfoForm: FC = () => {
       if (!formData.age) delete formData.age
       if (!formData.region) delete formData.region
       try {
-        const { data } = await api.put(`/profiles/${profile?.id}`, {
+        const params = {
           ...profile,
           ...formData,
           estimate: true
-        })
+        }
+        let data = []
+        if (user?.sub) {
+          const authUrl = setDynamicUrl(API.PROFILE.AUTH_PUT, { id: user.sub })
+          data = await api.put(authUrl, params)
+        } else {
+          const url = setDynamicUrl(API.PROFILE.PUT, { id: profile.id })
+          data = await api.put(url, params)
+        }
         setProfile(data)
         router.push(`/category/${category}/result`)
       } catch (error) {

hooks/profile.ts

@@ -1,10 +1,14 @@
 import { useEffect, useState } from 'react'
+import { useUser } from '@auth0/nextjs-auth0/client'
 import { useRecoilState } from 'recoil'
+import { API } from 'constants/api'
 import { PROFILE_ID, USERINFO_SKIP } from 'constants/localstorageKeys'
 import { profileAtom, sharedProfileAtom } from 'store/profile'
+import { setDynamicUrl } from 'utils/setUrl'
 import api from '../utils/api'
 
 export const useProfile = () => {
+  const { user } = useUser()
   const [profile, setProfile] = useRecoilState(profileAtom)
   const [userInfoDone, setUserInfoDone] = useState(false)
 
@@ -14,11 +18,31 @@ export const useProfile = () => {
       try {
         const profileId = localStorage.getItem(PROFILE_ID)
         if (!profileId) {
-          const { data } = await api.post('/profiles', { estimate: true })
+          let data = []
+          if (user?.sub) {
+            data = await api.post(API.PROFILE.AUTH_INDEX, {
+              estimate: true,
+              user_id: user?.sub
+            })
+          } else {
+            data = await api.post(API.PROFILE.INDEX, {
+              estimate: true
+            })
+          }
           setProfile(data)
           localStorage.setItem(PROFILE_ID, data.id)
         } else {
-          const data = await api.get(`/profiles/${profileId}`)
+          let data = []
+          if (user?.sub) {
+            const authShowUrl = setDynamicUrl(API.PROFILE.AUTH_SHOW, {
+              id: user.sub
+            })
+            data = await api.get(authShowUrl)
+          } else {
+            const showUrl = setDynamicUrl(API.PROFILE.SHOW, { id: profileId })
+            data = await api.get(showUrl)
+          }
+
           setProfile(data)
         }
       } catch (error) {
@@ -27,7 +51,7 @@ export const useProfile = () => {
       }
     }
     fetchProfile()
-  }, [])
+  }, [profile, setProfile, user])
 
   useEffect(() => {
     if (

pages/category/[category]/action.tsx

@@ -1,24 +1,28 @@
 import { ParsedUrlQuery } from 'querystring'
 import { useEffect, useState } from 'react'
 import { GetStaticPaths, GetStaticProps, NextPage } from 'next'
-import Link from "next/link";
+import Link from 'next/link'
 import { useRouter } from 'next/router'
+import { useUser } from '@auth0/nextjs-auth0/client'
 import { Box, Spinner } from '@chakra-ui/react'
 import DatasourceFooter from 'components/DatasourceFooter'
 import ActionCompleteBtn from 'components/molecules/action/ActionCompleteBtn/ActionCompleteBtn'
 import ActionHeader from 'components/molecules/action/ActionHeader/ActionHeader'
 import ActionChangeRateDialog from 'components/organisms/action/ActionChangeRateDialog/ActionChangeRateDialog'
 import ActionItem from 'components/organisms/action/ActionItem/ActionItem'
 import QuestionContainer from 'components/organisms/questions/Container'
+import { API } from 'constants/api'
 import { useActions } from 'hooks/actions'
 import { useProfile } from 'hooks/profile'
 import api from 'utils/api'
+import { setDynamicUrl } from 'utils/setUrl'
 
 interface Params extends ParsedUrlQuery {
   category: Actions.ActionCategory
 }
 
 const ActionPage: NextPage<Params> = ({ category }) => {
+  const { user } = useUser()
   const { profile, setProfile } = useProfile()
   const router = useRouter()
   const actions = useActions()
@@ -48,11 +52,19 @@ const ActionPage: NextPage<Params> = ({ category }) => {
       newProfile.actionIntensityRates = actionIntensityRates
 
       try {
-        const { data } = await api.put(`/profiles/${profile?.id}`, {
+        const params = {
           ...profile,
           ...newProfile,
           estimate: true
-        })
+        }
+        let data = []
+        if (user?.sub) {
+          const authUrl = setDynamicUrl(API.PROFILE.AUTH_PUT, { id: user.sub })
+          data = await api.put(authUrl, params)
+        } else {
+          const url = setDynamicUrl(API.PROFILE.PUT, { id: profile?.id || '' })
+          data = await api.put(url, params)
+        }
 
         setProfile(data)
         router.push(`/category/${category}/completion`)
@@ -82,7 +94,8 @@ const ActionPage: NextPage<Params> = ({ category }) => {
         action.checked = checked
         if (checked) {
           // @ts-ignore
-          action.actionIntensityRate.value = action.actionIntensityRate.defaultValue
+          action.actionIntensityRate.value =
+            action.actionIntensityRate.defaultValue
         } else {
           // @ts-ignore
           action.actionIntensityRate.value = 0
@@ -107,7 +120,7 @@ const ActionPage: NextPage<Params> = ({ category }) => {
         </Box>
       ) : (
         <Box pt={10}>
-          {categorizeActions && categorizeActions.length ?
+          {categorizeActions && categorizeActions.length ? (
             categorizeActions.map((action) => {
               return (
                 <ActionItem
@@ -121,16 +134,24 @@ const ActionPage: NextPage<Params> = ({ category }) => {
                 />
               )
             })
-            :
+          ) : (
             <Box textAlign="center">
-              <Box as={"h4"}>選択できるアクションが存在しません。</Box>
+              <Box as={'h4'}>選択できるアクションが存在しません。</Box>
               <Box py={4}>
-                <Link href={"/top"}>
-                  <h4 style={{ textDecoration: "underline", cursor: "pointer", fontWeight: "bold" }}>質問カテゴリーへ戻る</h4>
+                <Link href={'/top'}>
+                  <h4
+                    style={{
+                      textDecoration: 'underline',
+                      cursor: 'pointer',
+                      fontWeight: 'bold'
+                    }}
+                  >
+                    質問カテゴリーへ戻る
+                  </h4>
                 </Link>
               </Box>
             </Box>
-          }
+          )}
         </Box>
       )}
       <Box style={{ padding: '0.5rem 0 4rem 0' }}>

pages/index.tsx

@@ -1,6 +1,7 @@
-import { FC, useState } from 'react'
+import { FC, useEffect } from 'react'
+import { useRouter } from 'next/router'
+import { useUser } from '@auth0/nextjs-auth0/client'
 import { Container, useMediaQuery } from '@chakra-ui/react'
-import TermOfServiceDialog from 'components/molecules/homes/TermOfServiceDialog/TermOfServiceDialog'
 import HomeCaptionSection from 'components/organisms/homes/HomeCaptionSection/HomeCaptionSection'
 import HomeChangeSection from 'components/organisms/homes/HomeChangeSection/HomeChangeSection'
 import HomeFooter from 'components/organisms/homes/HomeFooter/HomeFooter'
@@ -9,9 +10,18 @@ import HomeKnowSection from 'components/organisms/homes/HomeKnowSection/HomeKnow
 import HomeLookBackSection from 'components/organisms/homes/HomeLookBackSection/HomeLookBackSection'
 import styles from 'styles/Home.module.scss'
 
+const maxW = '1280px'
 const Home: FC = () => {
+  const router = useRouter()
   const [isMobile] = useMediaQuery('(max-width: 480px)')
-  const maxW = '1280px'
+  // TODO: ERROR Handling
+  const { user } = useUser()
+
+  useEffect(() => {
+    if (user) {
+      router.push('/top')
+    }
+  }, [router, user])
 
   return (
     <div>
@@ -31,12 +41,6 @@ const Home: FC = () => {
         <HomeCaptionSection className={styles['home__caption-section']} />
       </Container>
       <HomeFooter />
-      {/* TODO: topページで表示 */}
-      {/* <TermOfServiceDialog
-        isOpen={open}
-        onClose={() => setOpen(false)}
-        sp={isMobile}
-      /> */}
     </div>
   )
 }

pages/top.tsx

@@ -1,21 +1,25 @@
-import { useEffect } from 'react'
+import { useState } from 'react'
 import { NextPage } from 'next'
-import { useUser } from '@auth0/nextjs-auth0/client'
+import { useMediaQuery } from '@chakra-ui/react'
+import TermOfServiceDialog from 'components/molecules/homes/TermOfServiceDialog/TermOfServiceDialog'
 import QuestionContainer from 'components/organisms/questions/Container'
 import TopCategories from 'components/organisms/top/Categories'
 
 const TopPage: NextPage = () => {
-  const { user, error, isLoading } = useUser()
-
-  // TODO: backendに投げる
-  useEffect(() => {
-    console.log(user, 'user')
-  }, [user])
+  const [isMobile] = useMediaQuery('(max-width: 480px)')
+  const [open, setOpen] = useState<boolean>(false)
 
   return (
-    <QuestionContainer>
-      <TopCategories />
-    </QuestionContainer>
+    <>
+      <QuestionContainer>
+        <TopCategories />
+      </QuestionContainer>
+      <TermOfServiceDialog
+        isOpen={open}
+        onClose={() => setOpen(false)}
+        sp={isMobile}
+      />
+    </>
   )
 }