merge compters and phones into devices

gatsby-node.js

@@ -1,5 +1,5 @@
 import people from './src/data.js';
-import { tags, countries, computers, phones } from './src/util/stats';
+import { tags, countries, devices } 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,36 +55,21 @@ function sourceNodes({ actions, createNodeId, createContentDigest }) {
     actions.createNode({ ...country, ...nodeMeta });
   });
 
-  // Add Computers to GraphQL API
-  computers().forEach(computer => {
+  // Add Devices to GraphQL API
+  console.log(devices());
+  devices().forEach(device => {
     const nodeMeta = {
-      id: createNodeId(`computer-${computer.name}`),
+      id: createNodeId(`device-${device.name}`),
       parent: null,
       children: [],
       internal: {
-        type: `Computer`,
+        type: `device`,
         mediaType: `text/html`,
-        content: JSON.stringify(computer),
-        contentDigest: createContentDigest(computer),
+        content: JSON.stringify(device),
+        contentDigest: createContentDigest(device),
       },
     };
-    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 });
+    actions.createNode({ ...device, ...nodeMeta });
   });
 }
 

src/components/Topics.js

@@ -3,14 +3,9 @@ import styled from 'styled-components';
 import FilterContext from '../context/FilterContext';
 
 export default function Topics() {
-  const {
-    countries,
-    tags,
-    phones,
-    computers,
-    currentTag,
-    setCurrentTag,
-  } = useContext(FilterContext);
+  const { countries, tags, devices, currentTag, setCurrentTag } = useContext(
+    FilterContext
+  );
 
   return (
     <Tags>
@@ -53,9 +48,9 @@ export default function Topics() {
         </Tag>
       ))}
 
-      {computers.map(tag => (
-        <label
-          className={`tag ${tag.name === currentTag ? 'currentTag' : ''}`}
+      {devices.map(tag => (
+        <Tag
+          currentTag={tag.name === currentTag}
           htmlFor={`filter-${tag.name}`}
           key={`filter-${tag.name}`}
           title={tag.name}
@@ -69,27 +64,8 @@ export default function Topics() {
             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>
+          <TagCount>{tag.count}</TagCount>
+        </Tag>
       ))}
     </Tags>
   );

src/context/FilterContext.js

@@ -6,7 +6,7 @@ const FilterContext = createContext();
 const FilterProvider = function({ children }) {
   const [currentTag, setCurrentTag] = useState('all');
 
-  const { allTag, allCountry, allComputer, allPhone } = useStaticQuery(graphql`
+  const { allTag, allCountry, allDevice } = useStaticQuery(graphql`
     query FilterQuery {
       allTag {
         nodes {
@@ -21,13 +21,7 @@ const FilterProvider = function({ children }) {
           name
         }
       }
-      allComputer {
-        nodes {
-          count
-          name
-        }
-      }
-      allPhone {
+      allDevice {
         nodes {
           count
           name
@@ -40,8 +34,7 @@ const FilterProvider = function({ children }) {
       value={{
         tags: allTag.nodes,
         countries: allCountry.nodes,
-        computers: allComputer.nodes,
-        phones: allPhone.nodes,
+        devices: allDevice.nodes,
         currentTag,
         setCurrentTag,
       }}

src/util/stats.js

@@ -50,52 +50,13 @@ 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;
-    }, {});
+export function devices() {
+  const all = [
+    ...people.map(person => person.computer),
+    ...people.map(person => person.phone),
+  ];
 
-  const sorted = Object.entries(data)
-    .map(([, computer]) => computer)
+  return Object.entries(all.reduce(countInstances, {}))
+    .map(([device, count]) => ({ name: device, count }))
     .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;
 }