Data files refactoring

KiraLT · Oct 31, 2023 · fd56b53 · fd56b53
1 parent e04cb34
commit fd56b53
Show file tree

Hide file tree

Showing 11 changed files with 80 additions and 195 deletions.
diff --git a/src/app/list/content.tsx b/src/app/list/content.tsx
@@ -4,10 +4,11 @@ import { Recipes } from '@/components/recipes'
 import { useRouter, useSearchParams } from 'next/navigation'
 import {
     getListFromUrlQuery,
+    getListRecipes,
     getListUrl,
     replaceList,
 } from '@/controllers/lists'
-import { getRecipesWithMetaByIds } from '@/controllers/recipes'
+import { getAllRecipes } from '@/controllers/recipes'
 import { Share } from '@/components/share'
 import { Alert, Modal, Button } from 'react-daisyui'
 import { EditList } from '@/app/list/edit-list'
@@ -25,8 +26,8 @@ export default function Content(): JSX.Element {
     }, [searchParams])
 
     const recipes = useMemo(() => {
-        return getRecipesWithMetaByIds(list.recipes)
-    }, [list.recipes])
+        return getListRecipes(list)
+    }, [list])
 
     return (
         <>

diff --git a/src/app/list/edit-list.tsx b/src/app/list/edit-list.tsx
@@ -1,8 +1,7 @@
-import { List } from '@/controllers/lists'
+import { List, getListRecipes } from '@/controllers/lists'
 import {
-    RecipeWithMeta,
-    getAllRecipesWithMeta,
-    getRecipesWithMetaByIds,
+    Recipe,
+    getAllRecipes,
 } from '@/controllers/recipes'
 import Fuse from 'fuse.js'
 import { useState, useMemo } from 'react'
@@ -20,12 +19,12 @@ export function EditList({
     const [list, setList] = useState(originalList)
     const [addMode, setAddMode] = useState(false)
 
-    const allRecipes = useMemo(() => getAllRecipesWithMeta(), [])
+    const allRecipes = useMemo(() => getAllRecipes(), [])
     const listRecipes = useMemo(() => {
-        return getRecipesWithMetaByIds(list.recipes)
-    }, [list.recipes])
+        return getListRecipes(list)
+    }, [list])
     const nonListRecipes = useMemo(() => {
-        return allRecipes.filter((v) => !list.recipes.includes(v.meta.id))
+        return allRecipes.filter((v) => !list.recipes.includes(v.slug))
     }, [allRecipes, list.recipes])
 
     return (
@@ -77,10 +76,10 @@ export function EditList({
                                 recipes: list.recipes.filter((v) => v !== id),
                             })
                         }}
-                        onReorder={(ids) => {
+                        onReorder={(recipes) => {
                             setList({
                                 ...list,
-                                recipes: ids,
+                                recipes,
                             })
                         }}
                     />
@@ -104,8 +103,8 @@ function AddView({
     recipes,
     onAdd,
 }: {
-    recipes: RecipeWithMeta[]
-    onAdd(id: number): void
+    recipes: Recipe[]
+    onAdd(slug: string): void
 }): JSX.Element {
     const [query, setQuery] = useState('')
 
@@ -134,9 +133,9 @@ function AddView({
                 <ul className="text-sm font-medium divide-y border-primary-content">
                     {result.map((v) => (
                         <li
-                            key={v.meta.id}
+                            key={v.slug}
                             className="w-full px-2 py-4"
-                            onClick={() => onAdd(v.meta.id)}
+                            onClick={() => onAdd(v.slug)}
                             style={{ cursor: 'pointer' }}
                         >
                             {v.data.name}
@@ -156,9 +155,9 @@ function EditView({
     onRemove,
     onReorder,
 }: {
-    recipes: RecipeWithMeta[]
-    onReorder(recipes: number[]): void
-    onRemove(id: number): void
+    recipes: Recipe[]
+    onReorder(recipes: string[]): void
+    onRemove(slug: string): void
 }): JSX.Element {
     return (
         <>
@@ -167,7 +166,7 @@ function EditView({
                     <ReactSortable
                         tag="li"
                         list={recipes.map((v) => ({
-                            id: v.meta.id,
+                            id: v.slug,
                         }))}
                         setList={(state) => {
                             onReorder(state.map((v) => v.id))
@@ -176,7 +175,7 @@ function EditView({
                     >
                         {recipes.map((v) => (
                             <div
-                                key={v.meta.id}
+                                key={v.slug}
                                 className="flex justify-between items-center my-2"
                             >
                                 <div className="handle cursor-move mx-4 text-lg">
@@ -188,7 +187,7 @@ function EditView({
                                         color="error"
                                         variant="outline"
                                         onClick={() => {
-                                            onRemove(v.meta.id)
+                                            onRemove(v.slug)
                                         }}
                                     >
                                         Delete

diff --git a/src/app/lists/content.tsx b/src/app/lists/content.tsx
@@ -22,7 +22,7 @@ export default function Content(): JSX.Element {
                     <li className="flex justify-between items-center my-2 border-primary-content">
                         <div>
                             <Link href={getListUrl(v)}>
-                                <span className="text-truncate">{v.name}</span>{' '}
+                                <span className="text-truncate">{v.name || 'Unnamed list'}</span>{' '}
                             </Link>
                             <small className="text-muted">
                                 ({v.recipes.length} recipes)

diff --git a/src/app/page.tsx b/src/app/page.tsx
@@ -2,7 +2,7 @@ import type { Metadata } from 'next/types'
 import { useMemo } from 'react'
 
 import { Recipes } from '../components/recipes'
-import { getAllRecipesWithMeta } from '../controllers/recipes'
+import { getAllRecipes } from '../controllers/recipes'
 
 export const metadata: Metadata = {
     title: 'Signature Cocktails',
@@ -11,7 +11,7 @@ export const metadata: Metadata = {
 }
 
 export default function Page(): JSX.Element {
-    const recipes = useMemo(() => getAllRecipesWithMeta(), [])
+    const recipes = useMemo(() => getAllRecipes(), [])
 
     return (
         <>

diff --git a/src/app/recipes/[slug]/page.tsx b/src/app/recipes/[slug]/page.tsx
@@ -4,7 +4,7 @@ import { useMemo } from 'react'
 import {
     Recipe,
     formatQuantity,
-    getAllRecipeSlugs,
+    getAllRecipes,
     getRecipeBySlug,
 } from '@/controllers/recipes'
 import { Metadata } from 'next/types'
@@ -18,7 +18,7 @@ export interface Props {
 }
 
 export async function generateStaticParams(): Promise<Props['params'][]> {
-    return getAllRecipeSlugs().map((slug) => ({ slug }))
+    return getAllRecipes().map((recipe) => ({ slug: recipe.slug }))
 }
 
 export async function generateMetadata({

diff --git a/src/app/search/content.tsx b/src/app/search/content.tsx
@@ -1,13 +1,13 @@
 'use client'
 import { Recipes } from '@/components/recipes'
-import { getAllRecipesWithMeta } from '@/controllers/recipes'
+import { getAllRecipes } from '@/controllers/recipes'
 import Fuse from 'fuse.js'
 import { useMemo } from 'react'
 import { useSearchParams } from 'next/navigation'
 
 export default function Content(): JSX.Element {
     const searchParams = useSearchParams()
-    const recipes = useMemo(() => getAllRecipesWithMeta(), [])
+    const recipes = useMemo(() => getAllRecipes(), [])
     const fuse = useMemo(() => {
         return new Fuse(recipes, {
             keys: ['data.name'],

diff --git a/src/components/recipes.tsx b/src/components/recipes.tsx
@@ -1,11 +1,11 @@
-import { RecipeWithMeta } from '@/controllers/recipes'
+import { Recipe } from '@/controllers/recipes'
 import Image from 'next-image-export-optimizer'
 import Link from 'next/link'
 
 export function Recipes({
     recipes,
 }: {
-    recipes: RecipeWithMeta[]
+    recipes: Recipe[]
 }): JSX.Element {
     return (
         <>
@@ -17,8 +17,8 @@ export function Recipes({
             <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
                 {recipes.map((recipe) => (
                     <Link
-                        key={recipe.meta.id}
-                        href={`/recipes/${recipe.meta.slug}`}
+                        key={recipe.slug}
+                        href={`/recipes/${recipe.slug}`}
                         className="bg-base-200 rounded-md"
                     >
                         <Image

diff --git a/src/controllers/lists/index.ts b/src/controllers/lists/index.ts
@@ -1,8 +1,10 @@
 import { deduplicateBy, deduplicate } from 'common-stuff'
+import { Recipe } from '../recipes'
+import { recipes } from '../recipes/data'
 
 export interface List {
     name: string
-    recipes: number[]
+    recipes: string[]
 }
 
 const localStorageKey = 'my-lists'
@@ -43,8 +45,6 @@ export function getListFromUrlQuery(
         typeof query.r === 'string'
             ? query.r
                   .split(' ')
-                  .map((v) => parseInt(v, 10))
-                  .filter((v) => !isNaN(v))
             : []
 
     return {
@@ -59,3 +59,7 @@ export function replaceList(oldList: List, newList: List): void {
         newList,
     ])
 }
+
+export function getListRecipes(list: List): Recipe[] {
+    return list.recipes.flatMap((recipeId) => recipes.filter((v) => v.slug === recipeId))
+}