Update footer to use Directus API

hyperstudio · Oct 14, 2020 · 423ccac · 423ccac
1 parent c3973df
commit 423ccac
Show file tree

Hide file tree

Showing 4 changed files with 37 additions and 17 deletions.
diff --git a/src/components/_project/home/Footer/Person.js b/src/components/_project/home/Footer/Person.js
@@ -33,20 +33,17 @@ const TextWrapper = styled('div')`
 `;
 
 const Person = ({
-  name, organization, role, url,
+  name, organization, affiliation, url, photo,
 }) => {
-  const imgSrc = `https://res.cloudinary.com/podocu/image/upload/w_100,ar_1:1,c_fill,g_auto/v1551281230/university/hidden_perspectives/persons/${name.replace(
-    ' ',
-    '',
-  )}.png`;
+  const imgSrc = photo;
   return (
     <Wrapper href={url} target="_blank">
       <AvatarPlaceHolder src={imgSrc} />
       <TextWrapper>
         <Typography m={0} mt="-1px" type="body2">
           {name}
         </Typography>
-        {organization && role === 'initiator' && (
+        {organization && affiliation !== 'fhp' && (
         <Typography mt={0} mb={0} type="caption">
           {organization}
         </Typography>

diff --git a/src/components/_project/home/Footer/Persons.js b/src/components/_project/home/Footer/Persons.js
@@ -5,9 +5,11 @@ import Person from './Person';
 
 const Wrapper = styled('div')``;
 
-const Persons = ({ persons }) => (
+const Persons = ({ persons, photoUrls }) => (
   <Wrapper>
-    {persons.map((person) => <Person {...person} key={person.name} />)}
+    {persons.map((person) => (
+      <Person {...person} key={person.name} photo={photoUrls[person.photo]} />
+    ))}
   </Wrapper>
 );
 

diff --git a/src/components/_project/home/Footer/index.js b/src/components/_project/home/Footer/index.js
@@ -59,30 +59,41 @@ const MobileLogo = styled('div')`
 	`}
 `;
 
-const Footer = ({ contributors }) => {
+const Footer = ({ contributors, photoUrls }) => {
   const { data } = contributors;
-  const students = alphabeticalSort(data.filter((person) => person.role !== 'initiator'), 'name');
+  const students = alphabeticalSort(
+    data.filter((person) => person.affiliation === 'fhp'),
+    'name',
+  );
   const initiators = alphabeticalSort(
     data.filter((person) => person.role === 'initiator'),
     'name',
   );
+  const aai = alphabeticalSort(
+    data.filter((person) => person.affiliation === 'aai'),
+    'name',
+  );
   return (
     <Wrapper py={[6, 6, 6]}>
       <OuterWrapper rowWidth="wide">
         <Section>
           <Typography type="body2">This project was initiated by:</Typography>
-          <Persons persons={initiators} />
+          <Persons persons={initiators} photoUrls={photoUrls} />
           <LogoWrapper>
             <Logo />
           </LogoWrapper>
         </Section>
         <Section>
           <Typography type="body2">
             In close collaboration, this platform was designed, concepted and realized
-            between December ’18 and February ‘19 by students of the University of
+            between December &rsquo;18 and February &rsquo;19 by students of the University of
             Applied Sciences Potsdam:
           </Typography>
-          <Persons persons={students} />
+          <Persons persons={students} photoUrls={photoUrls} />
+          <Typography type="body2" mt="4">
+            Additional design and development in &rsquo;20 by:
+          </Typography>
+          <Persons persons={aai} photoUrls={photoUrls} />
           <MobileLogo>
             <Logo />
           </MobileLogo>

diff --git a/src/pages/index.js b/src/pages/index.js
@@ -1,3 +1,4 @@
+/* eslint-disable no-undef */
 import React from 'react';
 import styled, { ThemeProvider } from 'styled-components';
 import { space } from 'styled-system';
@@ -42,7 +43,7 @@ const ButtonWrapper = styled('div')`
 `;
 
 const Index = (props) => {
-  const { contributors } = props;
+  const { contributors, photoUrls } = props;
   return (
     <Wrapper>
       <HeaderWrapper py={[6]}>
@@ -154,7 +155,7 @@ const Index = (props) => {
         <>
           <FeatureWrapper>
             <Features />
-            <Footer contributors={contributors} />
+            <Footer contributors={contributors} photoUrls={photoUrls} />
           </FeatureWrapper>
         </>
       </ThemeProvider>
@@ -163,12 +164,21 @@ const Index = (props) => {
 };
 
 export async function getStaticProps() {
-  // eslint-disable-next-line no-undef
   const res = await fetch(`${process.env.API_URL}/items/contributors`);
   const contributors = await res.json();
+  const photoUrls = {};
+  await Promise.all(contributors.data.map(async (contributor) => {
+    const { photo } = contributor;
+    const photoRes = photo
+      ? await fetch(`${process.env.API_URL}/files/${photo}`)
+      : await fetch(`${process.env.API_URL}/files/11`);
+    const { data } = await photoRes.json();
+    const photoUrl = `${process.env.API_URL}/assets/${data.private_hash}`;
+    photoUrls[contributor.photo] = photoUrl;
+  }));
 
   return {
-    props: { contributors }, // will be passed to the page component as props
+    props: { contributors, photoUrls }, // will be passed to the page component as props
   };
 }