Added computer/phone filter buttons

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

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 (
     <div className="tags">
@@ -46,6 +51,44 @@ export default function Topics() {
           <span className="count">{tag.count}</span>
         </label>
       ))}
+      {computers.map(tag => (
+        <label
+          className={`tag ${tag.name === currentTag ? 'currentTag' : ''}`}
+          htmlFor={`filter-${tag.name}`}
+          key={`filter-${tag.name}`}
+          title={tag.name}
+        >
+          <input
+            type="radio"
+            name="computer"
+            id={`filter-${tag.name}`}
+            value={tag.name}
+            checked={tag.name === currentTag}
+            onChange={e => setCurrentTag(e.currentTarget.value)}
+          />
+          {tag.name}
+          <span className="count">{tag.count}</span>
+        </label>
+      ))}
+      {phones.map(tag => (
+        <label
+          className={`tag ${tag.name === currentTag ? 'currentTag' : ''}`}
+          htmlFor={`filter-${tag.name}`}
+          key={`filter-${tag.name}`}
+          title={tag.name}
+        >
+          <input
+            type="radio"
+            name="tag"
+            id={`filter-${tag.name}`}
+            value={tag.name}
+            checked={tag.name === currentTag}
+            onChange={e => setCurrentTag(e.currentTarget.value)}
+          />
+          {tag.name}
+          <span className="count">{tag.count}</span>
+        </label>
+      ))}
     </div>
   );
 }

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,
       }}

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 (
     <Layout>

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