mock data and grid fixes

package.json

@@ -13,6 +13,7 @@
         "@types/uuid": "^8.3.1",
         "firebase": "^9.1.3",
         "next": "12.0.1",
+        "polished": "^4.1.3",
         "react": "17.0.2",
         "react-dom": "17.0.2",
         "react-firebase-hooks": "^3.0.4",

src/@types/styled.d.ts

@@ -0,0 +1,7 @@
+import { DefaultTheme, CSSProp } from "styled-components";
+import { theme } from "styles/theme";
+
+declare module "styled-components" {
+    type Theme = typeof theme;
+    export interface DefaultTheme extends Theme {}
+}

src/components/Info.tsx

@@ -0,0 +1,40 @@
+import { FunctionComponent } from "react";
+import styled from "styled-components";
+
+export const Info: FunctionComponent = () => {
+    return (
+        <Container>
+            <h2>Vardagsmaten</h2>
+            <p>Något som inte faller i smaken? Tryck på ikonen i hörnet</p>
+
+            <i>Skapat av Joakim Jäderberg</i>
+        </Container>
+    );
+};
+
+const Container = styled.div`
+    display: grid;
+    grid-template-areas:
+        "heading"
+        "info"
+        "creator";
+    text-align: center;
+    padding: 30px;
+
+    h2 {
+        grid-area: heading;
+        align-self: end;
+    }
+
+    p {
+        grid-area: info;
+        align-self: flex-start;
+    }
+
+    i {
+        grid-area: creator;
+        font-size: 1vmax;
+        text-align: right;
+        align-self: end;
+    }
+`;

src/components/Recipe.tsx

@@ -8,6 +8,8 @@ import { TagList } from "./TagList";
 type Props = {
     recipe: RecipeType;
     weekday: typeof weekdays[number];
+    backgroundColor: string;
+    color: string;
 };
 
 const weekdayTranslations: { [weekday in typeof weekdays[number]]: string } = {
@@ -18,9 +20,14 @@ const weekdayTranslations: { [weekday in typeof weekdays[number]]: string } = {
     friday: "fredag",
 };
 
-export const Recipe: FunctionComponent<Props> = ({ recipe, weekday }) => {
+export const Recipe: FunctionComponent<Props> = ({
+    recipe,
+    weekday,
+    backgroundColor,
+    color,
+}) => {
     return (
-        <Container>
+        <Container backgroundColor={backgroundColor} color={color}>
             <DayOfTheWeek>{weekdayTranslations[weekday]}</DayOfTheWeek>
             <Title>{recipe.title}</Title>
             <Links links={recipe.recipe_links} />
@@ -29,7 +36,7 @@ export const Recipe: FunctionComponent<Props> = ({ recipe, weekday }) => {
     );
 };
 
-const Container = styled.div`
+const Container = styled.div<{ backgroundColor: string; color: string }>`
     display: grid;
     grid-template-areas:
         "dayOfTheWeek"
@@ -38,7 +45,8 @@ const Container = styled.div`
         "tags";
 
     padding: 30px;
-    color: white;
+    color: ${({ color }) => color};
+    background-color: ${({ backgroundColor }) => backgroundColor};
 `;
 
 const DayOfTheWeek = styled.small`
@@ -48,7 +56,6 @@ const DayOfTheWeek = styled.small`
     align-self: end;
     font-weight: normal;
     font-size: 2vmax;
-    color: rgba(255, 255, 255, 0.7);
 `;
 
 const Title = styled.h2`

src/components/RecipeList.tsx

@@ -1,30 +1,70 @@
 import * as React from "react";
 import { useEffect, useState } from "react";
-import styled, { css } from "styled-components";
-import { getRecipies } from "../firebase/__mocks__/clientApp";
-import { Recipe as RecipeType } from "../models/recipie";
-import { weekdays } from "../models/weekdays";
-import { Recipe } from "./Recipe";
+import styled, { css, DefaultTheme, useTheme } from "styled-components";
+import { getRecipies } from "firebase/__mocks__/clientApp";
+import { Recipe as RecipeType } from "models/recipie";
+import { weekdays } from "models/weekdays";
+import { Recipe } from "components/Recipe";
+import { Info } from "components/Info";
 
 export const RecipeList: React.FunctionComponent = () => {
     const [recipes, setRecipes] = useState<RecipeType[]>();
+    const theme = useTheme();
+
     useEffect(() => {
         (async () => {
             const data = await getRecipies({ count: 5 });
             setRecipes(data);
         })();
     }, []);
-
+    const colors = colorMappings(theme);
     return (
         <List>
             {recipes?.map((r, i) => (
-                <Recipe key={i} recipe={r} weekday={weekdays[i]} />
+                <Recipe
+                    key={i}
+                    recipe={r}
+                    weekday={weekdays[i]}
+                    backgroundColor={colors[weekdays[i]].backgroundColor}
+                    color={colors[weekdays[i]].color}
+                />
             ))}
+            <Info />
         </List>
     );
 };
 
-const colors = ["#ffbe0b", "#fb5607", "#ff006e", "#8338ec", "#3a86ff"];
+const colorMappings = (
+    theme: DefaultTheme
+): {
+    [weekday in typeof weekdays[number]]: {
+        backgroundColor: string;
+        color: string;
+    };
+} => {
+    return {
+        monday: {
+            backgroundColor: theme.colors.amber[400],
+            color: theme.colors.blue[800],
+        },
+        tuesday: {
+            backgroundColor: theme.colors.orange[400],
+            color: theme.colors.white,
+        },
+        wednesday: {
+            backgroundColor: theme.colors.pink[400],
+            color: theme.colors.blue[800],
+        },
+        thursday: {
+            backgroundColor: theme.colors.purple[400],
+            color: theme.colors.orange[200],
+        },
+        friday: {
+            backgroundColor: theme.colors.blue[400],
+            color: theme.colors.amber[300],
+        },
+    };
+};
 
 const List = styled.div`
     display: grid;
@@ -33,12 +73,6 @@ const List = styled.div`
     grid-template-areas:
         "monday tuesday wednesday"
         "thursday friday info";
-
-    ${colors.map(
-        (c, i) => css`
-            > *:nth-child(${i + 1}) {
-                background-color: ${c};
-            }
-        `
-    )}
+    grid-template-columns: repeat(3, 1fr);
+    grid-template-rows: repeat(2, 1fr);
 `;

src/firebase/__mocks__/clientApp.ts

@@ -1,28 +1,58 @@
 import { Recipe } from "../../models/recipie";
-import { AutoId } from "../util";
 
 export async function getRecipies({
     count,
 }: {
     count: number;
 }): Promise<Recipe[]> {
-    let recipes: Recipe[] = [];
-
-    // firebase has no current way of fetching multiple random documents at once
-    while (recipes.length < count) {
-        const recipe: Recipe = {
-            id: "123",
-            recipe_links: [
-                "https://www.koket.se/mitt-kok/jennie-wallden/klassisk-kottfarssas-med-spaghetti",
-                "https://www.arla.se/recept/kottfarssas/",
-            ],
-            title: "Spaghetti och köttfärssås",
-            tags: ["barnvänligt", "snabbt"],
-        };
-        recipes = [...recipes, recipe];
-    }
-
-    return recipes;
+    return mockData.slice(0, count);
 }
 
 export async function addRecipe({ recipe }: { recipe: Recipe }) {}
+
+const mockData: Recipe[] = [
+    {
+        id: "1",
+        recipe_links: [
+            "https://www.koket.se/mitt-kok/jennie-wallden/klassisk-kottfarssas-med-spaghetti",
+            "https://www.arla.se/recept/kottfarssas/",
+        ],
+        title: "Spaghetti och köttfärssås",
+        tags: ["barnvänligt", "snabbt"],
+    },
+    {
+        id: "2",
+        recipe_links: [],
+        title: "Blodpudding",
+        tags: ["barnvänligt", "snabbt"],
+    },
+    {
+        id: "3",
+        recipe_links: [
+            "https://www.koket.se/mitt-kok/jennie-wallden/klassisk-kottfarssas-med-spaghetti",
+            "https://www.arla.se/recept/kottfarssas/",
+        ],
+        title: "Kyckling parmesan",
+        tags: [],
+    },
+    {
+        id: "4",
+        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: "Souvlaki",
+        tags: [],
+    },
+    {
+        id: "5",
+        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: "Fishtacos",
+        tags: ["fisk"],
+    },
+];

src/pages/_app.tsx

@@ -1,8 +1,15 @@
-import '../styles/globals.css'
-import type { AppProps } from 'next/app'
+import "../styles/globals.css";
+import type { AppProps } from "next/app";
+import { ThemeProvider } from "styled-components";
+import { theme } from "../styles/theme";
 
+console.log(theme);
 function MyApp({ Component, pageProps }: AppProps) {
-  return <Component {...pageProps} />
+    return (
+        <ThemeProvider theme={theme}>
+            <Component {...pageProps} />
+        </ThemeProvider>
+    );
 }
 
-export default MyApp
+export default MyApp;

src/pages/_document.tsx

@@ -0,0 +1,49 @@
+import Document, {
+    DocumentContext,
+    Html,
+    Head,
+    Main,
+    NextScript,
+} from "next/document";
+import { ServerStyleSheet } from "styled-components";
+
+export default class MyDocument extends Document {
+    static async getInitialProps(ctx: DocumentContext) {
+        const sheet = new ServerStyleSheet();
+        const originalRenderPage = ctx.renderPage;
+
+        try {
+            ctx.renderPage = () =>
+                originalRenderPage({
+                    enhanceApp: (App) => (props) =>
+                        sheet.collectStyles(<App {...props} />),
+                });
+
+            const initialProps = await Document.getInitialProps(ctx);
+
+            return {
+                ...initialProps,
+                styles: (
+                    <>
+                        {initialProps.styles}
+                        {sheet.getStyleElement()}
+                    </>
+                ),
+            };
+        } finally {
+            sheet.seal();
+        }
+    }
+
+    render() {
+        return (
+            <Html>
+                <Head />
+                <body>
+                    <Main />
+                    <NextScript />
+                </body>
+            </Html>
+        );
+    }
+}