From 2a1164d1fde5efec399e0f01ba1cfd3f5eb4146b Mon Sep 17 00:00:00 2001 From: Daniel Soares Date: Mon, 13 Dec 2021 17:12:51 -0300 Subject: [PATCH] feat: test ISR --- .gitignore | 2 +- package.json | 3 +- scripts/initialdata.ts | 32 ++---- src/components/Avatar/index.tsx | 2 +- src/components/Button/index.tsx | 18 ++- src/components/Button/styles.ts | 106 +++++++++--------- .../Dash/DescriptionInput/index.tsx | 2 +- src/components/Dash/NameInput/index.tsx | 2 +- src/components/Dash/index.tsx | 64 ++++++----- src/components/Home/index.tsx | 20 ++-- src/components/Link/index.tsx | 19 ++-- src/components/Link/styles.ts | 56 +++++---- src/components/SocialLinks/index.tsx | 7 +- src/contexts/DataContext.tsx | 23 ++-- src/hooks/useData.ts | 5 + src/hooks/useFetchData.ts | 15 +++ src/pages/api/data.ts | 5 - src/pages/dash.tsx | 22 +++- src/pages/index.tsx | 23 +++- src/services/api.ts | 2 + src/services/fetchData.ts | 12 ++ src/styles/globals.ts | 2 +- src/styles/stitches.config.ts | 8 +- src/types/Data.ts | 28 +++++ src/utils/localStorage.ts | 4 +- yarn.lock | 5 + 26 files changed, 295 insertions(+), 192 deletions(-) create mode 100644 src/hooks/useData.ts create mode 100644 src/hooks/useFetchData.ts create mode 100644 src/services/fetchData.ts create mode 100644 src/types/Data.ts diff --git a/.gitignore b/.gitignore index ecdfb42..91f01f1 100644 --- a/.gitignore +++ b/.gitignore @@ -14,7 +14,7 @@ # production /build -/data +/temp # misc .DS_Store diff --git a/package.json b/package.json index e7c87f4..e74c316 100644 --- a/package.json +++ b/package.json @@ -29,7 +29,8 @@ "react": "17.0.2", "react-dom": "17.0.2", "react-icons": "^4.3.1", - "sharp": "^0.29.3" + "sharp": "^0.29.3", + "swr": "^1.1.1" }, "devDependencies": { "@commitlint/cli": "15.0.0", diff --git a/scripts/initialdata.ts b/scripts/initialdata.ts index 856ae20..d92f65c 100644 --- a/scripts/initialdata.ts +++ b/scripts/initialdata.ts @@ -1,29 +1,19 @@ -import { PrismaClient } from '@prisma/client' import fs from 'fs' -const prisma = new PrismaClient() +import { fetchData } from '../src/services/fetchData' async function initialdata() { - const dataDir = './data' - const data = await prisma.data.findFirst() + const dataDir = './temp' + const data = await fetchData() - if (data) { - if (!fs.existsSync(dataDir)) { - fs.mkdirSync(dataDir) - } - - const parsedData = JSON.parse(data.data) - fs.writeFileSync(`${dataDir}/data.json`, JSON.stringify(parsedData, null, 2)) - } else { - throw new Error('No data found') + if (!fs.existsSync(dataDir)) { + fs.mkdirSync(dataDir) } + + fs.writeFileSync(`${dataDir}/data.json`, JSON.stringify(data, null, 2)) } -initialdata() - .catch(e => { - console.error(e) - process.exit(1) - }) - .finally(async () => { - await prisma.$disconnect() - }) +initialdata().catch(e => { + console.error(e) + process.exit(1) +}) diff --git a/src/components/Avatar/index.tsx b/src/components/Avatar/index.tsx index 7f86b13..779dd0f 100644 --- a/src/components/Avatar/index.tsx +++ b/src/components/Avatar/index.tsx @@ -1,4 +1,4 @@ -import { useData } from '../../contexts/DataContext' +import { useData } from '../../hooks/useData' import { Wrapper } from './styles' export function Avatar() { diff --git a/src/components/Button/index.tsx b/src/components/Button/index.tsx index 98f25ca..ebf79be 100644 --- a/src/components/Button/index.tsx +++ b/src/components/Button/index.tsx @@ -1,12 +1,18 @@ -import { ButtonHTMLAttributes, ReactNode } from 'react' +import type { ButtonHTMLAttributes, ReactNode } from 'react' -import { ButtonVariantProps, Wrapper } from './styles' +import type { ButtonVariantProps } from './styles' +import { Wrapper } from './styles' -type ButtonProps = ButtonVariantProps & - ButtonHTMLAttributes & { - children: ReactNode - } +type ButtonProps = ButtonHTMLAttributes & { + children: ReactNode + theme?: ButtonVariantProps['theme'] + schema?: ButtonVariantProps['schema'] + outline?: ButtonVariantProps['outline'] + font?: ButtonVariantProps['font'] +} export function Button({ children, ...rest }: ButtonProps) { return {children} } + +export type { ButtonVariantProps } diff --git a/src/components/Button/styles.ts b/src/components/Button/styles.ts index 7a1ef1c..9cee486 100644 --- a/src/components/Button/styles.ts +++ b/src/components/Button/styles.ts @@ -1,10 +1,10 @@ -import { ColorsType, styled, theme, VariantProps } from '../../styles/stitches.config' +import { Colors, styled, theme, VariantProps } from '../../styles/stitches.config' -const colorVariantFn = ( - lightColor: ColorsType, - regularColor: ColorsType, - darkColor: ColorsType, - darkerColor: ColorsType +const themeVariantFn = ( + lightColor: Colors, + regularColor: Colors, + darkColor: Colors, + darkerColor: Colors ) => ({ background: theme.colors[regularColor], borderColor: theme.colors[regularColor], @@ -21,7 +21,7 @@ const colorVariantFn = ( } }) -const outlineVariantFn = (color: ColorsType) => ({ +const outlineVariantFn = (color: Colors) => ({ color: theme.colors[color], '&:hover': { @@ -51,29 +51,29 @@ export const Wrapper = styled('button', { }, variants: { - color: { - slate: colorVariantFn('slate50', 'slate600', 'slate700', 'slate800'), - gray: colorVariantFn('gray50', 'gray600', 'gray700', 'gray800'), - zinc: colorVariantFn('zinc50', 'zinc600', 'zinc700', 'zinc800'), - neutral: colorVariantFn('neutral50', 'neutral600', 'neutral700', 'neutral800'), - stone: colorVariantFn('stone50', 'stone600', 'stone700', 'stone800'), - red: colorVariantFn('red50', 'red600', 'red700', 'red800'), - orange: colorVariantFn('orange50', 'orange600', 'orange700', 'orange800'), - amber: colorVariantFn('amber50', 'amber600', 'amber700', 'amber800'), - yellow: colorVariantFn('yellow50', 'yellow600', 'yellow700', 'yellow800'), - lime: colorVariantFn('lime50', 'lime600', 'lime700', 'lime800'), - green: colorVariantFn('green50', 'green600', 'green700', 'green800'), - emerald: colorVariantFn('emerald50', 'emerald600', 'emerald700', 'emerald800'), - teal: colorVariantFn('teal50', 'teal600', 'teal700', 'teal800'), - cyan: colorVariantFn('cyan50', 'cyan600', 'cyan700', 'cyan800'), - sky: colorVariantFn('sky50', 'sky600', 'sky700', 'sky800'), - blue: colorVariantFn('blue50', 'blue600', 'blue700', 'blue800'), - indigo: colorVariantFn('indigo50', 'indigo600', 'indigo700', 'indigo800'), - violet: colorVariantFn('violet50', 'violet600', 'violet700', 'violet800'), - purple: colorVariantFn('purple50', 'purple600', 'purple700', 'purple800'), - fuchsia: colorVariantFn('fuchsia50', 'fuchsia600', 'fuchsia700', 'fuchsia800'), - pink: colorVariantFn('pink50', 'pink600', 'pink700', 'pink800'), - rose: colorVariantFn('rose50', 'rose600', 'rose700', 'rose800') + theme: { + slate: themeVariantFn('slate50', 'slate600', 'slate700', 'slate800'), + gray: themeVariantFn('gray50', 'gray600', 'gray700', 'gray800'), + zinc: themeVariantFn('zinc50', 'zinc600', 'zinc700', 'zinc800'), + neutral: themeVariantFn('neutral50', 'neutral600', 'neutral700', 'neutral800'), + stone: themeVariantFn('stone50', 'stone600', 'stone700', 'stone800'), + red: themeVariantFn('red50', 'red600', 'red700', 'red800'), + orange: themeVariantFn('orange50', 'orange600', 'orange700', 'orange800'), + amber: themeVariantFn('amber50', 'amber600', 'amber700', 'amber800'), + yellow: themeVariantFn('yellow50', 'yellow600', 'yellow700', 'yellow800'), + lime: themeVariantFn('lime50', 'lime600', 'lime700', 'lime800'), + green: themeVariantFn('green50', 'green600', 'green700', 'green800'), + emerald: themeVariantFn('emerald50', 'emerald600', 'emerald700', 'emerald800'), + teal: themeVariantFn('teal50', 'teal600', 'teal700', 'teal800'), + cyan: themeVariantFn('cyan50', 'cyan600', 'cyan700', 'cyan800'), + sky: themeVariantFn('sky50', 'sky600', 'sky700', 'sky800'), + blue: themeVariantFn('blue50', 'blue600', 'blue700', 'blue800'), + indigo: themeVariantFn('indigo50', 'indigo600', 'indigo700', 'indigo800'), + violet: themeVariantFn('violet50', 'violet600', 'violet700', 'violet800'), + purple: themeVariantFn('purple50', 'purple600', 'purple700', 'purple800'), + fuchsia: themeVariantFn('fuchsia50', 'fuchsia600', 'fuchsia700', 'fuchsia800'), + pink: themeVariantFn('pink50', 'pink600', 'pink700', 'pink800'), + rose: themeVariantFn('rose50', 'rose600', 'rose700', 'rose800') }, schema: { @@ -109,119 +109,119 @@ export const Wrapper = styled('button', { compoundVariants: [ { - color: 'slate', + theme: 'slate', outline: true, css: outlineVariantFn('slate600') }, { - color: 'gray', + theme: 'gray', outline: true, css: outlineVariantFn('gray600') }, { - color: 'zinc', + theme: 'zinc', outline: true, css: outlineVariantFn('zinc600') }, { - color: 'neutral', + theme: 'neutral', outline: true, css: outlineVariantFn('neutral600') }, { - color: 'stone', + theme: 'stone', outline: true, css: outlineVariantFn('stone600') }, { - color: 'red', + theme: 'red', outline: true, css: outlineVariantFn('red600') }, { - color: 'orange', + theme: 'orange', outline: true, css: outlineVariantFn('orange600') }, { - color: 'amber', + theme: 'amber', outline: true, css: outlineVariantFn('amber600') }, { - color: 'yellow', + theme: 'yellow', outline: true, css: outlineVariantFn('yellow600') }, { - color: 'lime', + theme: 'lime', outline: true, css: outlineVariantFn('lime600') }, { - color: 'green', + theme: 'green', outline: true, css: outlineVariantFn('green600') }, { - color: 'emerald', + theme: 'emerald', outline: true, css: outlineVariantFn('emerald600') }, { - color: 'teal', + theme: 'teal', outline: true, css: outlineVariantFn('teal600') }, { - color: 'cyan', + theme: 'cyan', outline: true, css: outlineVariantFn('cyan600') }, { - color: 'sky', + theme: 'sky', outline: true, css: outlineVariantFn('sky600') }, { - color: 'blue', + theme: 'blue', outline: true, css: outlineVariantFn('blue600') }, { - color: 'indigo', + theme: 'indigo', outline: true, css: outlineVariantFn('indigo600') }, { - color: 'violet', + theme: 'violet', outline: true, css: outlineVariantFn('violet600') }, { - color: 'purple', + theme: 'purple', outline: true, css: outlineVariantFn('purple600') }, { - color: 'fuchsia', + theme: 'fuchsia', outline: true, css: outlineVariantFn('fuchsia600') }, { - color: 'pink', + theme: 'pink', outline: true, css: outlineVariantFn('pink600') }, { - color: 'rose', + theme: 'rose', outline: true, css: outlineVariantFn('rose600') } ], defaultVariants: { - color: 'teal', + theme: 'teal', schema: 'pill', font: 'roboto', outline: false diff --git a/src/components/Dash/DescriptionInput/index.tsx b/src/components/Dash/DescriptionInput/index.tsx index c008d74..bc07bf2 100644 --- a/src/components/Dash/DescriptionInput/index.tsx +++ b/src/components/Dash/DescriptionInput/index.tsx @@ -1,4 +1,4 @@ -import { useData } from '../../../contexts/DataContext' +import { useData } from '../../../hooks/useData' export function DescriptionInput() { const { data, setData } = useData() diff --git a/src/components/Dash/NameInput/index.tsx b/src/components/Dash/NameInput/index.tsx index 3e724dc..83f3c2e 100644 --- a/src/components/Dash/NameInput/index.tsx +++ b/src/components/Dash/NameInput/index.tsx @@ -1,4 +1,4 @@ -import { useData } from '../../../contexts/DataContext' +import { useData } from '../../../hooks/useData' export function NameInput() { const { data, setData } = useData() diff --git a/src/components/Dash/index.tsx b/src/components/Dash/index.tsx index 1dd9014..059c16d 100644 --- a/src/components/Dash/index.tsx +++ b/src/components/Dash/index.tsx @@ -1,77 +1,80 @@ import { isEqual } from 'lodash' +import { useRouter } from 'next/router' import { useEffect, useState } from 'react' -import { useData } from '../../contexts/DataContext' +import { useData } from '../../hooks/useData' import { api } from '../../services/api' +import type { Colors, Fonts } from '../../styles/stitches.config' import { theme } from '../../styles/stitches.config' +import type { Data } from '../../types/Data' import { getLocalStorageData, removeLocalStorageData, setLocalStorageData } from '../../utils/localStorage' +import type { ButtonVariantProps } from '../Button' import { Home } from '../Home' import { DescriptionInput } from './DescriptionInput' import { NameInput } from './NameInput' import { Content, Preview, Wrapper } from './styles' -export function Dash() { - const { initialData, data, setData } = useData() +type DashProps = { + initialData: Data +} + +export function Dash({ initialData }: DashProps) { + const { push } = useRouter() + const { data, setData } = useData() const [isLoading, setIsLoading] = useState(true) const [hasUnsavedChanges, setHasUnsavedChanges] = useState(false) useEffect(() => { - const storageData = getLocalStorageData() + if (isLoading) { + const storageData = getLocalStorageData() + if (storageData) setData(storageData) + else setData(initialData) - if (storageData && isLoading) { - setData(storageData) + setIsLoading(false) } - setIsLoading(false) - }, [isLoading, setData]) - - useEffect(() => { - if (!isEqual(initialData, data)) { + if (!isLoading && !isEqual(initialData, data)) { setHasUnsavedChanges(true) setLocalStorageData(data) } else { setHasUnsavedChanges(false) - removeLocalStorageData() } - }, [data, initialData]) + }, [data, initialData, isLoading, setData]) const handleSave = async () => { try { await api.put('data', { data }) - setHasUnsavedChanges(false) removeLocalStorageData() + setHasUnsavedChanges(false) + push('/') } catch (error) { console.error(error) } } - const handleChangeBackground = (background: string) => { + const handleChangeBackground = (background: Colors) => { setData({ ...data, settings: { ...data.settings, colors: { ...data.settings.colors, background } } }) } - const handleChangeButtonsSchema = (schema: string) => { + const handleChangeButtonsSchema = (schema: ButtonVariantProps['schema']) => { setData({ ...data, settings: { ...data.settings, buttonsSchema: schema } }) } - const handleChangeOutline = (outline: boolean) => { + const handleChangeOutline = (outline: ButtonVariantProps['outline']) => { setData({ ...data, settings: { ...data.settings, outline } }) } - const handleChangeFont = (font: string) => { + const handleChangeFont = (font: Fonts) => { setData({ ...data, settings: { ...data.settings, font } }) } - if (isLoading) { - return
Loading...
- } - return ( @@ -86,7 +89,10 @@ export function Dash() { - handleChangeFont(e.target.value as Fonts)} + > @@ -94,7 +100,7 @@ export function Dash() { handleChangeOutline(!data.settings.outline)} + defaultChecked={data.settings.outline as boolean} + onChange={() => + handleChangeOutline(!data.settings.outline as ButtonVariantProps['outline']) + } /> diff --git a/src/components/Home/index.tsx b/src/components/Home/index.tsx index 309c645..0d006f9 100644 --- a/src/components/Home/index.tsx +++ b/src/components/Home/index.tsx @@ -1,4 +1,4 @@ -import { useData } from '../../contexts/DataContext' +import { useData } from '../../hooks/useData' import { theme } from '../../styles/stitches.config' import { Avatar } from '../Avatar' import { Button } from '../Button' @@ -22,13 +22,17 @@ export const Home = () => { {name} {description} - {data.buttonLinks?.map(link => - // @ts-ignore - // prettier-ignore - - )} + {data.buttonLinks?.map(link => ( + + ))} ) diff --git a/src/components/Link/index.tsx b/src/components/Link/index.tsx index 628dd9c..90a4414 100644 --- a/src/components/Link/index.tsx +++ b/src/components/Link/index.tsx @@ -1,17 +1,20 @@ import NextLink from 'next/link' -import { AnchorHTMLAttributes } from 'react' +import type { AnchorHTMLAttributes } from 'react' -import { LinkVariantProps, Wrapper } from './styles' +import type { LinkVariantProps } from './styles' +import { Wrapper } from './styles' -export type LinkProps = AnchorHTMLAttributes & - LinkVariantProps & { - href: string - } +export type LinkProps = AnchorHTMLAttributes & { + href: string + theme?: LinkVariantProps['theme'] +} -export function Link({ href, ...rest }: LinkProps) { +export function Link({ href, theme, ...rest }: LinkProps) { return ( - + ) } + +export type { LinkVariantProps } diff --git a/src/components/Link/styles.ts b/src/components/Link/styles.ts index f26cd38..16ec010 100644 --- a/src/components/Link/styles.ts +++ b/src/components/Link/styles.ts @@ -1,10 +1,6 @@ -import { ColorsType, styled, theme, VariantProps } from '../../styles/stitches.config' +import { Colors, styled, theme, VariantProps } from '../../styles/stitches.config' -const colorVariantFn = ( - regularColor: ColorsType, - darkColor: ColorsType, - darkerColor: ColorsType -) => ({ +const themeVariantFn = (regularColor: Colors, darkColor: Colors, darkerColor: Colors) => ({ color: theme.colors[regularColor], '&:hover': { @@ -22,34 +18,34 @@ export const Wrapper = styled('a', { cursor: 'pointer', variants: { - color: { - slate: colorVariantFn('slate600', 'slate700', 'slate800'), - gray: colorVariantFn('gray600', 'gray700', 'gray800'), - zinc: colorVariantFn('zinc600', 'zinc700', 'zinc800'), - neutral: colorVariantFn('neutral600', 'neutral700', 'neutral800'), - stone: colorVariantFn('stone600', 'stone700', 'stone800'), - red: colorVariantFn('red600', 'red700', 'red800'), - orange: colorVariantFn('orange600', 'orange700', 'orange800'), - amber: colorVariantFn('amber600', 'amber700', 'amber800'), - yellow: colorVariantFn('yellow600', 'yellow700', 'yellow800'), - lime: colorVariantFn('lime600', 'lime700', 'lime800'), - green: colorVariantFn('green600', 'green700', 'green800'), - emerald: colorVariantFn('emerald600', 'emerald700', 'emerald800'), - teal: colorVariantFn('teal600', 'teal700', 'teal800'), - cyan: colorVariantFn('cyan600', 'cyan700', 'cyan800'), - sky: colorVariantFn('sky600', 'sky700', 'sky800'), - blue: colorVariantFn('blue600', 'blue700', 'blue800'), - indigo: colorVariantFn('indigo600', 'indigo700', 'indigo800'), - violet: colorVariantFn('violet600', 'violet700', 'violet800'), - purple: colorVariantFn('purple600', 'purple700', 'purple800'), - fuchsia: colorVariantFn('fuchsia600', 'fuchsia700', 'fuchsia800'), - pink: colorVariantFn('pink600', 'pink700', 'pink800'), - rose: colorVariantFn('rose600', 'rose700', 'rose800') + theme: { + slate: themeVariantFn('slate600', 'slate700', 'slate800'), + gray: themeVariantFn('gray600', 'gray700', 'gray800'), + zinc: themeVariantFn('zinc600', 'zinc700', 'zinc800'), + neutral: themeVariantFn('neutral600', 'neutral700', 'neutral800'), + stone: themeVariantFn('stone600', 'stone700', 'stone800'), + red: themeVariantFn('red600', 'red700', 'red800'), + orange: themeVariantFn('orange600', 'orange700', 'orange800'), + amber: themeVariantFn('amber600', 'amber700', 'amber800'), + yellow: themeVariantFn('yellow600', 'yellow700', 'yellow800'), + lime: themeVariantFn('lime600', 'lime700', 'lime800'), + green: themeVariantFn('green600', 'green700', 'green800'), + emerald: themeVariantFn('emerald600', 'emerald700', 'emerald800'), + teal: themeVariantFn('teal600', 'teal700', 'teal800'), + cyan: themeVariantFn('cyan600', 'cyan700', 'cyan800'), + sky: themeVariantFn('sky600', 'sky700', 'sky800'), + blue: themeVariantFn('blue600', 'blue700', 'blue800'), + indigo: themeVariantFn('indigo600', 'indigo700', 'indigo800'), + violet: themeVariantFn('violet600', 'violet700', 'violet800'), + purple: themeVariantFn('purple600', 'purple700', 'purple800'), + fuchsia: themeVariantFn('fuchsia600', 'fuchsia700', 'fuchsia800'), + pink: themeVariantFn('pink600', 'pink700', 'pink800'), + rose: themeVariantFn('rose600', 'rose700', 'rose800') } }, defaultVariants: { - color: 'teal' + theme: 'teal' } }) diff --git a/src/components/SocialLinks/index.tsx b/src/components/SocialLinks/index.tsx index c8292a6..f02e514 100644 --- a/src/components/SocialLinks/index.tsx +++ b/src/components/SocialLinks/index.tsx @@ -5,9 +5,9 @@ import { } from 'react-icons/ai' import { BsEnvelope as Email } from 'react-icons/bs' import { FaDev as Dev, FaLinkedinIn as LinkedIn } from 'react-icons/fa' -import { IconType } from 'react-icons/lib' +import type { IconType } from 'react-icons/lib' -import { useData } from '../../contexts/DataContext' +import { useData } from '../../hooks/useData' import { Link } from '../Link' import { SocialItem, Wrapper } from './styles' @@ -34,8 +34,7 @@ export function SocialLinks() { aria-label={label} rel="noopener noreferrer" target="_blank" - // @ts-ignore - color={data.settings.colors.socialLinks} + theme={data.settings.colors.socialLinks} > diff --git a/src/contexts/DataContext.tsx b/src/contexts/DataContext.tsx index a732a28..03a2e08 100644 --- a/src/contexts/DataContext.tsx +++ b/src/contexts/DataContext.tsx @@ -1,27 +1,22 @@ -import { createContext, Dispatch, ReactNode, SetStateAction, useContext, useState } from 'react' +import type { Dispatch, ReactNode, SetStateAction } from 'React' +import { createContext, useState } from 'react' -import initialData from '../../data/data.json' - -type DataType = typeof initialData +import initialData from '../../temp/data.json' +import type { Data } from '../types/Data' type DataContextType = { - initialData: DataType - data: DataType - setData: Dispatch> + data: Data + setData: Dispatch> } type DataProviderProps = { children: ReactNode } -const DataContext = createContext({} as DataContextType) +export const DataContext = createContext({} as DataContextType) export const DataProvider = ({ children }: DataProviderProps) => { - const [data, setData] = useState(initialData) + const [data, setData] = useState(initialData as Data) - return ( - {children} - ) + return {children} } - -export const useData = () => useContext(DataContext) diff --git a/src/hooks/useData.ts b/src/hooks/useData.ts new file mode 100644 index 0000000..a02ab03 --- /dev/null +++ b/src/hooks/useData.ts @@ -0,0 +1,5 @@ +import { useContext } from 'react' + +import { DataContext } from '../contexts/DataContext' + +export const useData = () => useContext(DataContext) diff --git a/src/hooks/useFetchData.ts b/src/hooks/useFetchData.ts new file mode 100644 index 0000000..a037efd --- /dev/null +++ b/src/hooks/useFetchData.ts @@ -0,0 +1,15 @@ +import useSWR from 'swr' + +import { fetcher } from '../services/api' +import type { Data } from '../types/Data' +import { useData } from './useData' + +export function useFetchData(fallbackData: Data) { + const { setData } = useData() + const { data } = useSWR('data', fetcher, { + refreshInterval: 1000, + fallbackData + }) + + setData(data) +} diff --git a/src/pages/api/data.ts b/src/pages/api/data.ts index 23cf06a..cc21fe5 100644 --- a/src/pages/api/data.ts +++ b/src/pages/api/data.ts @@ -2,7 +2,6 @@ import { NextApiRequest, NextApiResponse } from 'next' import nc from 'next-connect' import { prisma } from '../../services/prisma' -const { RAILWAY_TOKEN } = process.env const handler = nc() .get(async (_req, res) => { @@ -24,10 +23,6 @@ const handler = nc() data: { data: JSON.stringify(req.body.data) } }) - if (RAILWAY_TOKEN) { - console.log('railway token', RAILWAY_TOKEN) - } - res.status(200).json(response) } catch (error) { console.error(error) diff --git a/src/pages/dash.tsx b/src/pages/dash.tsx index 691a6c8..6f49486 100644 --- a/src/pages/dash.tsx +++ b/src/pages/dash.tsx @@ -1,5 +1,21 @@ -import { Dash } from '../components/Dash' +import { GetServerSideProps } from 'next' -export default function DashPage() { - return +import { Dash } from '../components/Dash' +import { fetchData } from '../services/fetchData' +import type { Data } from '../types/Data' + +type DashPageProps = { + initialData: Data +} + +export default function DashPage({ initialData }: DashPageProps) { + return +} + +export const getServerSideProps: GetServerSideProps = async () => { + const initialData = await fetchData() + + return { + props: { initialData } + } } diff --git a/src/pages/index.tsx b/src/pages/index.tsx index 31ad74e..c278ac5 100644 --- a/src/pages/index.tsx +++ b/src/pages/index.tsx @@ -1,5 +1,24 @@ -import { Home } from '../components/Home' +import { GetStaticProps } from 'next' -export default function HomePage() { +import { Home } from '../components/Home' +import { useFetchData } from '../hooks/useFetchData' +import { fetchData } from '../services/fetchData' +import type { Data } from '../types/Data' + +type HomePageProps = { + data: Data +} + +export default function HomePage({ data }: HomePageProps) { + useFetchData(data) return } + +export const getStaticProps: GetStaticProps = async () => { + const data = await fetchData() + + return { + props: { data }, + revalidate: 1 + } +} diff --git a/src/services/api.ts b/src/services/api.ts index 0c04fc0..a1daa5f 100644 --- a/src/services/api.ts +++ b/src/services/api.ts @@ -3,3 +3,5 @@ import axios from 'axios' export const api = axios.create({ baseURL: '/api' }) + +export const fetcher = (url: string) => api.get(url).then(({ data }) => data) diff --git a/src/services/fetchData.ts b/src/services/fetchData.ts new file mode 100644 index 0000000..d02677f --- /dev/null +++ b/src/services/fetchData.ts @@ -0,0 +1,12 @@ +import type { Data } from '../types/Data' +import { prisma } from './prisma' + +export async function fetchData(): Promise { + const data = await prisma.data.findFirst() + + if (data) { + return JSON.parse(data.data) + } else { + throw new Error('No data found') + } +} diff --git a/src/styles/globals.ts b/src/styles/globals.ts index 1f22781..611e29e 100644 --- a/src/styles/globals.ts +++ b/src/styles/globals.ts @@ -1,4 +1,4 @@ -import data from '../../data/data.json' +import data from '../../temp/data.json' import { globalCss, theme } from './stitches.config' export const globalStyles = globalCss({ diff --git a/src/styles/stitches.config.ts b/src/styles/stitches.config.ts index b265837..a643b27 100644 --- a/src/styles/stitches.config.ts +++ b/src/styles/stitches.config.ts @@ -1,4 +1,5 @@ -import { createStitches, VariantProps } from '@stitches/react' +import type { VariantProps } from '@stitches/react' +import { createStitches } from '@stitches/react' export const { css, styled, globalCss, theme, keyframes, getCssText } = createStitches({ theme: { @@ -253,6 +254,7 @@ export const { css, styled, globalCss, theme, keyframes, getCssText } = createSt } }) -type ColorsType = keyof typeof theme.colors +type Colors = keyof typeof theme.colors +type Fonts = keyof typeof theme.fonts -export type { ColorsType, VariantProps } +export type { Colors, Fonts, VariantProps } diff --git a/src/types/Data.ts b/src/types/Data.ts new file mode 100644 index 0000000..48f8f0f --- /dev/null +++ b/src/types/Data.ts @@ -0,0 +1,28 @@ +import type { ButtonVariantProps } from '../components/Button' +import type { LinkVariantProps } from '../components/Link' +import type { Colors, Fonts } from '../styles/stitches.config' + +export type Data = { + settings: { + avatar: string + name: string + description: string + font: Fonts + buttonsSchema: ButtonVariantProps['schema'] + outline: ButtonVariantProps['outline'] + colors: { + texts: Colors + socialLinks: LinkVariantProps['theme'] + buttonLinks: ButtonVariantProps['theme'] + background: Colors + } + } + socialLinks: { + label: string + href: string + }[] + buttonLinks: { + label: string + href: string + }[] +} diff --git a/src/utils/localStorage.ts b/src/utils/localStorage.ts index c927fee..e793b21 100644 --- a/src/utils/localStorage.ts +++ b/src/utils/localStorage.ts @@ -1,6 +1,8 @@ +import type { Data } from '../types/Data' + const KEY = 'link-free-data' -export function getLocalStorageData() { +export function getLocalStorageData(): Data | null { const data = process.browser && localStorage.getItem(KEY) return data ? JSON.parse(data) : null } diff --git a/yarn.lock b/yarn.lock index d8fbb2d..df56313 100644 --- a/yarn.lock +++ b/yarn.lock @@ -4147,6 +4147,11 @@ supports-color@^9.0.2: resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-9.2.1.tgz#599dc9d45acf74c6176e0d880bab1d7d718fe891" integrity sha512-Obv7ycoCTG51N7y175StI9BlAXrmgZrFhZOb0/PyjHBher/NmsdBgbbQ1Inhq+gIhz6+7Gb+jWF2Vqi7Mf1xnQ== +swr@^1.1.1: + version "1.1.1" + resolved "https://registry.yarnpkg.com/swr/-/swr-1.1.1.tgz#f13346cc830d7950183af57b341bfabb4cc90d43" + integrity sha512-ZpUHyU3N3snj2QGFeE2Fd3BXl1CVS6YQIQGb1ttPAkTmvwZqDyV3GRMNPsaeAYCBM74tfn4XbKx28FVQR0mS7Q== + tar-fs@^2.0.0, tar-fs@^2.1.1: version "2.1.1" resolved "https://registry.yarnpkg.com/tar-fs/-/tar-fs-2.1.1.tgz#489a15ab85f1f0befabb370b7de4f9eb5cbe8784"