From 111acea22fd2df15e43e9d34775ccf00b1a77cfd Mon Sep 17 00:00:00 2001 From: Jesse Brault Date: Thu, 8 Aug 2024 10:46:49 -0500 Subject: [PATCH] Ran prettier on all src files now that printWidth is 120. --- src/api/getImage.ts | 6 +- src/api/getRecipe.ts | 25 +--- src/api/getRecipeInfos.ts | 17 +-- src/api/login.ts | 39 ++---- src/api/refresh.ts | 19 +-- src/components/recipe-card/RecipeCard.tsx | 7 +- .../RecipeVisibilityIcon.tsx | 12 +- src/routes/login.tsx | 30 ++-- src/routes/recipes_/$username.$slug.tsx | 6 +- src/stories/Button.tsx | 76 +++++----- src/stories/Configure.mdx | 67 ++++----- src/stories/Header.stories.ts | 52 +++---- src/stories/Header.tsx | 90 ++++++------ src/stories/Page.stories.ts | 46 +++--- src/stories/Page.tsx | 131 +++++++++--------- src/stories/button.css | 36 ++--- src/stories/header.css | 36 ++--- src/stories/page.css | 80 +++++------ 18 files changed, 349 insertions(+), 426 deletions(-) diff --git a/src/api/getImage.ts b/src/api/getImage.ts index 56e9ccd..1417f50 100644 --- a/src/api/getImage.ts +++ b/src/api/getImage.ts @@ -7,11 +7,7 @@ export interface GetImageDeps { url: string } -const getImage = async ({ - accessToken, - signal, - url -}: GetImageDeps): Promise => { +const getImage = async ({ accessToken, signal, url }: GetImageDeps): Promise => { const headers = new Headers() if (accessToken !== null) { headers.set('Authorization', `Bearer ${accessToken}`) diff --git a/src/api/getRecipe.ts b/src/api/getRecipe.ts index 6dd82db..7d5eb95 100644 --- a/src/api/getRecipe.ts +++ b/src/api/getRecipe.ts @@ -2,10 +2,7 @@ import { notFound } from '@tanstack/react-router' import { AuthContextType } from '../auth' import { ApiError } from './ApiError' import ExpiredTokenError from './ExpiredTokenError' -import FullRecipeView, { - RawFullRecipeView, - toFullRecipeView -} from './types/FullRecipeView' +import FullRecipeView, { RawFullRecipeView, toFullRecipeView } from './types/FullRecipeView' export interface GetRecipeDeps { authContext: AuthContextType @@ -14,24 +11,16 @@ export interface GetRecipeDeps { abortSignal: AbortSignal } -const getRecipe = async ({ - authContext, - username, - slug, - abortSignal -}: GetRecipeDeps): Promise => { +const getRecipe = async ({ authContext, username, slug, abortSignal }: GetRecipeDeps): Promise => { const headers = new Headers() if (authContext.token !== null) { headers.set('Authorization', `Bearer ${authContext.token}`) } - const response = await fetch( - import.meta.env.VITE_MME_API_URL + `/recipes/${username}/${slug}`, - { - signal: abortSignal, - headers, - mode: 'cors' - } - ) + const response = await fetch(import.meta.env.VITE_MME_API_URL + `/recipes/${username}/${slug}`, { + signal: abortSignal, + headers, + mode: 'cors' + }) if (response.ok) { return toFullRecipeView((await response.json()) as RawFullRecipeView) } else if (response.status === 401) { diff --git a/src/api/getRecipeInfos.ts b/src/api/getRecipeInfos.ts index f1dfbd1..72ded0f 100644 --- a/src/api/getRecipeInfos.ts +++ b/src/api/getRecipeInfos.ts @@ -20,18 +20,13 @@ const getRecipeInfos = async ({ if (token !== null) { headers.set('Authorization', `Bearer ${token}`) } - const response = await fetch( - import.meta.env.VITE_MME_API_URL + - `/recipes?page=${pageNumber}&size=${pageSize}`, - { - signal: abortSignal, - headers, - mode: 'cors' - } - ) + const response = await fetch(import.meta.env.VITE_MME_API_URL + `/recipes?page=${pageNumber}&size=${pageSize}`, { + signal: abortSignal, + headers, + mode: 'cors' + }) if (response.ok) { - const { pageNumber, pageSize, content } = - (await response.json()) as RawRecipeInfosView + const { pageNumber, pageSize, content } = (await response.json()) as RawRecipeInfosView return { pageNumber, pageSize, diff --git a/src/api/login.ts b/src/api/login.ts index 378f8f2..b66619b 100644 --- a/src/api/login.ts +++ b/src/api/login.ts @@ -1,28 +1,18 @@ import { LoginResult, RawLoginView } from './types/LoginView' -const login = async ( - username: string, - password: string -): Promise => { +const login = async (username: string, password: string): Promise => { try { - const response = await fetch( - import.meta.env.VITE_MME_API_URL + '/auth/login', - { - body: JSON.stringify({ username, password }), - credentials: 'include', - headers: { - 'Content-type': 'application/json' - }, - method: 'POST', - mode: 'cors' - } - ) + const response = await fetch(import.meta.env.VITE_MME_API_URL + '/auth/login', { + body: JSON.stringify({ username, password }), + credentials: 'include', + headers: { + 'Content-type': 'application/json' + }, + method: 'POST', + mode: 'cors' + }) if (response.ok) { - const { - username, - accessToken, - expires: rawExpires - } = (await response.json()) as RawLoginView + const { username, accessToken, expires: rawExpires } = (await response.json()) as RawLoginView return { _tag: 'success', loginView: { @@ -36,13 +26,10 @@ const login = async ( if (response.status === 401) { error = 'Invalid username or password.' } else if (response.status === 500) { - error = - 'There was an internal server error. Please try again later.' + error = 'There was an internal server error. Please try again later.' } else { error = 'Unknown error.' - console.error( - `Unknown error: ${response.status} ${response.statusText}` - ) + console.error(`Unknown error: ${response.status} ${response.statusText}`) } return { _tag: 'failure', diff --git a/src/api/refresh.ts b/src/api/refresh.ts index 9787f8e..10c2dcb 100644 --- a/src/api/refresh.ts +++ b/src/api/refresh.ts @@ -11,14 +11,11 @@ export class ExpiredRefreshTokenError extends ApiError { const refresh = async (): Promise => { let response: Response try { - response = await fetch( - import.meta.env.VITE_MME_API_URL + '/auth/refresh', - { - credentials: 'include', - method: 'POST', - mode: 'cors' - } - ) + response = await fetch(import.meta.env.VITE_MME_API_URL + '/auth/refresh', { + credentials: 'include', + method: 'POST', + mode: 'cors' + }) } catch (fetchError) { if (fetchError instanceof TypeError) { throw fetchError // rethrow network issues @@ -27,11 +24,7 @@ const refresh = async (): Promise => { } } if (response.ok) { - const { - username, - accessToken, - expires: rawExpires - } = (await response.json()) as RawLoginView + const { username, accessToken, expires: rawExpires } = (await response.json()) as RawLoginView return { username, accessToken, diff --git a/src/components/recipe-card/RecipeCard.tsx b/src/components/recipe-card/RecipeCard.tsx index 6267220..9f51b8d 100644 --- a/src/components/recipe-card/RecipeCard.tsx +++ b/src/components/recipe-card/RecipeCard.tsx @@ -32,12 +32,7 @@ const RecipeCard = ({ slug }} > - {mainImageAlt} + {mainImageAlt}
diff --git a/src/components/recipe-visibility-icon/RecipeVisibilityIcon.tsx b/src/components/recipe-visibility-icon/RecipeVisibilityIcon.tsx index 10852a5..e114c4d 100644 --- a/src/components/recipe-visibility-icon/RecipeVisibilityIcon.tsx +++ b/src/components/recipe-visibility-icon/RecipeVisibilityIcon.tsx @@ -7,17 +7,9 @@ export interface RecipeVisibilityIconProps { const RecipeVisibilityIcon = ({ isPublic }: RecipeVisibilityIconProps) => isPublic ? ( - + ) : ( - + ) export default RecipeVisibilityIcon diff --git a/src/routes/login.tsx b/src/routes/login.tsx index 5dee68d..c0ebf0a 100644 --- a/src/routes/login.tsx +++ b/src/routes/login.tsx @@ -1,10 +1,4 @@ -import { - createFileRoute, - redirect, - useNavigate, - useRouter, - useSearch -} from '@tanstack/react-router' +import { createFileRoute, redirect, useNavigate, useRouter, useSearch } from '@tanstack/react-router' import { FormEvent, useState } from 'react' import { z } from 'zod' import login from '../api/login' @@ -25,17 +19,13 @@ const Login = () => { const password = (formData.get('password') as string | null) ?? '' const loginResult = await login(username, password) if (loginResult._tag === 'success') { - auth.putToken( - loginResult.loginView.accessToken, - loginResult.loginView.username, - async () => { - await router.invalidate() - await navigate({ - to: redirect ?? '/recipes', - search: {} - }) - } - ) + auth.putToken(loginResult.loginView.accessToken, loginResult.loginView.username, async () => { + await router.invalidate() + await navigate({ + to: redirect ?? '/recipes', + search: {} + }) + }) } else { setError(loginResult.error) } @@ -44,9 +34,7 @@ const Login = () => { return (

Login Page

- {expired ? ( -

Your session has expired. Please login again.

- ) : null} + {expired ?

Your session has expired. Please login again.

: null}
diff --git a/src/routes/recipes_/$username.$slug.tsx b/src/routes/recipes_/$username.$slug.tsx index 0a59ef2..1908d2e 100644 --- a/src/routes/recipes_/$username.$slug.tsx +++ b/src/routes/recipes_/$username.$slug.tsx @@ -38,11 +38,7 @@ export const Route = createFileRoute('/recipes/$username/$slug')({ } = useQuery( { enabled: recipe !== undefined, - queryKey: [ - 'images', - recipe?.mainImage.owner.username, - recipe?.mainImage.filename - ], + queryKey: ['images', recipe?.mainImage.owner.username, recipe?.mainImage.filename], queryFn: ({ signal }) => getImage({ accessToken: authContext.token, diff --git a/src/stories/Button.tsx b/src/stories/Button.tsx index c33be6e..e58fcec 100644 --- a/src/stories/Button.tsx +++ b/src/stories/Button.tsx @@ -1,48 +1,42 @@ -import React from 'react'; -import './button.css'; +import React from 'react' +import './button.css' interface ButtonProps { - /** - * Is this the principal call to action on the page? - */ - primary?: boolean; - /** - * What background color to use - */ - backgroundColor?: string; - /** - * How large should the button be? - */ - size?: 'small' | 'medium' | 'large'; - /** - * Button contents - */ - label: string; - /** - * Optional click handler - */ - onClick?: () => void; + /** + * Is this the principal call to action on the page? + */ + primary?: boolean + /** + * What background color to use + */ + backgroundColor?: string + /** + * How large should the button be? + */ + size?: 'small' | 'medium' | 'large' + /** + * Button contents + */ + label: string + /** + * Optional click handler + */ + onClick?: () => void } /** * Primary UI component for user interaction */ -export const Button = ({ - primary = false, - size = 'medium', - backgroundColor, - label, - ...props -}: ButtonProps) => { - const mode = primary ? 'storybook-button--primary' : 'storybook-button--secondary'; - return ( - - ); -}; +export const Button = ({ primary = false, size = 'medium', backgroundColor, label, ...props }: ButtonProps) => { + const mode = primary ? 'storybook-button--primary' : 'storybook-button--secondary' + return ( + + ) +} diff --git a/src/stories/Configure.mdx b/src/stories/Configure.mdx index 5157090..3aa635c 100644 --- a/src/stories/Configure.mdx +++ b/src/stories/Configure.mdx @@ -1,35 +1,37 @@ -import { Meta } from "@storybook/blocks"; +import { Meta } from '@storybook/blocks' -import Github from "./assets/github.svg"; -import Discord from "./assets/discord.svg"; -import Youtube from "./assets/youtube.svg"; -import Tutorials from "./assets/tutorials.svg"; -import Styling from "./assets/styling.png"; -import Context from "./assets/context.png"; -import Assets from "./assets/assets.png"; -import Docs from "./assets/docs.png"; -import Share from "./assets/share.png"; -import FigmaPlugin from "./assets/figma-plugin.png"; -import Testing from "./assets/testing.png"; -import Accessibility from "./assets/accessibility.png"; -import Theming from "./assets/theming.png"; -import AddonLibrary from "./assets/addon-library.png"; +import Github from './assets/github.svg' +import Discord from './assets/discord.svg' +import Youtube from './assets/youtube.svg' +import Tutorials from './assets/tutorials.svg' +import Styling from './assets/styling.png' +import Context from './assets/context.png' +import Assets from './assets/assets.png' +import Docs from './assets/docs.png' +import Share from './assets/share.png' +import FigmaPlugin from './assets/figma-plugin.png' +import Testing from './assets/testing.png' +import Accessibility from './assets/accessibility.png' +import Theming from './assets/theming.png' +import AddonLibrary from './assets/addon-library.png' -export const RightArrow = () => - - +export const RightArrow = () => ( + + + +) @@ -38,6 +40,7 @@ export const RightArrow = () =>
@@ -84,6 +87,7 @@ export const RightArrow = () =>
@@ -203,10 +207,11 @@ export const RightArrow = () => Discover tutorials
+