Skip to content

Commit 187b521

Browse files
author
Carms Ng
committed
[UPD] GraphQL Queries for json passed info to corresponding components
1 parent 3450be3 commit 187b521

File tree

3 files changed

+84
-74
lines changed

3 files changed

+84
-74
lines changed

‎src/components/carousel-card.js

Lines changed: 15 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
11
import * as React from "react";
2-
import { Trans } from 'gatsby-plugin-react-i18next';
32
import styled from 'styled-components';
43
import { FiLinkedin, FiGithub, FiChevronLeft, FiChevronRight } from 'react-icons/fi';
54
import { GatsbyImage } from "gatsby-plugin-image";
6-
import team from '../assets/content/team.json';
75

8-
export default function CarouselCard({ pic, index, count, teamIndex, setTeamIndex }) {
6+
export default function CarouselCard({ member, index, count, teamIndex, setTeamIndex }) {
7+
const { name, title, linkedin, github, image, highlights } = member
8+
99
// handle carousel navigation
1010
const handlePrev = () => {
1111
setTeamIndex(teamIndex - 1)
@@ -14,56 +14,37 @@ export default function CarouselCard({ pic, index, count, teamIndex, setTeamInde
1414
setTeamIndex(teamIndex + 1)
1515
}
1616

17-
// set the person based on the image
18-
const person = team.content.filter(member => {
19-
return member.image === pic.node.base;
20-
})[0]
21-
2217
return (
2318
<CarouselCardStyles className={`${teamIndex === index ? "active" : ""}`}>
2419
<div className="flex md:flex-row-reverse overflow-hidden bg-peach md:bg-white">
2520
<GatsbyImage
26-
image={pic.node.childImageSharp.gatsbyImageData}
21+
image={image.childImageSharp.gatsbyImageData}
2722
className="w-1/3-vw h-1/3-vw md:w-1/3 md:h-auto"
2823
imgStyle={{objectPosition: `top center`}}
29-
alt={pic.node.base.split('.')[0]}
30-
width={500}/>
31-
24+
alt={name}
25+
/>
3226
<div className="p-4 md:p-8 w-2/3">
3327
<div className="flex flex-col md:flex-row justify-between h-full md:h-auto">
3428
<div>
35-
<h3 className="sm:text-2xl sm:mb-2">{person.name}</h3>
36-
<p className="sm:text-xl">
37-
<Trans>{person.title}</Trans>
38-
</p>
29+
<h3 className="sm:text-2xl sm:mb-2">{name}</h3>
30+
<p className="sm:text-xl">{title}</p>
3931
</div>
4032
<div className="text-xl sm:text-2xl md:text-3xl flex">
41-
<a href={person.linkedin} aria-label="social media icon Linkedin" target="_blank" rel="noreferrer"><FiLinkedin className="mr-3"/></a>
42-
<a href={person.github} aria-label="social media icon Github" target="_blank" rel="noreferrer"><FiGithub className="md:ml-3"/></a>
33+
<a href={linkedin} aria-label="social media icon Linkedin" target="_blank" rel="noreferrer"><FiLinkedin className="mr-3"/></a>
34+
<a href={github} aria-label="social media icon Github" target="_blank" rel="noreferrer"><FiGithub className="md:ml-3"/></a>
4335
</div>
4436
</div>
45-
37+
{/* Highlights for large screens, show all */}
4638
<ul className="py-4 hidden md:block" style={{height: `312px`}}>
47-
{person.highlights.map(hl => {
48-
return (
49-
<li key={hl}>
50-
<Trans>{hl}</Trans>
51-
</li>
52-
)
53-
})}
39+
{highlights.map(hl => <li key={hl}>{hl}</li>)}
5440
</ul>
5541
</div>
5642
</div>
43+
{/* highlights for small screen, show first few */}
5744
<ul className="py-4 block md:hidden">
58-
{person.highlights.slice(0, 3).map((hl, i) => {
59-
return (
60-
<li key={hl + i}>
61-
<Trans>{hl}</Trans>
62-
</li>
63-
)
64-
})}
45+
{highlights.slice(0, 3).map((hl, i) => <li key={hl + i}>{hl}</li>)}
6546
</ul>
66-
{/* Button */}
47+
{/* Button to navigate prev and next */}
6748
<div className="carousel-btns">
6849
<button onClick={handlePrev} className="text-2xl p-4" disabled={index === 0}>
6950
<FiChevronLeft />

‎src/components/carousel.js

Lines changed: 46 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -2,37 +2,63 @@ import React from 'react';
22
import { graphql, useStaticQuery } from 'gatsby';
33
import CarouselCard from "./carousel-card";
44

5-
export default function Carousel({ teamIndex, setTeamIndex }) {
6-
// query all team pics
7-
const data = useStaticQuery(graphql`{
8-
allFile(filter: {absolutePath: {regex: "/portraits/"}}, sort: {fields: base}) {
9-
edges {
10-
node {
11-
id
12-
base
13-
childImageSharp {
14-
gatsbyImageData(
15-
width: 500,
16-
placeholder: BLURRED,
17-
layout: CONSTRAINED
18-
)
5+
export default function Carousel({ teamIndex, setTeamIndex, locale }) {
6+
// Query all team member info
7+
const { content } = useStaticQuery(graphql`{
8+
content: allContentJson {
9+
group(field: parent___children) {
10+
nodes {
11+
en {
12+
name
13+
title
14+
linkedin
15+
image {
16+
childImageSharp {
17+
gatsbyImageData(
18+
width: 500,
19+
placeholder: BLURRED,
20+
layout: CONSTRAINED
21+
)
22+
}
23+
}
24+
highlights
25+
github
26+
}
27+
fr {
28+
name
29+
title
30+
linkedin
31+
image {
32+
childImageSharp {
33+
gatsbyImageData(
34+
width: 500,
35+
placeholder: BLURRED,
36+
layout: CONSTRAINED
37+
)
38+
}
39+
}
40+
highlights
41+
github
1942
}
2043
}
2144
}
2245
}
2346
}`);
2447

25-
const pics = data.allFile.edges;
48+
const members = content.group[0].nodes
49+
const membersLocalized = members.map(member => member[locale])
2650

2751
return (
2852
<>
29-
{pics.map((pic, index) => {
30-
return (
53+
{membersLocalized.map((member, index) => {
54+
return(
3155
<CarouselCard
32-
pic={pic}
33-
key={pic.node.id}
56+
member={member}
57+
key={member.github}
58+
// pic={pic}
59+
// key={pic.node.id}
3460
index={index}
35-
count={pics.length}
61+
count={members.length}
3662
teamIndex={teamIndex}
3763
setTeamIndex={setTeamIndex}
3864
/>

‎src/components/stacked-avatar.js

Lines changed: 23 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -3,19 +3,20 @@ import { graphql, useStaticQuery } from 'gatsby';
33
import { GatsbyImage } from "gatsby-plugin-image";
44

55
export default function StackedAvatar({ sectionRefs, setTeamIndex, pausedRef }) {
6-
// query all team pics
7-
const data = useStaticQuery(graphql`{
8-
allFile(filter: {absolutePath: {regex: "/portraits/"}}, sort: {fields: base}) {
9-
edges {
10-
node {
11-
base
12-
childImageSharp {
13-
gatsbyImageData(
14-
width: 75,
15-
placeholder: BLURRED,
16-
layout: FIXED
17-
)
18-
id
6+
// query all team name and image
7+
const { content } = useStaticQuery(graphql`{
8+
content: allContentJson {
9+
nodes {
10+
en {
11+
name
12+
image {
13+
childImageSharp {
14+
gatsbyImageData(
15+
width: 500,
16+
placeholder: BLURRED,
17+
layout: CONSTRAINED
18+
)
19+
}
1920
}
2021
}
2122
}
@@ -37,20 +38,22 @@ export default function StackedAvatar({ sectionRefs, setTeamIndex, pausedRef })
3738
}, 1000);
3839
}
3940

40-
const pics = data.allFile.edges;
41+
const members = content.nodes.map(member => member.en)
42+
4143
return (
4244
<div className="py-8">
43-
{pics.map((pic, i) => {
44-
const zIndex = pics.length - i;
45-
const translateX = i * -30;
45+
{members.map((member, i) => {
46+
const { name, image } = member
47+
const zIndex = members.length - i;
48+
const translateX = i * - 30;
4649
return (
47-
<button data-team={i} onClick={handleClick} key={pic.node.childImageSharp.id}>
50+
<button data-team={i} onClick={handleClick} key={`avatar-${name}`}>
4851
<GatsbyImage
49-
image={pic.node.childImageSharp.gatsbyImageData}
52+
image={image.childImageSharp.gatsbyImageData}
5053
className="inline-block rounded-full"
5154
style={{width: `75px`, height: `75px`, zIndex: `${zIndex}`, border: `1px solid var(--white)`, transform: `translateX(${translateX}%)`}}
5255
imgStyle={{objectPosition: `top center`}}
53-
alt="pic.node.base.split('.')[0]" />
56+
alt={name} />
5457
</button>
5558
);
5659
}).slice(0, 7)}

0 commit comments

Comments
 (0)