From 9f8cefa0ec6b4a7b0f128c4ace7f100bb973d225 Mon Sep 17 00:00:00 2001 From: Isabelle Viktoria Maciohsek Date: Sun, 20 Sep 2020 18:27:29 +0300 Subject: [PATCH] Add metadata for restaurants --- gatsby-node.js | 6 +++++ metadata/demo.json | 10 ++++++++ metadata/other.json | 8 ++++++ src/components/addView.jsx | 2 +- src/components/categoryView.jsx | 43 ++++++++++++++++++++++++++++----- src/state/index.js | 11 ++++++--- src/templates/restaurant.jsx | 9 ++++--- static/facebook.svg | 1 + static/globe.svg | 1 + static/instagram.svg | 1 + static/twitter.svg | 1 + 11 files changed, 79 insertions(+), 14 deletions(-) create mode 100644 metadata/demo.json create mode 100644 metadata/other.json create mode 100644 static/facebook.svg create mode 100644 static/globe.svg create mode 100644 static/instagram.svg create mode 100644 static/twitter.svg diff --git a/gatsby-node.js b/gatsby-node.js index e18704a..a1f0055 100644 --- a/gatsby-node.js +++ b/gatsby-node.js @@ -1,4 +1,5 @@ const path = require(`path`); +const fs = require(`fs`); const { createFilePath } = require(`gatsby-source-filesystem`); exports.onCreateNode = ({ node, getNode, actions }) => { @@ -29,12 +30,17 @@ exports.createPages = async({ graphql, actions }) => { } `); result.data.allDataCsv.edges.forEach(({ node }) => { + const fileName = node.fields.slug.slice(1, -1); + const metadata = JSON.parse( + fs.readFileSync(`./metadata/${fileName}.json`, 'utf-8') + ); createPage({ path: node.fields.slug, component: path.resolve(`./src/templates/restaurant.jsx`), context: { // Data passed to context is available // in page queries as GraphQL variables. + metadata, slug: node.fields.slug } }); diff --git a/metadata/demo.json b/metadata/demo.json new file mode 100644 index 0000000..f556826 --- /dev/null +++ b/metadata/demo.json @@ -0,0 +1,10 @@ +{ + "restaurantName": "My restaurant", + "restaurantLogo": "https://images.unsplash.com/photo-1555396273-367ea4eb4db5?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1267&q=80", + "restaurantDescription": "This is a story about a humble restaurant. Everybody wanted burgers, so we made burgers. Then they wanted beer, so we served beer. Now we are a cool restaurant somewhere with food and beer and music and dance, dance, dance with your bellies full of mead and meat.", + "restaurantFooter": "Cool restaurant located at a place far far away. Owned by: Chew Bacca", + "instagramLink": "https://instagram.com/my-restaurant", + "facebookLink": "https://facebook.com/my-restaurant", + "twitterLink": "https://twitter.com/my-restaurant", + "websiteLink": "https://my-restaurant.com" +} diff --git a/metadata/other.json b/metadata/other.json new file mode 100644 index 0000000..5431eb4 --- /dev/null +++ b/metadata/other.json @@ -0,0 +1,8 @@ +{ + "restaurantName": "The pizza corner", + "restaurantLogo": "https://images.unsplash.com/photo-1574071318508-1cdbab80d002?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80", + "restaurantDescription": "This is a story about a little Italian pizzeria on 0th street. Everybody wanted burgers, so we made tomato ketchup. Then they wanted beer, so we served wine. Now we are another restaurant somewhere with pizza. Lots of pizza, friends. We serve you all the pizza we can make. Come and taste that sweet sweet pepperoni.", + "restaurantFooter": "Pizza house located on 0th street. Owned by: Han Solo", + "instagramLink": "https://instagram.com/my-restaurant", + "facebookLink": "https://facebook.com/my-restaurant" +} diff --git a/src/components/addView.jsx b/src/components/addView.jsx index d557f1e..9154823 100644 --- a/src/components/addView.jsx +++ b/src/components/addView.jsx @@ -37,7 +37,7 @@ const AddView = ({ }

{selectedItem.name}

-

{selectedItem.description}

+

{selectedItem.description}

{ withVariations ? (
diff --git a/src/components/categoryView.jsx b/src/components/categoryView.jsx index 4ae54e9..cdb26f2 100644 --- a/src/components/categoryView.jsx +++ b/src/components/categoryView.jsx @@ -5,15 +5,20 @@ import { changeView } from '../state'; const CategoryView = ({ categories, - title = '', + metadata, changeView }) => { return ( <>
-
- {/* TODO: Add custom HTML etc. */} -

My restaurant

+
+
+ +
+

{metadata.restaurantName}

+

{metadata.restaurantDescription}

{ @@ -32,7 +37,33 @@ const CategoryView = ({
-

Cool restaurant located at a place far far away

+

{metadata.restaurantFooter}

+
+ { + Boolean(metadata.instagramLink && metadata.instagramLink.trim()) && + + Instagram + + } + { + Boolean(metadata.facebookLink && metadata.facebookLink.trim()) && + + Facebook + + } + { + Boolean(metadata.twitterLink && metadata.twitterLink.trim()) && + + Twitter + + } + { + Boolean(metadata.websiteLink && metadata.websiteLink.trim()) && + + Website + + } +
); @@ -40,7 +71,7 @@ const CategoryView = ({ const mapStateToProps = state => { return { - // TODO: Clean me if you have to + metadata: state.menuMetadata }; }; diff --git a/src/state/index.js b/src/state/index.js index 0e0d8a5..b63e96f 100644 --- a/src/state/index.js +++ b/src/state/index.js @@ -10,7 +10,8 @@ const initialState = { searchQuery: '', fromSearch: false }, - menu: {} + menu: {}, + menuMetadata: {} }; const reducer = (state, action) => { @@ -18,7 +19,8 @@ const reducer = (state, action) => { case 'INIT_MENU': return { ...state, - menu: action.menu + menu: action.menu, + menuMetadata: action.metadata }; case 'CHANGE_VIEW': return { @@ -164,7 +166,7 @@ export const changeView = (view, selection) => { } }; -export const initializeMenu = rawMenuData => { +export const initializeMenu = (rawMenuData, metadata) => { const menuData = rawMenuData .reduce((menu, rawItem) => { // Parse data @@ -216,7 +218,8 @@ export const initializeMenu = rawMenuData => { return { type: 'INIT_MENU', - menu: menuData + menu: menuData, + metadata }; }; diff --git a/src/templates/restaurant.jsx b/src/templates/restaurant.jsx index 527369d..0a4b408 100644 --- a/src/templates/restaurant.jsx +++ b/src/templates/restaurant.jsx @@ -12,6 +12,9 @@ import { initializeMenu, changeView } from '../state'; const RestaurantPage = ({ data, + pageContext: { + metadata + }, initializeMenu, changeView, menuData, @@ -19,8 +22,8 @@ const RestaurantPage = ({ category }) => { useEffect(() => { - initializeMenu(data.dataCsv.menu); - }, [data, initializeMenu]); + initializeMenu(data.dataCsv.menu, metadata); + }, [data, initializeMenu, metadata]); useEffect(() => { if (!view) changeView('categories'); @@ -29,7 +32,7 @@ const RestaurantPage = ({ if (!menuData || !menuData.categories || !menuData.categories.length) return null; return ( - + { view === 'categories' && diff --git a/static/globe.svg b/static/globe.svg new file mode 100644 index 0000000..28f7d2e --- /dev/null +++ b/static/globe.svg @@ -0,0 +1 @@ + diff --git a/static/instagram.svg b/static/instagram.svg new file mode 100644 index 0000000..0135535 --- /dev/null +++ b/static/instagram.svg @@ -0,0 +1 @@ + diff --git a/static/twitter.svg b/static/twitter.svg new file mode 100644 index 0000000..3938890 --- /dev/null +++ b/static/twitter.svg @@ -0,0 +1 @@ +