diff --git a/apps/web/src/components/DialogButton.tsx b/apps/web/src/components/DialogButton.tsx index f171a88..7d3ec70 100644 --- a/apps/web/src/components/DialogButton.tsx +++ b/apps/web/src/components/DialogButton.tsx @@ -18,7 +18,7 @@ const InfoTableSchema = z.object({ Date: z.string().refine((value) => { const currentDate = new Date().toISOString().split('T')[0] return value >= currentDate - }, 'Must be today or a future Date'), + }, 'Must be today or a future Date'), Hour: z.string(), Client: z .string() @@ -92,7 +92,7 @@ export default function DialogButton({ }) }, }) - reset() + reset() } const handleEdit = ({ @@ -103,35 +103,33 @@ export default function DialogButton({ Service, }: InfoTableSchemaData) => { closeModal(), - edit({ - variables: { - appointmentId: Id, - date: Date, - hour: Hour, - clientName: Client, - graphicLocation: Graphic, - service: Service, - }, - - updater: updaterEdit, + edit({ + variables: { + appointmentId: Id, + date: Date, + hour: Hour, + clientName: Client, + graphicLocation: Graphic, + service: Service, + }, - onError(error) { - toast({ - title: 'Something went wrong', - description: error.message, - }) - }, - }) + updater: updaterEdit, + + onError(error) { + toast({ + title: 'Something went wrong', + description: error.message, + }) + }, + }) } const [isOpenModal, setIsOpenModal] = useState(false) - const closeModal = () => { setIsOpenModal(false) } - return ( @@ -266,11 +264,9 @@ export default function DialogButton({ )}
- +
) diff --git a/apps/web/src/components/Toast.tsx b/apps/web/src/components/Toast.tsx index 1e4a0d4..11e8448 100644 --- a/apps/web/src/components/Toast.tsx +++ b/apps/web/src/components/Toast.tsx @@ -3,13 +3,15 @@ import * as ToastPrimitives from '@radix-ui/react-toast' import { cva, type VariantProps } from 'class-variance-authority' import { cn } from '../lib/utils' - import { X } from 'lucide-react' +import { X } from 'lucide-react' const ToastProvider = ToastPrimitives.Provider const ToastViewport = React.forwardRef< React.ElementRef, - React.ComponentPropsWithoutRef + { + className?: string + } & React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( , - React.ComponentPropsWithoutRef & + { + className?: string + } & React.ComponentPropsWithoutRef & VariantProps >(({ className, variant, ...props }, ref) => { return ( @@ -55,7 +59,9 @@ Toast.displayName = ToastPrimitives.Root.displayName const ToastAction = React.forwardRef< React.ElementRef, - React.ComponentPropsWithoutRef + { + className?: string + } & React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( , - React.ComponentPropsWithoutRef + { + className?: string + } & React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( , - React.ComponentPropsWithoutRef + { + className?: string + } & React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( , - React.ComponentPropsWithoutRef + { + className?: string + } & React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( { - const environment = useRelayEnvironment(); + const environment = useRelayEnvironment() return ( {children} - ); -}; + ) +} -export default Providers; \ No newline at end of file +export default Providers diff --git a/apps/web/src/components/providers/RelayProvider.tsx b/apps/web/src/components/providers/RelayProvider.tsx index 7e61d23..79ee93c 100644 --- a/apps/web/src/components/providers/RelayProvider.tsx +++ b/apps/web/src/components/providers/RelayProvider.tsx @@ -1,6 +1,6 @@ -import { RelayEnvironmentProvider } from 'react-relay'; -import type { FetchFunction } from 'relay-runtime'; -import { Environment, Network, RecordSource, Store } from 'relay-runtime'; +import { RelayEnvironmentProvider } from 'react-relay' +import type { FetchFunction } from 'relay-runtime' +import { Environment, Network, RecordSource, Store } from 'relay-runtime' /** * @@ -22,22 +22,26 @@ const fetchQuery: FetchFunction = async ( query: operation.text, variables, }), - }); + }) - return await response.json(); -}; + return await response.json() +} /** * Create a network layer from the fetch function */ -const network = Network.create(fetchQuery); -const store = new Store(new RecordSource()); +const network = Network.create(fetchQuery) +const store = new Store(new RecordSource()) const environment = new Environment({ network, store, -}); +}) export const RelayProvider = ({ children }: { children: React.ReactNode }) => { - return {children}; -}; \ No newline at end of file + return ( + + {children} + + ) +} diff --git a/apps/web/src/context/AuthContext.tsx b/apps/web/src/context/AuthContext.tsx index e895fbe..e67ac38 100644 --- a/apps/web/src/context/AuthContext.tsx +++ b/apps/web/src/context/AuthContext.tsx @@ -1,33 +1,34 @@ -import { Maybe } from '@/interfaces/Maybe'; -import { destroyCookie, setCookie } from 'nookies'; +import { Maybe } from '@/interfaces/Maybe' +import { destroyCookie, setCookie } from 'nookies' import { getAuthToken } from '@/utils/getToken' -import React, { useState, useMemo, useCallback } from 'react'; +import React, { useState, useMemo, useCallback } from 'react' interface AuthContextValue { - token: Maybe; - signIn: (token: Maybe) => void; - signout: () => void; + token: Maybe + signIn: (token: Maybe) => void + signout: () => void } const AUTH_COOKIE = 'graphic-token' -export const AuthContext = React.createContext({} as AuthContextValue); - +export const AuthContext = React.createContext({} as AuthContextValue) export const AuthProvider = ({ children }: { children: React.ReactNode }) => { - const [userToken, setUserToken] = useState(() => getAuthToken()); + const [userToken, setUserToken] = useState(() => + getAuthToken(), + ) const signIn = useCallback((token) => { setCookie(undefined, AUTH_COOKIE, token, { maxAge: 3600 * 24 * 7, path: '/', }) - setUserToken(token); - }, []); + setUserToken(token) + }, []) const signout = useCallback(() => { - setUserToken(null); + setUserToken(null) destroyCookie(undefined, AUTH_COOKIE) - }, []); + }, []) const value = useMemo( () => ({ @@ -36,7 +37,7 @@ export const AuthProvider = ({ children }: { children: React.ReactNode }) => { signout, }), [userToken, signIn, signout], - ); + ) - return {children}; -}; \ No newline at end of file + return {children} +} diff --git a/apps/web/src/pages/_app.tsx b/apps/web/src/pages/_app.tsx index 0ac7a7f..4e91ca0 100644 --- a/apps/web/src/pages/_app.tsx +++ b/apps/web/src/pages/_app.tsx @@ -1,5 +1,5 @@ import '@/styles/globals.css' -import '@radix-ui/themes/styles.css'; +import '@radix-ui/themes/styles.css' import type { AppProps } from 'next/app' import { Suspense } from 'react' import { ReactRelayContainer } from '../relay/ReactRelayContainer' diff --git a/apps/web/src/pages/auth/signin.tsx b/apps/web/src/pages/auth/signin.tsx index 74a6d65..015c96c 100644 --- a/apps/web/src/pages/auth/signin.tsx +++ b/apps/web/src/pages/auth/signin.tsx @@ -1,6 +1,6 @@ import { z } from 'zod' import { useForm } from 'react-hook-form' -import React, { useContext } from 'react' +import { useContext } from 'react' import { zodResolver } from '@hookform/resolvers/zod' import { useMutation } from 'react-relay' diff --git a/apps/web/src/pages/auth/signup.tsx b/apps/web/src/pages/auth/signup.tsx index f562502..6120c77 100644 --- a/apps/web/src/pages/auth/signup.tsx +++ b/apps/web/src/pages/auth/signup.tsx @@ -1,7 +1,7 @@ import { useForm } from 'react-hook-form' import { zodResolver } from '@hookform/resolvers/zod' import { z } from 'zod' -import React, { useContext } from 'react' +import { useContext } from 'react' import { useMutation } from 'react-relay' import { useRouter } from 'next/router' diff --git a/apps/web/src/pages/index.tsx b/apps/web/src/pages/index.tsx index 342fc87..bc9f386 100644 --- a/apps/web/src/pages/index.tsx +++ b/apps/web/src/pages/index.tsx @@ -1,5 +1,5 @@ import DialogButton from '../components/DialogButton' -import React, { ChangeEvent, useState } from 'react' +import { ChangeEvent, useState } from 'react' import { PreloadedQuery, graphql, usePreloadedQuery } from 'react-relay' import { GetServerSideProps } from 'next' import { getPreloadedQuery } from '../relay/network' @@ -35,7 +35,6 @@ export default function Home({ queryRefs }: HomeProps) {
-
diff --git a/apps/web/src/relay/ReactRelayContainer.tsx b/apps/web/src/relay/ReactRelayContainer.tsx index c95ea63..0be172e 100644 --- a/apps/web/src/relay/ReactRelayContainer.tsx +++ b/apps/web/src/relay/ReactRelayContainer.tsx @@ -1,49 +1,57 @@ -import type { NextComponentType, NextPage, NextPageContext } from 'next'; -import React, { Suspense, useMemo } from 'react'; -import { ReactRelayContext, useRelayEnvironment } from 'react-relay'; +import type { NextComponentType, NextPage, NextPageContext } from 'next' +import React, { Suspense, useMemo } from 'react' +import { ReactRelayContext, useRelayEnvironment } from 'react-relay' -import Providers from '../components/providers/Providers'; -import { createEnvironment } from './RelayEnvironment'; +import Providers from '../components/providers/Providers' +import { createEnvironment } from './RelayEnvironment' type NextPageWithLayout = NextPage & { - getLayout?: (page: React.ReactElement) => React.ReactNode; -}; + getLayout?: (page: React.ReactElement) => React.ReactNode +} export function ReactRelayContainer({ Component, props, }: { - Component: NextComponentType; - props: any; + Component: NextComponentType + props: any }) { - const environment = useMemo(() => createEnvironment(), []); + const environment = useMemo(() => createEnvironment(), []) return ( - ); + ) } -function Hydrate({ Component, props }: { Component: NextPageWithLayout; props: any }) { - const environment = useRelayEnvironment(); +function Hydrate({ + Component, + props, +}: { + Component: NextPageWithLayout + props: any +}) { + const environment = useRelayEnvironment() - const getLayout = Component.getLayout ?? ((page) => page); + const getLayout = Component.getLayout ?? ((page) => page) const transformedProps = useMemo(() => { if (props == null) { - return props; + return props } // eslint-disable-next-line react/prop-types - const { preloadedQueries, ...otherProps } = props; + const { preloadedQueries, ...otherProps } = props if (preloadedQueries == null) { - return props; + return props } - const queryRefs: any = {}; - for (const [queryName, { params, variables, response }] of Object.entries(preloadedQueries) as any) { - environment.getNetwork().responseCache.set(params.id, variables, response); + const queryRefs: any = {} + for (const [queryName, { params, variables, response }] of Object.entries( + preloadedQueries, + ) as any) { + environment.getNetwork().responseCache.set(params.id, variables, response) // TODO: create using a function exported from react-relay package queryRefs[queryName] = { environment, @@ -53,11 +61,11 @@ function Hydrate({ Component, props }: { Component: NextPageWithLayout; pr name: params.name, kind: 'PreloadedQuery', variables, - }; + } } - return { ...otherProps, queryRefs }; - }, [props]); + return { ...otherProps, queryRefs } + }, [props]) - return {getLayout()}; -} \ No newline at end of file + return {getLayout()} +} diff --git a/apps/web/src/relay/RelayEnvironment.tsx b/apps/web/src/relay/RelayEnvironment.tsx index d43c7b4..ee29084 100644 --- a/apps/web/src/relay/RelayEnvironment.tsx +++ b/apps/web/src/relay/RelayEnvironment.tsx @@ -1,25 +1,25 @@ -import { Environment, RecordSource, Store } from 'relay-runtime'; +import { Environment, RecordSource, Store } from 'relay-runtime' -import { createNetwork } from './network'; +import { createNetwork } from './network' -const IS_SERVER = typeof window === typeof undefined; -const CLIENT_DEBUG = true; -const SERVER_DEBUG = false; +const IS_SERVER = typeof window === typeof undefined +const CLIENT_DEBUG = true +const SERVER_DEBUG = false export function createEnvironment() { - const network = createNetwork(); + const network = createNetwork() const environment = new Environment({ network, store: new Store(new RecordSource(), {}), isServer: IS_SERVER, log(event) { if ((IS_SERVER && SERVER_DEBUG) || (!IS_SERVER && CLIENT_DEBUG)) { - console.debug('[relay environment event]', event); + console.debug('[relay environment event]', event) } }, - }); + }) - environment.getNetwork().responseCache = network.responseCache; + environment.getNetwork().responseCache = network.responseCache - return environment; -} \ No newline at end of file + return environment +} diff --git a/apps/web/src/relay/environment.tsx b/apps/web/src/relay/environment.tsx index 2d82f87..92f91b6 100644 --- a/apps/web/src/relay/environment.tsx +++ b/apps/web/src/relay/environment.tsx @@ -1,6 +1,5 @@ -import type { FetchFunction } from 'relay-runtime'; -import { Environment, Network, RecordSource, Store } from 'relay-runtime'; - +import type { FetchFunction } from 'relay-runtime' +import { Environment, Network, RecordSource, Store } from 'relay-runtime' /** * @@ -24,18 +23,18 @@ const fetchQuery: FetchFunction = async ( query: operation.text, variables, }), - }); + }) - return await response.json(); -}; + return await response.json() +} /** * Create a network layer from the fetch function */ -const network = Network.create(fetchQuery); -const store = new Store(new RecordSource()); +const network = Network.create(fetchQuery) +const store = new Store(new RecordSource()) export const environment = new Environment({ network, store, -}); \ No newline at end of file +}) diff --git a/apps/web/src/relay/network.ts b/apps/web/src/relay/network.ts index d28c651..dd25bc0 100644 --- a/apps/web/src/relay/network.ts +++ b/apps/web/src/relay/network.ts @@ -1,8 +1,12 @@ -import type { CacheConfig, ConcreteRequest, RequestParameters, Variables } from 'relay-runtime'; -import { Network, QueryResponseCache } from 'relay-runtime'; +import type { + CacheConfig, + ConcreteRequest, + RequestParameters, + Variables, +} from 'relay-runtime' +import { Network, QueryResponseCache } from 'relay-runtime' - -const ONE_MINUTE_IN_MS = 60 * 1000; +const ONE_MINUTE_IN_MS = 60 * 1000 const GRAPHQL_ENPOINT = process.env.NEXT_PUBLIC_GRAPHQL_ENDPOINT as string @@ -10,70 +14,85 @@ export function createNetwork() { const responseCache = new QueryResponseCache({ size: 100, ttl: ONE_MINUTE_IN_MS, - }); + }) - async function fetchResponse(operation: RequestParameters, variables: Variables, cacheConfig: CacheConfig) { - const { id } = operation; + async function fetchResponse( + operation: RequestParameters, + variables: Variables, + cacheConfig: CacheConfig, + ) { + const { id } = operation - const isQuery = operation.operationKind === 'query'; - const forceFetch = cacheConfig && cacheConfig.force; + const isQuery = operation.operationKind === 'query' + const forceFetch = cacheConfig && cacheConfig.force if (isQuery && !forceFetch) { - const fromCache = responseCache.get(id!, variables); + const fromCache = responseCache.get(id!, variables) if (fromCache != null) { - return Promise.resolve(fromCache); + return Promise.resolve(fromCache) } } - return networkFetch(operation, variables); + return networkFetch(operation, variables) } - const network = Network.create(fetchResponse); - network.responseCache = responseCache; - return network; + const network = Network.create(fetchResponse) + network.responseCache = responseCache + return network } /** * Relay requires developers to configure a "fetch" function that tells Relay how to load * the results of GraphQL queries from your server (or other data source). See more at * https://relay.dev/docs/en/quick-start-guide#relay-environment. */ -async function networkFetch(params: RequestParameters, variables: Variables) { +async function networkFetch( + params: RequestParameters, + variables: Variables, + headers?: HeadersInit, +) { // Fetch data from GitHub's GraphQL API: const response = await fetch(GRAPHQL_ENPOINT, { method: 'POST', credentials: 'include', headers: { + ...headers, 'Content-Type': 'application/json', }, body: JSON.stringify({ query: params.text, variables, }), - }); + }) // Get the response as JSON - const json = await response.json(); + const json = await response.json() // GraphQL returns exceptions (for example, a missing required variable) in the "errors" // property of the response. If any exceptions occurred when processing the request, // throw an error to indicate to the developer what went wrong. if (Array.isArray(json.errors)) { - console.log(json.errors); + console.log(json.errors) throw new Error( - `Error fetching GraphQL query '${params.name}' with variables '${JSON.stringify(variables)}': ${JSON.stringify( + `Error fetching GraphQL query '${ + params.name + }' with variables '${JSON.stringify(variables)}': ${JSON.stringify( json.errors, )}`, - ); + ) } // Otherwise, return the full payload. - return json; + return json } -export async function getPreloadedQuery({ params }: ConcreteRequest, variables: Variables) { - const response = await networkFetch(params, variables); +export async function getPreloadedQuery( + { params }: ConcreteRequest, + variables: Variables, + headers: HeadersInit, +) { + const response = await networkFetch(params, variables, headers) return { params, variables, response, - }; -} \ No newline at end of file + } +} diff --git a/apps/web/src/utils/getToken.ts b/apps/web/src/utils/getToken.ts index e007597..9119650 100644 --- a/apps/web/src/utils/getToken.ts +++ b/apps/web/src/utils/getToken.ts @@ -1,14 +1,14 @@ -import { Maybe } from "@/interfaces/Maybe" -import { IncomingHttpHeaders } from "http" -import { parseCookies } from "nookies" +import { Maybe } from '@/interfaces/Maybe' +import { IncomingHttpHeaders } from 'http' +import { parseCookies } from 'nookies' const getAuthToken = (): Maybe => { - const { AUTH_COOKIE: token } = parseCookies() - return token + const { AUTH_COOKIE: token } = parseCookies() + return token } const getCookie = (headers: IncomingHttpHeaders): Maybe => { - return headers.cookie ? { Cookie: headers.cookie } : null; - }; + return headers.cookie ? { Cookie: headers.cookie } : null +} -export { getAuthToken, getCookie } \ No newline at end of file +export { getAuthToken, getCookie }