Move tagColors outside of package

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

Hide file tree

Showing 10 changed files with 152 additions and 111 deletions.
diff --git a/.storybook/index.stories.js b/.storybook/index.stories.js
@@ -1,3 +1,5 @@
-const stories = require('../src/content.stories');
+const {
+  passConferenceSettings,
+} =require('../src/content.stories');
 
-module.exports = [stories];
+passConferenceSettings({warning: 'settings should come from conferences projects'});
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@focus-reactive/graphql-content-layer",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "private": false,
   "main": "dist/index.js",
   "scripts": {

diff --git a/src/content.stories.js b/src/content.stories.js
@@ -2,21 +2,18 @@ const React = require('react');
 const ReactJson = require('react-json-view').default;
 const {
   Query,
+  QueryParams,
   withGraphCMS,
 } = require('@focus-reactive/storybook-addon-graphcms');
 const { storiesOf } = require('@storybook/react');
 
 const { credentials, conferenceTitle, eventYear } = require('./config');
 const { queriesData, getContent } = require('./index');
-const { tagColors } = require('./utils');
+// const { tagColors } = require('./utils');
 
 const allStories = {};
 
-const AwaitForData = ({ promise }) => {
-  const [content, setContent] = React.useState(null);
-  React.useEffect(() => {
-    promise.then(res => setContent(res));
-  }, [getContent]);
+const AwaitForData = ({ content }) => {
   if (!content) return 'Loading data from GraphCMS';
   return <ReactJson src={content} name="content" collapsed={2} />;
 };
@@ -39,43 +36,43 @@ const TagColor = ({ title, tag }) => (
   </div>
 );
 
-/**
- * getContent is async
- * but when it starts it populate `queriesData` with queries
- * we need to get it first for creating stories
- * after that we can wait for real data and show inner content
- */
-const contentPromise = getContent();
+const passConferenceSettings = async conferenceSettings => {
+  const content = await getContent(conferenceSettings);
 
-queriesData.forEach(
-  ({ queryPages, getData, story, vars }) => {
-    allStories[story] = Query({
-      name: story,
-      query: queryPages,
-      vars: { conferenceTitle, eventYear, ...vars },
-      searchVars: { search: '' },
-      getData,
+  storiesOf('Content Layer', module)
+    .add('content', () => <AwaitForData content={content} />)
+    .add('tag colors', () => {
+      const { tagColors } = content.conferenceSettings;
+      const tags = Object.keys(tagColors);
+      return (
+        <div>
+          {tags.map(tag => (
+            <TagColor key={tag} title={tag} tag={tagColors[tag]} />
+          ))}
+        </div>
+      );
     });
-  },
-);
 
-module.exports = {
-  default: {
-    title: 'GraphCMS content',
-    decorators: [withGraphCMS(credentials)],
-  },
-  ...allStories,
-};
+  const cmsStories = storiesOf('CMS Layer', module).addDecorator(
+    withGraphCMS(credentials),
+  );
 
-storiesOf('Inner structure', module)
-  .add('content', () => <AwaitForData promise={contentPromise} />)
-  .add('tag colors', () => {
-    const tags = Object.keys(tagColors);
-    return (
-      <div>
-        {tags.map(tag => (
-          <TagColor key={tag} title={tag} tag={tagColors[tag]} />
-        ))}
-      </div>
+  queriesData.forEach(({ queryPages, getData, story, vars }) => {
+    cmsStories.add(
+      story,
+      () => null,
+      QueryParams({
+        name: story,
+        query: queryPages,
+        vars: { conferenceTitle, eventYear, ...vars },
+        searchVars: { search: '' },
+        getData,
+        isConnected: true,
+      }),
     );
   });
+};
+
+module.exports = {
+  passConferenceSettings,
+};
diff --git a/src/fetch-committee.js b/src/fetch-committee.js
@@ -30,7 +30,8 @@ const fetchData = async (client, vars) => {
     .then(res => res.conf.year[0].committee);
 
   const speakers = await prepareSpeakers(
-    data.map(speaker => ({ speaker, decor: true }))
+    data.map(speaker => ({ speaker, decor: true })),
+    {}
   );
 
   return {

diff --git a/src/fetch-mc.js b/src/fetch-mc.js
@@ -7,7 +7,12 @@ const selectSettings = trySelectSettings(s => s.speakerAvatar.dimensions, {
 });
 
 const queryPages = /* GraphQL */ `
-  query($conferenceTitle: ConferenceTitle, $eventYear: EventYear, $avatarWidth: Int, $avatarHeight: Int) {
+  query(
+    $conferenceTitle: ConferenceTitle
+    $eventYear: EventYear
+    $avatarWidth: Int
+    $avatarHeight: Int
+  ) {
     conf: conferenceBrand(where: { title: $conferenceTitle }) {
       id
       status
@@ -17,7 +22,7 @@ const queryPages = /* GraphQL */ `
         mcs {
           id
           speaker {
-          ...person
+            ...person
           }
         }
       }
@@ -27,12 +32,12 @@ const queryPages = /* GraphQL */ `
   ${personFragment}
 `;
 
-const fetchData = async(client, vars) => {
+const fetchData = async (client, vars) => {
   const data = await client
     .request(queryPages, vars)
     .then(res => res.conf.year[0].mcs);
 
-  const mcs = await prepareSpeakers(data);
+  const mcs = await prepareSpeakers(data, {});
 
   return {
     mcs: await Promise.all(mcs),

diff --git a/src/fetch-performance.js b/src/fetch-performance.js
@@ -7,7 +7,12 @@ const selectSettings = trySelectSettings(s => s.speakerAvatar.dimensions, {
 });
 
 const queryPages = /* GraphQL */ `
-  query($conferenceTitle: ConferenceTitle, $eventYear: EventYear, $avatarWidth: Int, $avatarHeight: Int) {
+  query(
+    $conferenceTitle: ConferenceTitle
+    $eventYear: EventYear
+    $avatarWidth: Int
+    $avatarHeight: Int
+  ) {
     conf: conferenceBrand(where: { title: $conferenceTitle }) {
       id
       status
@@ -30,7 +35,8 @@ const fetchData = async (client, vars) => {
     .then(res => res.conf.year[0].performanceTeam);
 
   const speakers = await prepareSpeakers(
-    data.map(speaker => ({ speaker, decor: true }))
+    data.map(speaker => ({ speaker, decor: true })),
+    {},
   );
 
   return {

diff --git a/src/fetch-speakers.js b/src/fetch-speakers.js
@@ -1,13 +1,25 @@
 const { prepareSpeakers, trySelectSettings } = require('./utils');
 const { speakerInfoFragment } = require('./fragments');
 
-const selectSettings = trySelectSettings(s => s.speakerAvatar.dimensions, {
-  avatarWidth: 500,
-  avatarHeight: 500,
-});
+const selectSettings = trySelectSettings(
+  s => ({
+    ...s.speakerAvatar.dimensions,
+    tagColors: s.tagColors,
+  }),
+  {
+    avatarWidth: 500,
+    avatarHeight: 500,
+    tagColors: {},
+  },
+);
 
 const queryPages = /* GraphQL */ `
-  query($conferenceTitle: ConferenceTitle, $eventYear: EventYear, $avatarWidth: Int, $avatarHeight: Int) {
+  query(
+    $conferenceTitle: ConferenceTitle
+    $eventYear: EventYear
+    $avatarWidth: Int
+    $avatarHeight: Int
+  ) {
     conf: conferenceBrand(where: { title: $conferenceTitle }) {
       id
       status
@@ -25,15 +37,15 @@ const queryPages = /* GraphQL */ `
   ${speakerInfoFragment}
 `;
 
-const fetchData = async (client, vars) => {
+const fetchData = async (client, { tagColors, ...vars }) => {
   const data = await client.request(queryPages, vars).then(res => ({
     speakers: res.conf.year[0].speakers,
     openForTalks: res.conf.year[0].openForTalks,
   }));
 
   const { openForTalks } = data;
 
-  const speakers = await prepareSpeakers(data.speakers);
+  const speakers = await prepareSpeakers(data.speakers, tagColors);
 
   return {
     speakers: { main: await Promise.all(speakers) },

diff --git a/src/fetch-workshops.js b/src/fetch-workshops.js
@@ -8,14 +8,19 @@ const selectSettings = trySelectSettings(s => s.speakerAvatar.dimensions, {
 });
 
 const queryPages = /* GraphQL */ `
-  query ($conferenceTitle: ConferenceTitle, $eventYear: EventYear, $avatarWidth: Int, $avatarHeight: Int) {
-    conf: conferenceBrand(where: {title: $conferenceTitle}) {
+  query(
+    $conferenceTitle: ConferenceTitle
+    $eventYear: EventYear
+    $avatarWidth: Int
+    $avatarHeight: Int
+  ) {
+    conf: conferenceBrand(where: { title: $conferenceTitle }) {
       id
       status
-      year: conferenceEvents(where: {year: $eventYear}) {
+      year: conferenceEvents(where: { year: $eventYear }) {
         id
         status
-        schedule: daySchedules(where: {workshops_some: {}}) {
+        schedule: daySchedules(where: { workshops_some: {} }) {
           id
           status
           additionalEvents
@@ -30,7 +35,14 @@ const queryPages = /* GraphQL */ `
             level
             speaker {
               name
-              info: pieceOfSpeakerInfoes(where: {conferenceEvent: {year: $eventYear, conferenceBrand: {title: $conferenceTitle}}}) {
+              info: pieceOfSpeakerInfoes(
+                where: {
+                  conferenceEvent: {
+                    year: $eventYear
+                    conferenceBrand: { title: $conferenceTitle }
+                  }
+                }
+              ) {
                 ...speakerInfo
               }
             }
@@ -58,26 +70,30 @@ const fetchData = async (client, vars) => {
           day.additionalEvents.find(({ title }) => title === ws.title)),
       })),
     ],
-    []
+    [],
   );
 
-
   const allWorkshops = await Promise.all(
     workshops.map(async wrp => ({
       ...wrp,
       description: await markdownToHtml(wrp.description),
       additionalInfo: await markdownToHtml(wrp.additionalInfo),
-    }))
+    })),
   );
 
-  const trainers = await Promise.all(await prepareSpeakers(allWorkshops.map(ws => ws.speaker.info[0])));
+  const trainers = await Promise.all(
+    await prepareSpeakers(
+      allWorkshops.map(ws => ws.speaker.info[0]),
+      {},
+    ),
+  );
 
   return {
     trainers,
     workshops: allWorkshops,
     speakers: {
-      workshops: trainers
-    }
+      workshops: trainers,
+    },
   };
 };
 

diff --git a/src/index.js b/src/index.js
@@ -76,6 +76,7 @@ const getContent = async conferenceSettings => {
     } catch (err) {}
     return { ...content, ...piece };
   }, {});
+  contentMap.conferenceSettings = conferenceSettings;
   return contentMap;
 };