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