Pull sanity data for curated instructor pages #602

zacjones93 · 2021-04-28T23:36:16Z

All of our curated instructor data is currently hard coded on the front end.

This loads instructor data from sanity and passes it into curated instructor pages as sanityInstructor

One note, the linter was going ham on all the files so I committed with no-verify. Not sure what would have changed there but would like someone to run this on their machine.

vercel · 2021-04-28T23:36:19Z

This pull request is being automatically deployed with Vercel (learn more).
To see the status of your deployments, click below or on the icon next to each commit.

egghead-next-storybook – ./

🔍 Inspect: https://vercel.com/eggheadio/egghead-next-storybook/5dNQhpbxRvPvE1ot9y2MRDfN8zC5
✅ Preview: https://egghead-next-s-git-zj-update-stephanie-eckles-landing-pa-dff5b0.vercel.app

egghead-io-nextjs – ./

🔍 Inspect: https://vercel.com/eggheadio/egghead-io-nextjs/6kou3xL2pFJtvSMwTuZBECJWEbCB
✅ Preview: https://egghead-io-nex-git-zj-update-stephanie-eckles-landing-pa-08cc7c.vercel.app

zacjones93 · 2021-04-28T23:36:42Z

src/components/search/index.tsx

+                <InstructorCuratedPage
+                  instructor={instructor}
+                  sanityInstructor={sanityInstructor}
+                />


pass sanity data down

zacjones93 · 2021-04-28T23:37:01Z

src/components/search/instructors/index.tsx

@@ -14,6 +15,7 @@ const InstructorsIndex: any = {
  'flavio-corpa': SearchFlavioCorpa,
  'hiro-nishimura': SearchHirokoNishimura,
  'chris-biscardi': SearchChrisBiscardi,
+  'stephanie-eckles': SearchStephanieEckles,


add stephanie to the instructors index for curated pages

zacjones93 · 2021-04-28T23:38:30Z

src/components/search/instructors/stephanie-eckles/index.tsx

+      <SearchInstructorEssential
+        instructor={combinedInstructor}
+        CTAComponent={
+          <CssFormStyling
+            resource={primaryCourse}
+            location="Stephanie Eckles instructor page"
+          />
+        }
+      />
+      <section className="grid grid-cols-4 gap-3 -mt-10 mb-10 pb-10 xl:px-0 px-5 max-w-screen-xl mx-auto dark:bg-gray-900 w-full">
+        <ProjectStack className="col-span-1" data={projects.resources} />
+        <div className="col-span-3 grid grid-cols-2 gap-3">
+          <CardHorizontal className="col-span-2" resource={secondCourse} />
+          <CardHorizontal className="col-span-1" resource={thirdCourse} />
+          <CardHorizontal className="col-span-1" resource={fourthCourse} />
+        </div>
+      </section>
+    </div>


display courses and projects on page

zacjones93 · 2021-04-28T23:38:46Z

src/components/search/instructors/stephanie-eckles/index.tsx

+export const stephanieEcklesQuery = groq`*[_type == 'resource' && slug.current == "stephanie-eckles-landing-page"][0]{
+	'projects': resources[slug.current == 'instructor-landing-page-projects'][0]{
+    resources[]{
+      title,
+      'path': url,
+      description,
+      image
+    }
+},
+	'courses': resources[slug.current == 'instructor-landing-page-featured-courses'][0]{
+    resources[]->{
+      title,
+      'description': summary,
+    	path,
+      byline,
+    	image,
+      'background': images[label == 'feature-card-background'][0].url,
+      'instructor': collaborators[]->[role == 'instructor'][0]{
+      	'name': person->.name
+    	},
+    }
+  },
+}`


sanity query

zacjones93 · 2021-04-28T23:42:45Z

src/lib/instructors.ts

+
+const sanityInstructorHash = {
+  'stephanie-eckles': stephanieEcklesQuery,
+}
+
+type SelectedInstructor = keyof typeof sanityInstructorHash
+
+const canLoadSanityInstructor = (
+  selectedInstructor: string,
+): selectedInstructor is SelectedInstructor => {
+  const keyNames = Object.keys(sanityInstructorHash)
+
+  return keyNames.includes(selectedInstructor)
+}
+
+export const loadSanityInstructor = async (selectedInstructor: string) => {
+  if (!canLoadSanityInstructor(selectedInstructor)) return
+
+  const query = sanityInstructorHash[selectedInstructor]
+  if (!query) return
+
+  return await sanityClient.fetch(query)
+}


@theianjones helped me implement this.

loadSanityInstructor uses a type guard (canLoadSanityInstructor) to check that the instructor slug (the one that will be passed in via getServerSideProps) is present in the defined sanityInstructorHash as a key. If it is, that key is associated with the query that it will call.

This makes sure that we are only querying for instructor data on the pages that we want to load sanity data onto.

zacjones93 · 2021-04-28T23:44:22Z

src/pages/q/[[...all]].tsx

    try {
      initialInstructor = await loadInstructor(instructorSlug)
+
+      sanityInstructor = await loadSanityInstructor(instructorSlug)
    } catch (error) {


When an instructor filter is selected we will load sanity data (if it passes the type guard)

joelhooks · 2021-04-28T23:52:21Z

src/components/search/index.tsx

@@ -34,6 +34,7 @@ type SearchProps = {
  searchClient?: any
  searchState?: any
  instructor?: any


this stands out to me. I do t like “sanity” as special data. could we merge this into a si file “instructor” object so it’s “just an instructor” and then display data based on the shape of instructor and the available properties

joelhooks · 2021-04-28T23:53:43Z

src/components/search/instructors/stephanie-eckles/index.tsx

+  instructor: any
+  sanityInstructor: any
+}) {
+  const combinedInstructor = {...instructor}


this could actually be combined at a higher level

joelhooks · 2021-04-28T23:57:45Z

src/pages/q/[[...all]].tsx

@@ -211,6 +215,8 @@ export const getServerSideProps: GetServerSideProps = async function ({
    )
    try {
      initialInstructor = await loadInstructor(instructorSlug)
+


here’s where I’d consider a single “load instructor” that loads from all sources

zacjones93 · 2021-04-29T15:57:22Z

src/pages/q/[[...all]].tsx

+      sanityInstructor = await loadSanityInstructor(instructorSlug)
+
+      initialInstructor = {
+        ...initialInstructor,
+        ...sanityInstructor,
+      }


None of the data is being overridden but it makes sense to me that sanity data would take precedence over the initialInstructor data

I think this pattern makes a lot of sense so we don't have two+ data sources at the component, we just bring it together at the server level.

since we are using a stale-while-revalidate cache header, it should be performant!

I agree, it was also super easy to refactor

laurosilvacom · 2021-04-29T20:38:06Z

src/components/search/instructors/stephanie-eckles/index.tsx

+      <section className="grid grid-cols-4 gap-3 -mt-10 mb-10 pb-10 xl:px-0 px-5 max-w-screen-xl mx-auto dark:bg-gray-900 w-full">
+        <ProjectStack className="col-span-1" data={projects.resources} />
+        <div className="col-span-3 grid grid-cols-2 gap-3">
+          <CardHorizontal className="col-span-2" resource={secondCourse} />
+          <CardHorizontal className="col-span-1" resource={thirdCourse} />
+          <CardHorizontal className="col-span-1" resource={fourthCourse} />
+        </div>
+      </section>
+    </div>


This layout needs work at all breakpoints. Using the CardHorizontal component doesn't seem to be the right approach for this layout.

laurosilvacom · 2021-04-29T20:59:56Z

src/components/search/instructors/stephanie-eckles/index.tsx

+                          </div>
+                        </a>
+                      </Link>
+                    )}


The description is awkward and lacks legibility. I would consider exploring expanding the project section or a smaller font.

laurosilvacom · 2021-05-04T17:33:26Z

src/lib/instructors.ts

@@ -36,3 +39,26 @@ export async function loadInstructor(slug: string) {

  return instructor
 }
+
+const sanityInstructorHash = {
+  'stephanie-eckles': stephanieEcklesQuery,


I like this pattern!

zacjones93 added 4 commits April 28, 2021 14:31

start

8618440

source instructor data from sanity for instructor page

782882e

extract items into lib folder

79c8f54

add darkmode support for text

d9e2f5b

zacjones93 requested review from joelhooks, MaggieAppleton, vojtaholik and laurosilvacom April 28, 2021 23:36

remove console logs

131f3d1

vercel bot deployed to Preview – egghead-next-storybook April 28, 2021 23:42 View deployment

zacjones93 commented Apr 28, 2021

View reviewed changes

vercel bot deployed to Preview – egghead-io-nextjs April 28, 2021 23:45 View deployment

joelhooks reviewed Apr 28, 2021

View reviewed changes

merge sanity data with graphql

b33278d

vercel bot deployed to Preview – egghead-io-nextjs April 29, 2021 15:55 View deployment

vercel bot deployed to Preview – egghead-next-storybook April 29, 2021 15:55 View deployment

zacjones93 requested a review from joelhooks April 29, 2021 15:55

zacjones93 commented Apr 29, 2021

View reviewed changes

Merge branch 'main' into zj/update-stephanie-eckles-landing-page

9100b3a

vercel bot deployed to Preview – egghead-io-nextjs April 29, 2021 19:19 View deployment

vercel bot deployed to Preview – egghead-next-storybook April 29, 2021 19:19 View deployment

laurosilvacom reviewed Apr 29, 2021

View reviewed changes

zacjones93 added 2 commits May 4, 2021 11:26

style cards

69b01a2

merge with upstream

8b8df4c

vercel bot deployed to Preview – egghead-next-storybook May 4, 2021 15:27 View deployment

vercel bot deployed to Preview – egghead-io-nextjs May 4, 2021 15:27 View deployment

fix grid

02e682c

vercel bot deployed to Preview – egghead-io-nextjs May 4, 2021 15:48 View deployment

vercel bot deployed to Preview – egghead-next-storybook May 4, 2021 15:48 View deployment

Fix flex

44cc2c1

vercel bot deployed to Preview – egghead-next-storybook May 4, 2021 16:21 View deployment

vercel bot deployed to Preview – egghead-io-nextjs May 4, 2021 16:21 View deployment

laurosilvacom self-requested a review May 4, 2021 17:29

Merge branch 'main' into zj/update-stephanie-eckles-landing-page

21cc2c0

vercel bot had a problem deploying to Preview – egghead-next-storybook May 4, 2021 17:30 Failure

vercel bot had a problem deploying to Preview – egghead-io-nextjs May 4, 2021 17:30 Failure

laurosilvacom approved these changes May 4, 2021

View reviewed changes

Merge branch 'main' into zj/update-stephanie-eckles-landing-page

c60e68d

vercel bot deployed to Preview – egghead-io-nextjs May 4, 2021 18:03 View deployment

vercel bot deployed to Preview – egghead-next-storybook May 4, 2021 18:03 View deployment

Merge branch 'main' into zj/update-stephanie-eckles-landing-page

d769a98

vercel bot deployed to Preview – egghead-io-nextjs May 4, 2021 18:53 View deployment

vercel bot deployed to Preview – egghead-next-storybook May 4, 2021 18:53 View deployment

kodiakhq bot merged commit baf845a into main May 4, 2021

kodiakhq bot deleted the zj/update-stephanie-eckles-landing-page branch May 4, 2021 19:06

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Pull sanity data for curated instructor pages #602

Pull sanity data for curated instructor pages #602

zacjones93 commented Apr 28, 2021

vercel bot commented Apr 28, 2021 •

edited

Loading

zacjones93 Apr 28, 2021

zacjones93 Apr 28, 2021

zacjones93 Apr 28, 2021

zacjones93 Apr 28, 2021

zacjones93 Apr 28, 2021

zacjones93 Apr 28, 2021

joelhooks Apr 28, 2021

joelhooks Apr 28, 2021

joelhooks Apr 28, 2021

zacjones93 Apr 29, 2021

joelhooks Apr 29, 2021

joelhooks Apr 29, 2021

zacjones93 Apr 29, 2021

laurosilvacom Apr 29, 2021

laurosilvacom Apr 29, 2021

laurosilvacom May 4, 2021

Pull sanity data for curated instructor pages #602

Pull sanity data for curated instructor pages #602

Conversation

zacjones93 commented Apr 28, 2021

vercel bot commented Apr 28, 2021 • edited Loading

egghead-next-storybook – ./

egghead-io-nextjs – ./

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

vercel bot commented Apr 28, 2021 •

edited

Loading