v0.1

.prettierrc

@@ -1,4 +1,8 @@
 {
-  "tabWidth": 4,
-  "useTabs": false
+    "tabWidth": 4,
+    "useTabs": false,
+    "trailingComma": "es5",
+    "arrowParens": "always",
+    "semi": true,
+    "singleQuote": false
 }

.vscode/settings.json

@@ -0,0 +1,6 @@
+{
+	"editor.formatOnType": true,
+	"editor.formatOnPaste": true,
+	"editor.formatOnSave": true,
+	"editor.defaultFormatter": "esbenp.prettier-vscode"
+}

package.json

@@ -18,7 +18,9 @@
         "react-dom": "17.0.2",
         "react-firebase-hooks": "^3.0.4",
         "react-firebaseui": "^5.0.2",
-        "styled-components": "^5.3.3"
+        "react-query": "^3.29.1",
+        "styled-components": "^5.3.3",
+        "zustand": "^3.6.2"
     },
     "devDependencies": {
         "@types/node": "16.11.6",

src/components/Links.tsx

@@ -11,11 +11,13 @@ export const Links: FunctionComponent<Props> = ({ links }) => {
 
     return (
         <LinkList>
-            {links.map((l, i) => (
-                <li key={i}>
-                    <Link href={l}>{extractHostname(l)}</Link>
-                </li>
-            ))}
+            {links
+                .filter((x) => x)
+                .map((l, i) => (
+                    <li key={i}>
+                        <Link href={l}>{extractHostname(l)}</Link>
+                    </li>
+                ))}
         </LinkList>
     );
 };
@@ -29,6 +31,10 @@ const LinkList = styled.ul`
 `;
 
 const extractHostname = (url: string) => {
-    const u = new URL(url);
-    return `${u.hostname}`;
+    try {
+        const u = new URL(url);
+        return `${u.hostname}`;
+    } catch {
+        return undefined;
+    }
 };

src/components/Recipe.tsx

@@ -1,12 +1,13 @@
 import React, { FunctionComponent } from "react";
+import { useStore } from "store/useStore";
 import styled from "styled-components";
-import { Recipe as RecipeType } from "../models/recipie";
 import { weekdays } from "../models/weekdays";
 import { Links } from "./Links";
 import { TagList } from "./TagList";
+import ReloadIcon from "public/reload-svgrepo-com.svg";
+import Image from "next/image";
 
 type Props = {
-    recipe: RecipeType;
     weekday: typeof weekdays[number];
     backgroundColor: string;
     color: string;
@@ -21,17 +22,36 @@ const weekdayTranslations: { [weekday in typeof weekdays[number]]: string } = {
 };
 
 export const Recipe: FunctionComponent<Props> = ({
-    recipe,
     weekday,
     backgroundColor,
     color,
 }) => {
+    const { randomize, weekdays } = useStore();
+    const recipe = weekdays[weekday];
+
     return (
         <Container backgroundColor={backgroundColor} color={color}>
-            <DayOfTheWeek>{weekdayTranslations[weekday]}</DayOfTheWeek>
-            <Title>{recipe.title}</Title>
-            <Links links={recipe.recipe_links} />
-            <TagList tags={recipe.tags} />
+            {recipe && (
+                <>
+                    <DayOfTheWeekContainer>
+                        <DayOfTheWeek>
+                            {weekdayTranslations[weekday]}
+                        </DayOfTheWeek>
+                        <RandomizeButton onClick={() => randomize(weekday)}>
+                            <Image
+                                src={ReloadIcon}
+                                alt={"Reload"}
+                                width={30}
+                                height={30}
+                                objectFit={"fill"}
+                            />
+                        </RandomizeButton>
+                    </DayOfTheWeekContainer>
+                    <Title>{recipe.title}</Title>
+                    <Links links={recipe.recipe_links} />
+                    <TagList tags={recipe.tags} />
+                </>
+            )}
         </Container>
     );
 };
@@ -48,13 +68,20 @@ const Container = styled.div<{ backgroundColor: string; color: string }>`
     padding: 30px;
     color: ${({ color }) => color};
     background-color: ${({ backgroundColor }) => backgroundColor};
+    overflow: hidden;
+`;
+
+const DayOfTheWeekContainer = styled.div`
+    grid-area: dayOfTheWeek;
+    align-self: end;
+    display: grid;
+    grid-template-columns: max-content min-content;
+    justify-content: space-between;
 `;
 
 const DayOfTheWeek = styled.small`
     margin: 0;
     padding: 0;
-    grid-area: dayOfTheWeek;
-    align-self: end;
     font-weight: normal;
     font-size: 2vmax;
     text-transform: lowercase;
@@ -66,4 +93,22 @@ const Title = styled.h2`
     grid-area: title;
     font-size: 4vmax;
     font-weight: bold;
+    word-wrap: break-word;
+`;
+
+const RandomizeButton = styled.button`
+    width: 20px;
+    height: 20px;
+    padding: 0;
+    background: transparent;
+    border: 0;
+    transform: rotate(0deg);
+    transition: transform 400ms cubic-bezier(0.68, -0.55, 0.27, 1.55);
+    color: white;
+    img {
+        filter: drop-shadow(1px 1px 1px black);
+    }
+    &:hover {
+        transform: rotate(180deg);
+    }
 `;

src/components/RecipeList.tsx

@@ -1,35 +1,49 @@
 import * as React from "react";
-import { useEffect, useState } from "react";
-import styled, { css, DefaultTheme, useTheme } from "styled-components";
-import { getRecipies } from "firebase/__mocks__/clientApp";
-import { Recipe as RecipeType } from "models/recipie";
+import { useEffect } from "react";
+import styled, { DefaultTheme, useTheme } from "styled-components";
 import { weekdays } from "models/weekdays";
 import { Recipe } from "components/Recipe";
 import { Info } from "components/Info";
 import { mediaQueries } from "styles/theme";
+import { useStore } from "store/useStore";
 
 export const RecipeList: React.FunctionComponent = () => {
-    const [recipes, setRecipes] = useState<RecipeType[]>();
     const theme = useTheme();
+    const colors = colorMappings(theme);
+    const { initialize, weekdays, allRecipes } = useStore();
 
     useEffect(() => {
-        (async () => {
-            const data = await getRecipies({ count: 5 });
-            setRecipes(data);
-        })();
-    }, []);
-    const colors = colorMappings(theme);
+        initialize();
+    }, [initialize]);
+
     return (
         <List>
-            {recipes?.map((r, i) => (
-                <Recipe
-                    key={i}
-                    recipe={r}
-                    weekday={weekdays[i]}
-                    backgroundColor={colors[weekdays[i]].backgroundColor}
-                    color={colors[weekdays[i]].color}
-                />
-            ))}
+            <Recipe
+                weekday={"monday"}
+                backgroundColor={colors["monday"].backgroundColor}
+                color={colors["monday"].color}
+            />
+            <Recipe
+                weekday={"tuesday"}
+                backgroundColor={colors["tuesday"].backgroundColor}
+                color={colors["tuesday"].color}
+            />
+            <Recipe
+                weekday={"wednesday"}
+                backgroundColor={colors["wednesday"].backgroundColor}
+                color={colors["wednesday"].color}
+            />
+            <Recipe
+                weekday={"thursday"}
+                backgroundColor={colors["thursday"].backgroundColor}
+                color={colors["thursday"].color}
+            />
+            <Recipe
+                weekday={"friday"}
+                backgroundColor={colors["friday"].backgroundColor}
+                color={colors["friday"].color}
+            />
+
             <Info />
         </List>
     );

src/components/TagList.tsx

@@ -8,16 +8,18 @@ export const TagList: FunctionComponent<{ tags: string[] }> = ({ tags }) => {
 
     return (
         <Tags>
-            {tags.map((t, i) => (
-                <Tag key={i}>{t}</Tag>
-            ))}
+            {tags
+                .filter((x) => x)
+                .map((t, i) => (
+                    <Tag key={i}>{t}</Tag>
+                ))}
         </Tags>
     );
 };
 
 const Tags = styled.div`
     display: flex;
-    gap: 1rem;
+    gap: 0.5rem;
     justify-self: end;
     align-self: end;
 `;
@@ -29,4 +31,5 @@ const Tag = styled.i`
     background-color: rgba(0, 0, 0, 0.3);
     color: white;
     padding: 5px 7px;
+    font-size: 1vmax;
 `;

src/firebase/__mocks__/clientApp.ts

@@ -8,6 +8,10 @@ export async function getRecipies({
     return mockData.slice(0, count);
 }
 
+export async function allRecipies(): Promise<Recipe[]> {
+    return mockData;
+}
+
 export async function addRecipe({ recipe }: { recipe: Recipe }) {}
 
 const mockData: Recipe[] = [
@@ -55,4 +59,40 @@ const mockData: Recipe[] = [
         title: "Fishtacos",
         tags: ["fisk"],
     },
+    {
+        id: "6",
+        recipe_links: [
+            "https://www.koket.se/mitt-kok/jennie-wallden/klassisk-kottfarssas-med-spaghetti",
+            "https://www.arla.se/recept/kottfarssas/",
+            "https://www.tasteline.se/recept/kottfarssas/",
+        ],
+        title: "Hamburgare",
+        tags: ["snabbt", "barnvänligt"],
+    },
+    {
+        id: "7",
+        recipe_links: [],
+        title: "Pyttipanna",
+        tags: ["snabbt", "barnvänligt"],
+    },
+    {
+        id: "8",
+        recipe_links: [
+            "https://www.koket.se/mitt-kok/jennie-wallden/klassisk-kottfarssas-med-spaghetti",
+            "https://www.arla.se/recept/kottfarssas/",
+            "https://www.tasteline.se/recept/kottfarssas/",
+        ],
+        title: "Köttbullar med potatismos och gräddsås",
+        tags: ["snabbt", "barnvänligt"],
+    },
+    {
+        id: "9",
+        recipe_links: [
+            "https://www.koket.se/mitt-kok/jennie-wallden/klassisk-kottfarssas-med-spaghetti",
+            "https://www.arla.se/recept/kottfarssas/",
+            "https://www.tasteline.se/recept/kottfarssas/",
+        ],
+        title: "Pizza",
+        tags: ["snabbt", "barnvänligt"],
+    },
 ];

src/firebase/clientApp.ts

@@ -45,6 +45,13 @@ export async function getRecipies({
     return recipes;
 }
 
+export async function allRecipies(): Promise<Recipe[]> {
+    const recipesCol = collection(db, "recipes");
+    const recipeList = await getDocs(recipesCol);
+
+    return recipeList.docs.map(mapDocumentToRecipe);
+}
+
 async function getRandomRecipe({
     excludeIds,
 }: {
@@ -61,11 +68,13 @@ async function getRandomRecipe({
 
     const q = query(recipesCol, ...queryConstraints, limit(1));
     const recipeList = await getDocs(q);
-    return recipeList.docs.map((x) => {
-        return { id: x.id, ...x.data() } as Recipe;
-    });
+    return recipeList.docs.map(mapDocumentToRecipe);
 }
 
 export async function addRecipe({ recipe }: { recipe: Recipe }) {
     await addDoc(collection(db, "recipes"), recipe);
 }
+
+const mapDocumentToRecipe = (x: QueryDocumentSnapshot<DocumentData>) => {
+    return { id: x.id, ...x.data() } as Recipe;
+};

src/firebase/util.ts

@@ -1,3 +1,5 @@
+import { randomInt } from "util/random";
+
 export class AutoId {
     static newId(): string {
         // Alphanumeric characters
@@ -22,12 +24,6 @@ export class AutoId {
     }
 }
 
-function randomInt({ min, max }: { min?: number; max: number }) {
-    min ??= 0;
-
-    return Math.floor(Math.random() * (max - min) + min);
-}
-
 export function uniquesByKey<T>(array: Array<T>, byKey: keyof T) {
     const uniques = [...new Map(array.map((x) => [x[byKey], x])).values()];
     return uniques;

src/pages/_app.tsx

@@ -2,12 +2,17 @@ import "../styles/globals.css";
 import type { AppProps } from "next/app";
 import { ThemeProvider } from "styled-components";
 import { theme } from "../styles/theme";
+import { QueryClient, QueryClientProvider } from "react-query";
+import { ReactQueryDevtools } from "react-query/devtools";
 
-console.log(theme);
+const queryClient = new QueryClient();
 function MyApp({ Component, pageProps }: AppProps) {
     return (
         <ThemeProvider theme={theme}>
-            <Component {...pageProps} />
+            <QueryClientProvider client={queryClient}>
+                <Component {...pageProps} />
+                <ReactQueryDevtools />
+            </QueryClientProvider>
         </ThemeProvider>
     );
 }