Merge pull request #29 from coderbunker/avatar-link

[UPD] avatar to be linked to the corresponding profile

Author: Carms Ng

src/components/carousel-card.js

@@ -5,13 +5,13 @@ import { FiLinkedin, FiGithub, FiChevronLeft, FiChevronRight } from 'react-icons
 import { GatsbyImage } from "gatsby-plugin-image";
 import team from '../assets/content/team.json';
 
-export default function CarouselCard({pic, index, count, activeIndex, setActiveIndex}) {
+export default function CarouselCard({ pic, index, count, teamIndex, setTeamIndex }) {
   // handle carousel navigation
   const handlePrev = () => {
-    setActiveIndex(activeIndex - 1)
+    setTeamIndex(teamIndex - 1)
   }
   const handleNext = () => {
-    setActiveIndex(activeIndex + 1)
+    setTeamIndex(teamIndex + 1)
   }
 
   // set the person based on the image
@@ -20,7 +20,7 @@ export default function CarouselCard({pic, index, count, activeIndex, setActiveI
   })[0]
 
   return (
-    <CarouselCardStyles className={`${activeIndex === index ? "active" : ""}`}>
+    <CarouselCardStyles className={`${teamIndex === index ? "active" : ""}`}>
       <div className="flex md:flex-row-reverse overflow-hidden bg-peach md:bg-white">
         <GatsbyImage
           image={pic.node.childImageSharp.gatsbyImageData}

src/components/carousel.js

@@ -1,35 +1,42 @@
-import React, { useState } from 'react';
+import React from 'react';
 import { graphql, useStaticQuery } from 'gatsby';
 import CarouselCard from "./carousel-card";
 
-export default function Carousel() {
-  // state to determine the active slide for the carousel
-  const [activeIndex, setActiveIndex] = useState(0);
-
+export default function Carousel({ teamIndex, setTeamIndex }) {
   // query all team pics
   const data = useStaticQuery(graphql`{
-  allFile(filter: {absolutePath: {regex: "/portraits/"}}, sort: {fields: base}) {
-    edges {
-      node {
-        base
-        childImageSharp {
-          gatsbyImageData(
-            width: 500,
-            placeholder: BLURRED,
-            layout: CONSTRAINED
-          )
+    allFile(filter: {absolutePath: {regex: "/portraits/"}}, sort: {fields: base}) {
+      edges {
+        node {
+          id
+          base
+          childImageSharp {
+            gatsbyImageData(
+              width: 500,
+              placeholder: BLURRED,
+              layout: CONSTRAINED
+            )
+          }
         }
-        id
       }
     }
-  }
-}
-`);
+  }`);
+
   const pics = data.allFile.edges;
+
   return (
     <>
       {pics.map((pic, index) => {
-        return (<CarouselCard pic={pic} key={pic.node.id} index={index} count={pics.length} activeIndex={activeIndex} setActiveIndex={setActiveIndex}/>)
+        return (
+          <CarouselCard
+            pic={pic}
+            key={pic.node.id}
+            index={index}
+            count={pics.length}
+            teamIndex={teamIndex}
+            setTeamIndex={setTeamIndex}
+          />
+        )
       })}
     </>
   )

src/components/hero.js

@@ -7,7 +7,7 @@ import LogoGarden from '../components/logo-garden';
 import SiteBorderStyles from '../styles/SiteBorderStyles';
 import StackedAvatar from "./stacked-avatar";
 
-export default function Hero() {
+export default function Hero({ sectionRefs, setTeamIndex, pausedRef }) {
   return (
     <HeroStyles>
       <SiteBorderStyles>
@@ -25,7 +25,11 @@ export default function Hero() {
             <p className="text-1xl md:text-2xl mt-2">
               <Trans>We empower freelancer community to excel in long term projects.</Trans>
             </p>
-            <StackedAvatar />
+            <StackedAvatar
+              sectionRefs={sectionRefs}
+              setTeamIndex={setTeamIndex}
+              pausedRef={pausedRef}
+            />
 
           </div>
 

src/components/stacked-avatar.js

@@ -2,7 +2,7 @@ import * as React from "react";
 import { graphql, useStaticQuery } from 'gatsby';
 import { GatsbyImage } from "gatsby-plugin-image";
 
-export default function StackedAvatar() {
+export default function StackedAvatar({ sectionRefs, setTeamIndex, pausedRef }) {
   // query all team pics
   const data = useStaticQuery(graphql`{
     allFile(filter: {absolutePath: {regex: "/portraits/"}}, sort: {fields: base}) {
@@ -22,20 +22,36 @@ export default function StackedAvatar() {
     }
   }`);
 
+  const handleClick = (ev) => {
+    // Pause Observer
+    pausedRef.current = true
+    // Update Team Index
+    const updatedTeamIndex = parseInt(ev.currentTarget.dataset.team)
+    setTeamIndex(updatedTeamIndex)
+    // Find Team Section Top
+    const top = sectionRefs.current[2].offsetTop
+    // Navigate to the Team Section
+    window.scrollTo({ top, behavior: 'smooth' })
+    setTimeout(() => {
+      pausedRef.current = false
+    }, 1000);
+  }
+
   const pics = data.allFile.edges;
   return (
     <div className="py-8">
       {pics.map((pic, i) => {
         const zIndex = pics.length - i;
         const translateX = i * -30;
         return (
-          <GatsbyImage
-            image={pic.node.childImageSharp.gatsbyImageData}
-            className="inline-block rounded-full"
-            style={{width: `75px`, height: `75px`, zIndex: `${zIndex}`, border: `1px solid var(--white)`, transform: `translateX(${translateX}%)`}}
-            imgStyle={{objectPosition: `top center`}}
-            key={pic.node.childImageSharp.id}
-            alt="pic.node.base.split('.')[0]" />
+          <button data-team={i} onClick={handleClick} key={pic.node.childImageSharp.id}>
+            <GatsbyImage
+              image={pic.node.childImageSharp.gatsbyImageData}
+              className="inline-block rounded-full"
+              style={{width: `75px`, height: `75px`, zIndex: `${zIndex}`, border: `1px solid var(--white)`, transform: `translateX(${translateX}%)`}}
+              imgStyle={{objectPosition: `top center`}}
+              alt="pic.node.base.split('.')[0]" />
+          </button>
         );
       }).slice(0, 7)}
       {/* TODO: handle representation for members with count above 7 */}

src/components/team.js

@@ -6,7 +6,7 @@ import SiteBorderStyles from '../styles/SiteBorderStyles';
 import BackgroundImage from "./bg-image";
 import Carousel from "./carousel";
 
-export default function Team() {
+export default function Team({ teamIndex, setTeamIndex }) {
   return (
     <TeamStyles>
       <SiteBorderStyles className="wrapper">
@@ -23,7 +23,7 @@ export default function Team() {
           </p>
         </div>
         {/* Carousel */}
-        <Carousel />
+        <Carousel teamIndex={teamIndex} setTeamIndex={setTeamIndex} />
       </SiteBorderStyles>
       <div className="bg-img-wrapper">
         <BackgroundImage style={{width: `48vw`}}/>

src/pages/index.js

@@ -1,4 +1,4 @@
-import React, { useEffect, useRef } from "react"
+import React, { useState, useEffect, useRef } from "react"
 import { useTranslation } from 'gatsby-plugin-react-i18next';
 import { graphql } from 'gatsby';
 import Layout from "../components/layout"
@@ -14,7 +14,11 @@ import AOS from 'aos';
 import 'aos/dist/aos.css';
 
 export default function IndexPage() {
-  // you can access the elements with itemsRef.current[n]
+  // Set who in the team is being featured
+  const pausedRef = useRef(false);
+  const [teamIndex, setTeamIndex ] = useState(0);
+
+  // You can access the elements with itemsRef.current[n]
   const sectionRefs = useRef([]);
 
   // Compile all the refs
@@ -31,7 +35,7 @@ export default function IndexPage() {
 
     // Set up observer
     const observer = new IntersectionObserver(([entry]) => {
-      if (entry.isIntersecting) {
+      if (entry.isIntersecting && !pausedRef.current) {
         const refIndex = parseInt(entry.target.dataset.step)
         const top = sectionRefs.current[refIndex].offsetTop
         window.scrollTo({ top, behavior: 'smooth' })
@@ -54,15 +58,17 @@ export default function IndexPage() {
         }
       })
     }
-  }, [sectionRefs])
+  }, [sectionRefs, pausedRef])
 
   const {t} = useTranslation();
   return (
     <Layout>
       <Seo title={t('Home')} />
-      <div ref={addToRefs} data-step="0"><Hero /></div>
+      <div ref={addToRefs} data-step="0">
+        <Hero sectionRefs={sectionRefs} setTeamIndex={setTeamIndex} pausedRef={pausedRef} />
+      </div>
       <div ref={addToRefs} data-step="1"><Service /></div>
-      <div ref={addToRefs} data-step="2"><Team /></div>
+      <div ref={addToRefs} data-step="2"><Team teamIndex={teamIndex} setTeamIndex={setTeamIndex} /></div>
       <div ref={addToRefs} data-step="3"><Steps /></div>
       <div ref={addToRefs} data-step="4"><Join /></div>
       <div ref={addToRefs} data-step="5"><Contact /></div>