Add feature: pass settings to fetching script

GitNation · Jan 14, 2020 · 6d9439a · 6d9439a
1 parent 28ffeb7
commit 6d9439a
Show file tree

Hide file tree

Showing 11 changed files with 126 additions and 83 deletions.
diff --git a/README.md b/README.md
@@ -1,3 +1,12 @@
 # GitNation Content
 
 package for fetching conference content from GraphCMS
+
+
+## List of specific things that should behave differently
+
+**Image transformations**
+
+Can have various dimensions for different sections / sites
+
+To check: can we set 500x500 as default for all images?
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@focus-reactive/graphql-content-layer",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "private": false,
   "main": "dist/index.js",
   "scripts": {

diff --git a/src/content.stories.js b/src/content.stories.js
@@ -47,15 +47,17 @@ const TagColor = ({ title, tag }) => (
  */
 const contentPromise = getContent();
 
-queriesData.forEach(({ queryPages, getData, story }) => {
-  allStories[story] = Query({
-    name: story,
-    query: queryPages,
-    vars: { conferenceTitle, eventYear },
-    searchVars: { search: '' },
-    getData,
-  });
-});
+queriesData.forEach(
+  ({ queryPages, getData, story, vars }) => {
+    allStories[story] = Query({
+      name: story,
+      query: queryPages,
+      vars: { conferenceTitle, eventYear, ...vars },
+      searchVars: { search: '' },
+      getData,
+    });
+  },
+);
 
 module.exports = {
   default: {

diff --git a/src/fetch-committee.js b/src/fetch-committee.js
@@ -1,33 +1,27 @@
-const { prepareSpeakers } = require('./utils');
+const { prepareSpeakers, trySelectSettings } = require('./utils');
+const { personFragment } = require('./fragments');
+
+const selectSettings = trySelectSettings(s => s.speakerAvatar.dimensions, {
+  avatarWidth: 500,
+  avatarHeight: 500,
+});
 
 const queryPages = /* GraphQL */ `
-  query($conferenceTitle: ConferenceTitle, $eventYear: EventYear) {
+  query($conferenceTitle: ConferenceTitle, $eventYear: EventYear, $avatarWidth: Int, $avatarHeight: Int) {
     conf: conferenceBrand(where: { title: $conferenceTitle }) {
       id
       status
       year: conferenceEvents(where: { year: $eventYear }) {
         id
         status
         committee {
-          id
-          name
-          company
-          country
-          bio
-          githubUrl
-          twitterUrl
-          avatar {
-            url(
-              transformation: {
-                image: { resize: { width: 500, height: 500, fit: crop } }
-                document: { output: { format: jpg } }
-              }
-            )
-          }
+          ...person
         }
       }
     }
   }
+
+${personFragment}
 `;
 
 const fetchData = async (client, vars) => {
@@ -46,6 +40,7 @@ const fetchData = async (client, vars) => {
 
 module.exports = {
   fetchData,
+  selectSettings,
   queryPages,
   getData: data => data.conf.year[0].committee,
   story: 'Programme Committee',

diff --git a/src/fetch-mc.js b/src/fetch-mc.js
@@ -1,8 +1,13 @@
-const { prepareSpeakers } = require('./utils');
+const { prepareSpeakers, trySelectSettings } = require('./utils');
 const { personFragment } = require('./fragments');
 
+const selectSettings = trySelectSettings(s => s.speakerAvatar.dimensions, {
+  avatarWidth: 500,
+  avatarHeight: 500,
+});
+
 const queryPages = /* GraphQL */ `
-  query($conferenceTitle: ConferenceTitle, $eventYear: EventYear) {
+  query($conferenceTitle: ConferenceTitle, $eventYear: EventYear, $avatarWidth: Int, $avatarHeight: Int) {
     conf: conferenceBrand(where: { title: $conferenceTitle }) {
       id
       status
@@ -36,6 +41,7 @@ const fetchData = async(client, vars) => {
 
 module.exports = {
   fetchData,
+  selectSettings,
   queryPages,
   getData: data => data.conf.year[0].mcs,
   story: 'MCs',

diff --git a/src/fetch-performance.js b/src/fetch-performance.js
@@ -1,8 +1,13 @@
-const { prepareSpeakers } = require('./utils');
+const { prepareSpeakers, trySelectSettings } = require('./utils');
 const { personFragment } = require('./fragments');
 
+const selectSettings = trySelectSettings(s => s.speakerAvatar.dimensions, {
+  avatarWidth: 500,
+  avatarHeight: 500,
+});
+
 const queryPages = /* GraphQL */ `
-  query($conferenceTitle: ConferenceTitle, $eventYear: EventYear) {
+  query($conferenceTitle: ConferenceTitle, $eventYear: EventYear, $avatarWidth: Int, $avatarHeight: Int) {
     conf: conferenceBrand(where: { title: $conferenceTitle }) {
       id
       status
@@ -35,6 +40,7 @@ const fetchData = async (client, vars) => {
 
 module.exports = {
   fetchData,
+  selectSettings,
   queryPages,
   getData: data => data.conf.year[0].performanceTeam,
   story: 'performance',

diff --git a/src/fetch-speakers.js b/src/fetch-speakers.js
@@ -1,8 +1,13 @@
-const { prepareSpeakers } = require('./utils');
+const { prepareSpeakers, trySelectSettings } = require('./utils');
 const { speakerInfoFragment } = require('./fragments');
 
+const selectSettings = trySelectSettings(s => s.speakerAvatar.dimensions, {
+  avatarWidth: 500,
+  avatarHeight: 500,
+});
+
 const queryPages = /* GraphQL */ `
-  query($conferenceTitle: ConferenceTitle, $eventYear: EventYear) {
+  query($conferenceTitle: ConferenceTitle, $eventYear: EventYear, $avatarWidth: Int, $avatarHeight: Int) {
     conf: conferenceBrand(where: { title: $conferenceTitle }) {
       id
       status
@@ -21,12 +26,10 @@ const queryPages = /* GraphQL */ `
 `;
 
 const fetchData = async (client, vars) => {
-  const data = await client
-    .request(queryPages, vars)
-    .then(res => ({
-      speakers: res.conf.year[0].speakers,
-      openForTalks: res.conf.year[0].openForTalks,
-    }));
+  const data = await client.request(queryPages, vars).then(res => ({
+    speakers: res.conf.year[0].speakers,
+    openForTalks: res.conf.year[0].openForTalks,
+  }));
 
   const { openForTalks } = data;
 
@@ -40,6 +43,7 @@ const fetchData = async (client, vars) => {
 
 module.exports = {
   fetchData,
+  selectSettings,
   queryPages,
   getData: data => data.conf.year[0].speakers,
   story: 'speakers',

diff --git a/src/fetch-workshops.js b/src/fetch-workshops.js
@@ -1,9 +1,14 @@
 const { markdownToHtml } = require('./markdown');
-const { prepareSpeakers } = require('./utils');
+const { prepareSpeakers, trySelectSettings } = require('./utils');
 const { speakerInfoFragment } = require('./fragments');
 
+const selectSettings = trySelectSettings(s => s.speakerAvatar.dimensions, {
+  avatarWidth: 500,
+  avatarHeight: 500,
+});
+
 const queryPages = /* GraphQL */ `
-  query ($conferenceTitle: ConferenceTitle, $eventYear: EventYear) {
+  query ($conferenceTitle: ConferenceTitle, $eventYear: EventYear, $avatarWidth: Int, $avatarHeight: Int) {
     conf: conferenceBrand(where: {title: $conferenceTitle}) {
       id
       status
@@ -78,6 +83,7 @@ const fetchData = async (client, vars) => {
 
 module.exports = {
   fetchData,
+  selectSettings,
   queryPages,
   getData: data => data.conf.year[0].schedule,
   story: 'schedule/workshops',

diff --git a/src/fragments.js b/src/fragments.js
@@ -1,12 +1,12 @@
 const personAvatarFragment = /* GraphQL */ `
   fragment avatarUrl on Speaker {
     avatar {
-      url #(
-        # transformation: {
-        #   image: { resize: { width: 500, height: 500, fit: crop } }
-        #   document: { output: { format: jpg } }
-        # }
-      #)
+      url (
+        transformation: {
+          image: { resize: { width: $avatarWidth, height: $avatarHeight, fit: crop } }
+          document: { output: { format: jpg } }
+        }
+      )
     }
   }
 `;

diff --git a/src/index.js b/src/index.js
@@ -26,15 +26,16 @@ const createClient = ({ endpoint, token }) => {
 const client = createClient(credentials);
 const queriesData = [];
 
-const getQueriesData = content => {
+const getQueriesData = (content, conferenceSettings) => {
   try {
-    const { fetchData, ...data } = content;
+    const { fetchData, selectSettings = () => undefined, ...data } = content;
     if (!Object.keys(data).length) return;
+    data.vars = selectSettings(conferenceSettings);
     queriesData.push(data);
   } catch (err) {}
 };
 
-const getContent = async () => {
+const getContent = async conferenceSettings => {
   const fetchAll = [
     textContent,
     pageContent,
@@ -51,8 +52,13 @@ const getContent = async () => {
     committeeContent,
   ].map(async content => {
     try {
-      getQueriesData(content);
-      return await content.fetchData(client, { conferenceTitle, eventYear });
+      getQueriesData(content, conferenceSettings);
+      const getVarsFromSettings = content.selectSettings || (() => undefined);
+      return await content.fetchData(client, {
+        conferenceTitle,
+        eventYear,
+        ...getVarsFromSettings(conferenceSettings),
+      });
     } catch (err) {
       console.error(err);
     }

diff --git a/src/utils.js b/src/utils.js
@@ -1,42 +1,42 @@
 const { markdownToHtml } = require('./markdown');
 
 const tagColors = {
-  'NodeJS': {
+  NodeJS: {
     tagBG: '#7AB464',
     color: '#fff',
   },
-  'WebGL': {
+  WebGL: {
     tagBG: '#ff7302',
-    color: '#ffffff'
+    color: '#ffffff',
   },
-  'Ecosystem': {
+  Ecosystem: {
     tagBG: '#fff40d',
-    color: '#ae4f01'
+    color: '#ae4f01',
   },
-  'Language': {
+  Language: {
     tagBG: '#fff40d',
-    color: '#ae4f01'
+    color: '#ae4f01',
   },
-  'GraphQL': {
+  GraphQL: {
     tagBG: '#f200fa',
     color: '#400042',
   },
-  'VueJS': {
+  VueJS: {
     tagBG: '#4EBA87',
     color: '#fff',
   },
-  'Performance': {
+  Performance: {
     tagBG: '#00ed24',
     color: '#00410a',
   },
-  'TypeScript': {
+  TypeScript: {
     tagBG: '#61DAFB',
-    color: '#030303'
+    color: '#030303',
   },
   default: {
     tagBG: 'black',
-    color: 'white'
-  }
+    color: 'white',
+  },
 };
 
 const getSocials = speaker => {
@@ -47,8 +47,14 @@ const getSocials = speaker => {
     ownSite: 'site',
   };
   const { githubUrl, twitterUrl, mediumUrl, ownSite, companySite } = speaker;
-  const socials = Object.entries({ githubUrl, twitterUrl, mediumUrl, ownSite, companySite })
-    .map(([key, val]) => (val && { link: val, icon: ICONS[key] }))
+  const socials = Object.entries({
+    githubUrl,
+    twitterUrl,
+    mediumUrl,
+    ownSite,
+    companySite,
+  })
+    .map(([key, val]) => val && { link: val, icon: ICONS[key] })
     .filter(Boolean);
   return socials;
 };
@@ -58,30 +64,33 @@ const getLabelColor = label => {
   return colors;
 };
 
-const prepareSpeakers = speakers => speakers
-  .map(item => ({
-    ...item.speaker,
-    ...item,
-    avatar: item.speaker.avatar || {},
-  }))
-  .map(
-    async ({
-      bio,
-      speaker,
-      avatar,
-      ...item
-    }) => ({
+const prepareSpeakers = speakers =>
+  speakers
+    .map(item => ({
+      ...item.speaker,
+      ...item,
+      avatar: item.speaker.avatar || {},
+    }))
+    .map(async ({ bio, speaker, avatar, ...item }) => ({
       ...item,
       company: `${item.company}, ${item.country}`,
       avatar: avatar.url,
       bio: await markdownToHtml(bio),
       socials: getSocials(item),
       ...getLabelColor(item.label),
-    })
-  );
+    }));
+
+const trySelectSettings = (selector, defaultSettings) => settings => {
+  try {
+    return selector(settings) || defaultSettings;
+  } catch {
+    return defaultSettings;
+  }
+};
 
 module.exports = {
   getLabelColor,
   prepareSpeakers,
   tagColors,
+  trySelectSettings,
 };