diff --git a/README.md b/README.md index 1cfbf37..2ece35e 100644 --- a/README.md +++ b/README.md @@ -13,6 +13,12 @@ Main packages : Nextjs App Router project structure based +## Subjects + +- Server side cache invalidation : + - https://galadrim.fr/blog/nextjs-app-router-le-cache-et-ses-dangers + - https://www.answeroverflow.com/m/1103789268679282709 + ## Links - Nextjs tutorial base : https://nextjs.org/learn/basics/navigate-between-pages/client-side diff --git a/src/app/api/higher-scores/route.ts b/src/app/api/higher-scores/route.ts index 5322e61..17e213d 100644 --- a/src/app/api/higher-scores/route.ts +++ b/src/app/api/higher-scores/route.ts @@ -23,6 +23,8 @@ export async function GET() { const scoresOrdered = Scores.getScoresParsedAndOrdered(scoresBase).slice(0, NUMITEMS) const scores = await addUserNameToArrayById(scoresOrdered) + // console.log('GET route - result -->', scores) + if (!scores) { throw new APIError('Find userName by score request failed', { cause: { api: 'Higher score GET', values: 'scores' }, diff --git a/src/app/api/score-ranking/route.ts b/src/app/api/score-ranking/route.ts index 268bfc4..1d72606 100644 --- a/src/app/api/score-ranking/route.ts +++ b/src/app/api/score-ranking/route.ts @@ -17,6 +17,7 @@ export async function POST(request: NextRequest) { try { const requestData = await request.json() + console.log('requestdata ', requestData) if (!requestData.score) { throw new APIError('Undefined request body informations', { cause: { api: 'Score-ranking POST', values: 'user' }, diff --git a/src/app/page.tsx b/src/app/page.tsx index ec30204..4a77167 100644 --- a/src/app/page.tsx +++ b/src/app/page.tsx @@ -1,52 +1,57 @@ +// https://nextjs.org/docs/app/building-your-application/caching#segment-config-options +export const dynamic = 'force-dynamic' +export const revalidate = 0 + +import { cookies, headers } from 'next/headers' import { Box, CircularProgress } from '@mui/material' import { Home } from '@/components/home' -import { ScoreList } from '@/components/score-list' import { Scores } from '@/services/scores' import { APIError } from '@/utils/errors' -import { cookies } from 'next/headers' import { PUZZLE_COOKIE } from '@/constants' -let server = 'http://localhost:3000' -try { - const env = process.env.NODE_ENV +const { signal } = new AbortController() - if (env == 'production') { - server = 'https://speed-puzzle-kz08m3nxu-001-817d24a7.vercel.app/' - } -} catch (error) { - console.log('ENVIRONEMENT VARIABLE - ERROR', error) -} +// const getHigherScores = async (server: string | null) => { +// try { +// if (!server) { +// throw new APIError('server url is invalid', { +// cause: { api: 'Higher score GET', values: 'scores' }, +// }) +// } +// const response = await fetch(`${server}api/higher-scores`, { +// signal, +// cache: 'no-store', +// next: { revalidate: 0 }, +// }) -const getHigherScores = async () => { - try { - const response = await fetch(`${server}/api/higher-scores`, { - method: 'GET', - cache: 'no-store', - }) - - if (!response) { - throw new APIError('Higher score request failed', { - cause: { api: 'Higher score GET', values: 'scores' }, - }) - } - const result = await response.json() - const { scores } = result - return Scores.getScoresParsedAndOrdered(scores) - } catch { - return [] - } -} +// if (!response) { +// throw new APIError('Higher score request failed', { +// cause: { api: 'Higher score GET', values: 'scores' }, +// }) +// } +// const result = await response.json() +// // console.log('getHigherScores - result', result) +// const { scores } = result +// return Scores.getScoresParsedAndOrdered(scores) +// } catch { +// return [] +// } +// } const getPuzzleCookie = () => { const cookieStore = cookies() return cookieStore.get(PUZZLE_COOKIE) } -export default async function Page() { - const recentScores = await getHigherScores() +export default function Page() { + const heads = headers() + const pathname = heads.get('x-url') + // const recentScores = await getHigherScores(pathname) const cookie = getPuzzleCookie() + console.log('pathname', pathname) + return ( - {recentScores ? ( - - ) : ( - - )} + ) } diff --git a/src/components/home/index.tsx b/src/components/home/index.tsx index bceec20..b13bfa2 100644 --- a/src/components/home/index.tsx +++ b/src/components/home/index.tsx @@ -7,15 +7,41 @@ import { ROUTES } from '@/constants' import { Metadata } from 'next' import { ScoreList } from '../score-list' import { useEffect, useState } from 'react' +import { API } from '@/services/server' export const metadata: Metadata = { title: 'SPEED PUZZLE - 2023', description: 'Version - 2', } -export const Home = ({ scores, cookie }: { scores: any[]; cookie: any }) => { +export const Home = ({ cookie }: { cookie: any }) => { const router = useRouter() const [userName, setUserNamme] = useState() + const [scores, setScores] = useState([]) + + // const getHigherScores = async () => { + // const response = await API.getHighestScores() + // if (response) { + // console.log('getHigherScores response status', response.status) + // const result = await response.json() + // // const { scores } = result + // // const scoresParsed = Scores.getScoresParsedAndOrdered(scores) + // // console.log('getHigherScores scoreParsed', scoresParsed) + // console.log('test onClick result', result) + // } + // } + + useEffect(() => { + const getHigherScores = async () => { + const response = await API.getHighestScores() + if (response) { + console.log('getHigherScores response status', response.status) + const result = await response.json() + setScores(result?.scores) + } + } + getHigherScores() + }, []) useEffect(() => { if (cookie) { diff --git a/src/components/score-list/index.tsx b/src/components/score-list/index.tsx index bb18c67..2b9deb8 100644 --- a/src/components/score-list/index.tsx +++ b/src/components/score-list/index.tsx @@ -7,7 +7,7 @@ export const ScoreList = ({ scores }: { scores: any[] }) => { sx={{ display: 'flex', flexDirection: 'column', - alignContent: 'center', + width: '100%', }} > {scores.map((item, index) => { @@ -17,12 +17,27 @@ export const ScoreList = ({ scores }: { scores: any[] }) => { sx={{ display: 'flex', flexDirection: 'row', - alignContent: 'flex-start', gap: 10, }} > - {item.userName} - {item.value} + + {item.userName} + + + {item.value} + ) })} diff --git a/src/middleware.ts b/src/middleware.ts new file mode 100644 index 0000000..a74c686 --- /dev/null +++ b/src/middleware.ts @@ -0,0 +1,14 @@ +import { NextResponse, type NextRequest } from "next/server"; + +// https://nextjs.org/docs/app/building-your-application/routing/middleware#matcher +export const config = { + matcher: '/', +} + +export async function middleware(request: NextRequest) { + return NextResponse.next({ + request: { + headers: new Headers({ "x-url": request.url }), + }, + }); +} \ No newline at end of file diff --git a/src/providers/puzzle-provider.tsx b/src/providers/puzzle-provider.tsx index d1b7b3b..f0d954b 100644 --- a/src/providers/puzzle-provider.tsx +++ b/src/providers/puzzle-provider.tsx @@ -94,13 +94,12 @@ export const PuzzleProvider: React.FC = ({ children }) => { async function compareScoreWithDB() { try { - const data = { score: state.result?.value.toString() } - - if (!state.result?.value.toString()) { + if (!state?.result?.value.toString()) { throw new Error() // TODO conitnue to manage the error state } - console.log('compareScoreWithDB - score :', data) + // const data = { score: state?.result?.value.toString() } + // console.log('compareScoreWithDB - score :', data) const response = await API.currentScoreRanking( state.result.value.toString() diff --git a/src/services/server.ts b/src/services/server.ts index d3e4798..46470b7 100644 --- a/src/services/server.ts +++ b/src/services/server.ts @@ -12,13 +12,12 @@ export class API { } static currentScoreRanking = async (score: string) => { - const data = { score } return await fetch('/api/score-ranking', { method: 'POST', headers: { 'Content-Type': 'application/json', }, - body: JSON.stringify(data), + body: JSON.stringify({ score }), }) }