error proofing

hack4impact-upenn · Aug 5, 2022 · 0bc2b96 · 0bc2b96
1 parent ed838d9
commit 0bc2b96
Show file tree

Hide file tree

Showing 9 changed files with 87 additions and 54 deletions.
diff --git a/components/CoDirectorIcon.jsx b/components/CoDirectorIcon.jsx
@@ -3,7 +3,7 @@ import { Col, Card } from 'reactstrap';
 
 const CoDirectorIcon = ({ name, title, image, memberSlug, linkedIn }) => {
   return (
-    <Col xs={image?.url ? '6' : '6'} md="6">
+    <Col md="3">
       <Card className="border-0 member-icon">
         <div className="text-center">
           <a href={memberSlug}>

diff --git a/components/about/ExecBoard.jsx b/components/about/ExecBoard.jsx
@@ -7,7 +7,7 @@ function ExecBoard({ execBoard }) {
   return (
     <Container>
       <h3 className="p-2 m-3 center">Co-Directors</h3>
-      <Row>
+      <Row className="justify-content-md-center">
         {execBoard
           .filter((x) => x.title === 'Co-Director')
           .map((member) => (

diff --git a/components/gradientBanner.jsx b/components/gradientBanner.jsx
@@ -21,23 +21,21 @@ const GradientBanner = ({ title, subHeadline, style, arrow, children }) => (
             </Spring>
           </Col>
           {subHeadline && (
-            <Row>
-              <Spring
-                config={{ delay: 500 }}
-                from={{ opacity: 0, transform: 'translate3d(-100px,0,0)' }}
-                to={{ opacity: 100, transform: 'translate3d(0,0px,0)' }}>
-                {(props) => (
-                  <div style={props} className="text-center sub-headline">
-                    {/* if it has a json key, we'll assume it's Rich Text from Contentful */}
-                    {subHeadline.json ? (
-                      <ContentBlock content={subHeadline.json} />
-                    ) : (
-                      <p>{subHeadline}</p>
-                    )}
-                  </div>
-                )}
-              </Spring>
-            </Row>
+            <Spring
+              config={{ delay: 500 }}
+              from={{ opacity: 0, transform: 'translate3d(-100px,0,0)' }}
+              to={{ opacity: 100, transform: 'translate3d(0,0px,0)' }}>
+              {(props) => (
+                <div style={props} className="text-center sub-headline">
+                  {/* if it has a json key, we'll assume it's Rich Text from Contentful */}
+                  {subHeadline.json ? (
+                    <ContentBlock content={subHeadline.json} />
+                  ) : (
+                    <p>{subHeadline}</p>
+                  )}
+                </div>
+              )}
+            </Spring>
           )}
           <Row className="w-100 pt-4">
             <Spring

diff --git a/components/projects/featureSlider.jsx b/components/projects/featureSlider.jsx
@@ -5,7 +5,6 @@ import ContentBlock from '../ContentBlock';
 
 function FeatureSlider({ features }) {
   const [currFeatureHeader, setCurrFeatureHeader] = React.useState(features[0].header);
-
   return (
     <>
       <section className="pb-0">
@@ -45,7 +44,7 @@ function FeatureSlider({ features }) {
                     onClick={() => setCurrFeatureHeader(header)}>
                     <div className="pl-3">
                       <h3 className="feature-title">{header}</h3>
-                      <ContentBlock content={body.json} />
+                      {body && <ContentBlock content={body.json} />}
                     </div>
                   </button>
                 </Row>

diff --git a/components/projects/projectCard.jsx b/components/projects/projectCard.jsx
@@ -7,10 +7,15 @@ function ProjectCard({ title, thumbnail, urlSlug, description }) {
   return (
     <>
       <Card className="bg-light mb-3 project-card h-100" style={{ height: '100%' }}>
-        <img className="card-img-top" src={thumbnail.url} alt={thumbnail.description} />
+        <img
+          className="card-img-top"
+          style={{ height: '100p', height: '200px' }}
+          src={thumbnail.url}
+          alt={thumbnail.description}
+        />
         <CardBody>
           <h3 className="text-center">{title}</h3>
-          <div className="text-center">
+          <div className="text-center" style={{ maxHeight: '200px', overflow: 'auto' }}>
             <ContentBlock content={description.json} />
           </div>
           <div className="text-center action-btn-box">

diff --git a/components/projects/projectList.jsx b/components/projects/projectList.jsx
@@ -2,31 +2,34 @@ import Section from '../section';
 import { Container, Row, Col } from 'reactstrap';
 import ProjectCard from './projectCard';
 import groupBy from '../../utils/groupBy';
+import groupByYearSort from '../../utils/projectYear';
 
 export default function ProjectList({ projects }) {
   const projectsByCompletion = groupBy(projects, 'completedIn');
   return (
     <Section>
       <Container>
-        {Object.entries(projectsByCompletion).map(([completedIn, projects]) => (
-          <div key={completedIn}>
-            <Row>
-              <h2 className="section-title center">{completedIn}</h2>
-            </Row>
-            <Row>
-              {projects.map(({ title, description, thumbnail, urlSlug }) => (
-                <Col md="4" sm="6" style={{ marginBottom: '25px' }} key={urlSlug}>
-                  <ProjectCard
-                    title={title}
-                    description={description}
-                    thumbnail={thumbnail}
-                    urlSlug={urlSlug}
-                  />
-                </Col>
-              ))}
-            </Row>
-          </div>
-        ))}
+        {Object.entries(projectsByCompletion)
+          .sort(groupByYearSort)
+          .map(([completedIn, projects]) => (
+            <div key={completedIn}>
+              <Row>
+                <h2 className="section-title center">{completedIn}</h2>
+              </Row>
+              <Row>
+                {projects.map(({ title, description, thumbnail, urlSlug }) => (
+                  <Col md="4" sm="6" style={{ marginBottom: '25px' }} key={urlSlug}>
+                    <ProjectCard
+                      title={title}
+                      description={description}
+                      thumbnail={thumbnail}
+                      urlSlug={urlSlug}
+                    />
+                  </Col>
+                ))}
+              </Row>
+            </div>
+          ))}
       </Container>
     </Section>
   );

diff --git a/components/projects/projectTechUsed.jsx b/components/projects/projectTechUsed.jsx
@@ -158,6 +158,11 @@ const icons = {
 };
 
 function ProjectTechUsed({ technologiesUsed }) {
+  console.log(
+    Object.entries(icons)
+      .map((entry) => entry[0])
+      .join(', '),
+  );
   return technologiesUsed?.length ? (
     <Section>
       <Container>
@@ -166,16 +171,31 @@ function ProjectTechUsed({ technologiesUsed }) {
           {technologiesUsed.map((tech) => (
             <Col md="2" xs="6" key={tech}>
               <Card className="border-0">
-                <a href={icons[tech].link}>
-                  <img
-                    src={icons[tech].imgPath}
-                    className="img-thumbnail img-fluid tech-stack-img"
-                    alt={icons[tech].title}
-                  />
-                </a>
-                <a href={icons[tech].link} className="text-center tech-stack-link">
-                  {icons[tech].title}
-                </a>
+                {icons[tech] ? (
+                  <>
+                    <a href={icons[tech].link}>
+                      <img
+                        src={icons[tech].imgPath}
+                        className="img-thumbnail img-fluid tech-stack-img"
+                        alt={icons[tech].title}
+                      />
+                    </a>
+                    <a href={icons[tech].link} className="text-center tech-stack-link">
+                      {icons[tech].title}
+                    </a>{' '}
+                  </>
+                ) : (
+                  <>
+                    <a>
+                      <img
+                        src={'/icons/favicon-200.png'}
+                        className="img-thumbnail img-fluid tech-stack-img"
+                        alt={tech}
+                      />
+                    </a>
+                    <a className="text-center tech-stack-link">{tech}</a>{' '}
+                  </>
+                )}
               </Card>
             </Col>
           ))}

diff --git a/pages/projects/[projectSlug].jsx b/pages/projects/[projectSlug].jsx
@@ -38,7 +38,9 @@ function ProjectPage({
             </ActionButton>
           </>
         ) : (
-          <ActionButton white link={codeRepoLink}>
+          <ActionButton
+            white
+            link={codeRepoLink ? codeRepoLink : 'https://github.com/hack4impact-upenn'}>
             See our code
           </ActionButton>
         )}
@@ -83,7 +85,8 @@ function ProjectPage({
           />
         );
       })}
-      <Team members={teamMembersCollection.items} />
+      {teamMembersCollection.items.size > 0 && <Team members={teamMembersCollection.items} />}
+
       <Row className="d-flex justify-content-center mb-5">
         <ActionButton white link="/projects">
           See more of our projects

diff --git a/utils/projectYear.js b/utils/projectYear.js
@@ -0,0 +1,5 @@
+export default function groupByYearSort(a, b) {
+  const yearA = parseInt(a[0].split(' ')[1]);
+  const yearB = parseInt(b[0].split(' ')[1]);
+  return yearB - yearA;
+}