From 9613eef246ac393c40c5463bb9c01a5255ecbea4 Mon Sep 17 00:00:00 2001 From: Byurhan Beyzat Date: Wed, 8 Jan 2020 13:44:33 +0200 Subject: [PATCH 1/3] Fix phone to iphone from apple --- src/data.js | 24 +++++++++--------------- 1 file changed, 9 insertions(+), 15 deletions(-) diff --git a/src/data.js b/src/data.js index 1cb641dc..9e8fcf63 100644 --- a/src/data.js +++ b/src/data.js @@ -188,7 +188,7 @@ const pages = [ emoji: 'πŸ˜„', country: 'πŸ‡ΊπŸ‡Έ', computer: 'apple', - phone: 'apple', + phone: 'iphone', tags: [ 'JavaScript', 'React', @@ -388,7 +388,7 @@ const pages = [ tags: ['JavaScript', 'Developer', 'Event Organizer', 'Teacher', 'Vue'], }, { - name: 'David O\'Trakoun', + name: "David O'Trakoun", description: 'Software Engineer', url: 'https://www.davidosomething.com/uses/', twitter: '@davidosomething', @@ -396,25 +396,19 @@ const pages = [ country: 'πŸ‡ΊπŸ‡Έ', computer: 'linux', phone: 'android', - tags: [ 'Developer' ], + tags: ['Developer'], }, { name: 'Dean Harris', - description: 'Front End Developer. Husband. Skateboarder. Occasional blogger', + description: + 'Front End Developer. Husband. Skateboarder. Occasional blogger', url: 'https://deanacus.com/uses/', twitter: '@deanacus', emoji: 'πŸ›Ή', country: 'πŸ‡¦πŸ‡Ί', computer: 'apple', phone: 'iphone', - tags: [ - 'Developer', - 'Font End', - 'JavaScript', - 'React', - 'Node', - 'PHP', - ], + tags: ['Developer', 'Font End', 'JavaScript', 'React', 'Node', 'PHP'], }, { name: 'Michael Hoffmann', @@ -425,7 +419,7 @@ const pages = [ country: 'πŸ‡©πŸ‡ͺ', computer: 'apple', phone: 'iphone', - tags: [ 'Developer', 'Blogger', 'Angular' ], + tags: ['Developer', 'Blogger', 'Angular'], }, { name: 'Michael Le', @@ -445,9 +439,9 @@ const pages = [ 'JavaScript', 'React', 'Node', - 'Vue' + 'Vue', ], - } + }, ]; export default pages; From 95b6950c2018aa93a4608674c4a6b51eed33c157 Mon Sep 17 00:00:00 2001 From: Byurhan Beyzat Date: Wed, 8 Jan 2020 13:44:52 +0200 Subject: [PATCH 2/3] Added computer/phone filter buttons --- gatsby-node.js | 38 ++++++++++++++++++++++++++- src/components/Topics.js | 49 ++++++++++++++++++++++++++++++++--- src/context/FilterContext.js | 16 +++++++++++- src/pages/index.js | 4 ++- src/util/stats.js | 50 ++++++++++++++++++++++++++++++++++++ 5 files changed, 151 insertions(+), 6 deletions(-) diff --git a/gatsby-node.js b/gatsby-node.js index d73f7d6f..9b20b903 100644 --- a/gatsby-node.js +++ b/gatsby-node.js @@ -1,5 +1,5 @@ import people from './src/data.js'; -import { tags, countries } from './src/util/stats'; +import { tags, countries, computers, phones } from './src/util/stats'; function sourceNodes({ actions, createNodeId, createContentDigest }) { // Add People to the GraphQL API, we randomize the data on each build so no one gets their feelings hurt @@ -55,6 +55,42 @@ function sourceNodes({ actions, createNodeId, createContentDigest }) { actions.createNode({ ...country, ...nodeMeta }); }); + + console.log(computers()); + + // Add Phones to GraphQL API + computers().forEach(computer => { + const nodeMeta = { + id: createNodeId(`computer-${computer.name}`), + parent: null, + children: [], + internal: { + type: `Computer`, + mediaType: `text/html`, + content: JSON.stringify(computer), + contentDigest: createContentDigest(computer), + }, + }; + actions.createNode({ ...computer, ...nodeMeta }); + }); + + console.log(phones()); + + // Add Phones to GraphQL API + phones().forEach(phone => { + const nodeMeta = { + id: createNodeId(`phone-${phone.name}`), + parent: null, + children: [], + internal: { + type: `Phone`, + mediaType: `text/html`, + content: JSON.stringify(phone), + contentDigest: createContentDigest(phone), + }, + }; + actions.createNode({ ...phone, ...nodeMeta }); + }); } export { sourceNodes }; diff --git a/src/components/Topics.js b/src/components/Topics.js index d7426561..7dddac0f 100644 --- a/src/components/Topics.js +++ b/src/components/Topics.js @@ -2,9 +2,14 @@ import React, { useContext } from 'react'; import FilterContext from '../context/FilterContext'; export default function Topics() { - const { countries, tags, currentTag, setCurrentTag } = useContext( - FilterContext - ); + const { + countries, + tags, + phones, + computers, + currentTag, + setCurrentTag, + } = useContext(FilterContext); console.log(countries); return (
@@ -46,6 +51,44 @@ export default function Topics() { {tag.count} ))} + {computers.map(tag => ( + + ))} + {phones.map(tag => ( + + ))}
); } diff --git a/src/context/FilterContext.js b/src/context/FilterContext.js index fe1eb921..7ea42b4a 100644 --- a/src/context/FilterContext.js +++ b/src/context/FilterContext.js @@ -6,7 +6,7 @@ const FilterContext = createContext(); const FilterProvider = function({ children }) { const [currentTag, setCurrentTag] = useState('all'); - const { allTag, allCountry } = useStaticQuery(graphql` + const { allTag, allCountry, allComputer, allPhone } = useStaticQuery(graphql` query FilterQuery { allTag { nodes { @@ -21,6 +21,18 @@ const FilterProvider = function({ children }) { name } } + allComputer { + nodes { + count + name + } + } + allPhone { + nodes { + count + name + } + } } `); return ( @@ -28,6 +40,8 @@ const FilterProvider = function({ children }) { value={{ tags: allTag.nodes, countries: allCountry.nodes, + computers: allComputer.nodes, + phones: allPhone.nodes, currentTag, setCurrentTag, }} diff --git a/src/pages/index.js b/src/pages/index.js index 5adc8e05..f5bd175b 100644 --- a/src/pages/index.js +++ b/src/pages/index.js @@ -30,7 +30,9 @@ function IndexPage() { person => currentTag === 'all' || person.tags.includes(currentTag) || - currentTag === person.country + currentTag === person.country || + currentTag === person.computer || + currentTag === person.phone ); return ( diff --git a/src/util/stats.js b/src/util/stats.js index ea2252c6..a26e5245 100644 --- a/src/util/stats.js +++ b/src/util/stats.js @@ -49,3 +49,53 @@ export function tags() { return [{ name: 'all', count: people.length }, ...tags]; } + +export function computers() { + const data = people + .map(person => ({ + name: person.computer, + })) + .reduce((acc, computer) => { + if (acc[computer.name]) { + // exists, update + acc[computer.name].count += 1; + } else { + acc[computer.name] = { + ...computer, + count: 1, + }; + } + return acc; + }, {}); + + const sorted = Object.entries(data) + .map(([, computer]) => computer) + .sort((a, b) => b.count - a.count); + + return sorted; +} + +export function phones() { + const data = people + .map(person => ({ + name: person.phone, + })) + .reduce((acc, phone) => { + if (acc[phone.name]) { + // exists, update + acc[phone.name].count = acc[phone.name].count + 1; + } else { + acc[phone.name] = { + ...phone, + count: 1, + }; + } + return acc; + }, {}); + + const sorted = Object.entries(data) + .map(([, phone]) => phone) + .sort((a, b) => b.count - a.count); + + return sorted; +} From 6ce6fdd8aa4731b69439b294374f66e7e78d2b61 Mon Sep 17 00:00:00 2001 From: Byurhan Beyzat Date: Wed, 8 Jan 2020 13:49:41 +0200 Subject: [PATCH 3/3] Cleaning console.logs --- gatsby-node.js | 7 +------ src/components/Topics.js | 2 +- 2 files changed, 2 insertions(+), 7 deletions(-) diff --git a/gatsby-node.js b/gatsby-node.js index 9b20b903..0bb0cc8d 100644 --- a/gatsby-node.js +++ b/gatsby-node.js @@ -38,7 +38,6 @@ function sourceNodes({ actions, createNodeId, createContentDigest }) { actions.createNode({ ...tag, ...nodeMeta }); }); - console.log(countries()); // Add Countries to GraphQL API countries().forEach(country => { const nodeMeta = { @@ -56,9 +55,7 @@ function sourceNodes({ actions, createNodeId, createContentDigest }) { actions.createNode({ ...country, ...nodeMeta }); }); - console.log(computers()); - - // Add Phones to GraphQL API + // Add Computers to GraphQL API computers().forEach(computer => { const nodeMeta = { id: createNodeId(`computer-${computer.name}`), @@ -74,8 +71,6 @@ function sourceNodes({ actions, createNodeId, createContentDigest }) { actions.createNode({ ...computer, ...nodeMeta }); }); - console.log(phones()); - // Add Phones to GraphQL API phones().forEach(phone => { const nodeMeta = { diff --git a/src/components/Topics.js b/src/components/Topics.js index 7dddac0f..a36c4f79 100644 --- a/src/components/Topics.js +++ b/src/components/Topics.js @@ -10,7 +10,7 @@ export default function Topics() { currentTag, setCurrentTag, } = useContext(FilterContext); - console.log(countries); + return (
{tags.map(tag => (