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;
+}