diff --git a/gatsby-node.js b/gatsby-node.js index acd2fd96..0bb0cc8d 100644 --- a/gatsby-node.js +++ b/gatsby-node.js @@ -1,5 +1,5 @@ -import people from './src/data'; -import { tags, countries } from './src/util/stats'; +import people from './src/data.js'; +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 @@ -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 = { @@ -55,6 +54,38 @@ function sourceNodes({ actions, createNodeId, createContentDigest }) { actions.createNode({ ...country, ...nodeMeta }); }); + + // Add Computers 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 }); + }); + + // 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 327e1284..e75e161a 100644 --- a/src/components/Topics.js +++ b/src/components/Topics.js @@ -3,10 +3,15 @@ import styled from 'styled-components'; import FilterContext from '../context/FilterContext'; export default function Topics() { - const { countries, tags, currentTag, setCurrentTag } = useContext( - FilterContext - ); - console.log(countries); + const { + countries, + tags, + phones, + computers, + currentTag, + setCurrentTag, + } = useContext(FilterContext); + return ( {tags.map(tag => ( @@ -47,6 +52,45 @@ 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/data.js b/src/data.js index 78665e78..ee7be08b 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,7 +439,7 @@ const pages = [ 'JavaScript', 'React', 'Node', - 'Vue' + 'Vue', ], }, { diff --git a/src/pages/index.js b/src/pages/index.js index 8de2bd75..12d62961 100644 --- a/src/pages/index.js +++ b/src/pages/index.js @@ -31,7 +31,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; +}