|
1 | | -import React, { useEffect } from "react"; |
| 1 | +import React, { useEffect } from 'react'; |
2 | 2 |
|
3 | | -import { Container } from "reactstrap"; |
4 | | -import { GatsbyImage, getImage } from "gatsby-plugin-image"; |
| 3 | +import { Container } from 'reactstrap'; |
| 4 | +import { GatsbyImage, getImage } from 'gatsby-plugin-image'; |
5 | 5 | import { documentToReactComponents } from "@contentful/rich-text-react-renderer"; |
6 | | -import { Link } from "gatsby"; |
7 | | -import PageHead from "../components/PageHead"; |
8 | | -import Page from "../components/Page"; |
9 | | -import { useLocaleContext } from "../contexts/LanguageContext"; |
| 6 | +import { Link } from 'gatsby'; |
| 7 | +import PageHead from '../components/PageHead'; |
| 8 | +import Page from '../components/Page'; |
| 9 | +import { useLocaleContext } from '../contexts/LanguageContext'; |
10 | 10 |
|
11 | 11 | import * as dataPageStyles from "../styles/dataPage.module.css"; |
12 | 12 | import * as dataStyles from "../styles/data.module.css"; |
13 | 13 |
|
14 | 14 | function DataPage(props) { |
15 | | - const { locale } = useLocaleContext(); |
16 | | - const url = props.pageContext.type + "s"; |
17 | | - const image = getImage(props.pageContext.image); |
18 | | - let socialMediaUrl, |
19 | | - altText, |
20 | | - appFormUrl = undefined; |
21 | 15 |
|
22 | | - switch (props.pageContext.type) { |
23 | | - case "speaker": |
24 | | - case "performer": |
25 | | - socialMediaUrl = props.pageContext.socialMediaUrl; |
26 | | - altText = "LINKEDIN"; |
27 | | - break; |
28 | | - case "workshop": |
29 | | - socialMediaUrl = props.pageContext.websiteUrl || "/"; |
30 | | - altText = locale === "el-GR" ? "ΙΣΤΟΣΕΛΙΔΑ" : "WEBSITE"; |
31 | | - appFormUrl = props.pageContext.applicationFormUrl || "#"; |
32 | | - break; |
33 | | - default: |
34 | | - throw new Error( |
35 | | - `Type ${props.pageContext.type} is invalid. Must be one of the following: speaker, performer, workshop` |
36 | | - ); |
37 | | - } |
| 16 | + const { locale } = useLocaleContext(); |
| 17 | + const url = props.pageContext.type + 's'; |
| 18 | + const image = getImage(props.pageContext.image); |
| 19 | + let socialMediaUrl, |
| 20 | + altText, |
| 21 | + appFormUrl = undefined; |
38 | 22 |
|
39 | | - useEffect(() => { |
40 | | - // scroll to top on initial render |
41 | | - document.body.scrollTo(0, 0); |
42 | | - }); |
| 23 | + switch(props.pageContext.type) { |
| 24 | + case 'speaker': |
| 25 | + case 'performer': |
| 26 | + socialMediaUrl = props.pageContext.socialMediaUrl; |
| 27 | + altText = 'LINKEDIN'; |
| 28 | + break; |
| 29 | + case 'workshop': |
| 30 | + socialMediaUrl = props.pageContext.websiteUrl; |
| 31 | + altText = (locale === 'el-GR') ? 'ΙΣΤΟΣΕΛΙΔΑ':'WEBSITE'; |
| 32 | + appFormUrl = props.pageContext.applicationFormUrl; |
| 33 | + break; |
| 34 | + default: |
| 35 | + throw new Error(`Type ${props.pageContext.type} is invalid. Must be one of the following: speaker, performer, workshop`); |
| 36 | + } |
43 | 37 |
|
44 | | - return ( |
45 | | - <Page currentPage={`/${url}/${props.pageContext.pageName}`}> |
46 | | - <PageHead pageTitle={props.pageContext[locale].name} /> |
47 | | - <Container className={dataPageStyles.dataPageContainer}> |
48 | | - <Link |
49 | | - to={`/${url}`} |
50 | | - className={` |
| 38 | + useEffect(() => { |
| 39 | + // scroll to top on initial render |
| 40 | + document.body.scrollTo(0, 0); |
| 41 | + }) |
| 42 | + |
| 43 | + return ( |
| 44 | + <Page currentPage={`/${url}/${props.pageContext.pageName}`}> |
| 45 | + <PageHead pageTitle={props.pageContext[locale].name} /> |
| 46 | + <Container className={dataPageStyles.dataPageContainer}> |
| 47 | + <Link to={`/${url}`} |
| 48 | + className={` |
51 | 49 | ${dataPageStyles.dataPageBackButton} |
52 | | - ${dataPageStyles.dataPageButton}`} |
53 | | - > |
54 | | - {locale === "el-GR" ? "ΠΙΣΩ" : "BACK"} |
55 | | - </Link> |
56 | | - <GatsbyImage |
57 | | - image={image} |
58 | | - className={` |
| 50 | + ${dataPageStyles.dataPageButton}`}> |
| 51 | + { (locale === 'el-GR') ? 'ΠΙΣΩ':'BACK' } |
| 52 | + </Link> |
| 53 | + <GatsbyImage image={image} |
| 54 | + className={` |
59 | 55 | ${dataPageStyles.dataPageImage} |
60 | 56 | ${dataStyles.image} |
61 | 57 | `} |
62 | | - alt={altText} |
63 | | - /> |
64 | | - <div className={dataPageStyles.dataPageSocialLinks}> |
65 | | - {socialMediaUrl && ( |
66 | | - <Link |
67 | | - to={socialMediaUrl} |
68 | | - className={` |
| 58 | + alt={altText} /> |
| 59 | + <div |
| 60 | + className={dataPageStyles.dataPageSocialLinks}> |
| 61 | + { |
| 62 | + socialMediaUrl && |
| 63 | + <Link to={socialMediaUrl} |
| 64 | + className={` |
69 | 65 | ${dataPageStyles.dataPageButton} |
70 | | - ${dataPageStyles.dataPageSocialButton}`} |
71 | | - > |
72 | | - {altText} |
73 | | - </Link> |
74 | | - )} |
75 | | - {appFormUrl != undefined && ( |
76 | | - <Link |
77 | | - to={appFormUrl} |
78 | | - className={` |
| 66 | + ${dataPageStyles.dataPageSocialButton}`}> |
| 67 | + {altText} |
| 68 | + </Link> |
| 69 | + } |
| 70 | + {appFormUrl != undefined && |
| 71 | + <Link to={appFormUrl} |
| 72 | + className={` |
79 | 73 | ${dataPageStyles.dataPageButton} |
80 | | - ${dataPageStyles.dataPageSocialButton}`} |
81 | | - > |
82 | | - {locale === "el-GR" |
83 | | - ? "ΔΙΕΚΔΙΚΗΣΕ ΤΗΝ ΘΕΣΗ ΣΟΥ" |
84 | | - : "CLAIM YOUR SPOT"} |
85 | | - </Link> |
86 | | - )} |
87 | | - </div> |
88 | | - <h3 className={dataPageStyles.dataPageMeta}> |
89 | | - {props.pageContext[locale].name} |
90 | | - </h3> |
91 | | - <h4 className={dataPageStyles.dataPageMeta}> |
92 | | - {props.pageContext[locale].speciality} |
93 | | - </h4> |
94 | | - <div> |
95 | | - <h3 className={dataPageStyles.dataPageSectionMeta}> |
96 | | - {locale === "el-GR" ? "Βιογραφικό:" : "Bio:"} |
97 | | - </h3> |
98 | | - <p className={dataPageStyles.dataPageBody}> |
99 | | - {/* {documentToReactComponents(JSON.parse(props.pageContext[locale].bio.raw))} */} |
100 | | - {props.pageContext[locale].bio?.raw ? ( |
101 | | - documentToReactComponents( |
102 | | - JSON.parse(props.pageContext[locale].bio.raw) |
103 | | - ) |
104 | | - ) : ( |
105 | | - <p>No bio available.</p> |
106 | | - )} |
107 | | - </p> |
108 | | - </div> |
109 | | - {appFormUrl != undefined && ( |
110 | | - <div> |
111 | | - <h3 className={dataPageStyles.dataPageSectionMeta}> |
112 | | - Workshop Description: |
113 | | - </h3> |
114 | | - <p className={dataPageStyles.dataPageBody}> |
115 | | - {documentToReactComponents( |
116 | | - JSON.parse(props.pageContext[locale].sideEventDescription.raw) |
117 | | - )} |
118 | | - </p> |
119 | | - </div> |
120 | | - )} |
121 | | - </Container> |
122 | | - </Page> |
123 | | - ); |
| 74 | + ${dataPageStyles.dataPageSocialButton}`}> |
| 75 | + {(locale === 'el-GR') ? 'ΔΙΕΚΔΙΚΗΣΕ ΤΗΝ ΘΕΣΗ ΣΟΥ':'CLAIM YOUR SPOT'} |
| 76 | + </Link> |
| 77 | + } |
| 78 | + </div> |
| 79 | + <h3 |
| 80 | + className={dataPageStyles.dataPageMeta}> |
| 81 | + {props.pageContext[locale].name} |
| 82 | + </h3> |
| 83 | + <h4 |
| 84 | + className={dataPageStyles.dataPageMeta}> |
| 85 | + {props.pageContext[locale].speciality} |
| 86 | + </h4> |
| 87 | + <div> |
| 88 | + <h3 |
| 89 | + className={dataPageStyles.dataPageSectionMeta}> |
| 90 | + {(locale === 'el-GR') ? 'Βιογραφικό:':'Bio:'} |
| 91 | + </h3> |
| 92 | + <p |
| 93 | + className={dataPageStyles.dataPageBody}> |
| 94 | + {/* {documentToReactComponents(JSON.parse(props.pageContext[locale].bio.raw))} */} |
| 95 | + {props.pageContext[locale].bio?.raw ? documentToReactComponents(JSON.parse(props.pageContext[locale].bio.raw)) : <p>No bio available.</p>} |
| 96 | + </p> |
| 97 | + </div> |
| 98 | + {appFormUrl != undefined && |
| 99 | + <div> |
| 100 | + <h3 |
| 101 | + className={dataPageStyles.dataPageSectionMeta}> |
| 102 | + Workshop Description: |
| 103 | + </h3> |
| 104 | + <p |
| 105 | + className={dataPageStyles.dataPageBody}> |
| 106 | + {documentToReactComponents(JSON.parse(props.pageContext[locale].sideEventDescription.raw))} |
| 107 | + </p> |
| 108 | + </div> |
| 109 | + } |
| 110 | + </Container> |
| 111 | + </Page> |
| 112 | + ); |
124 | 113 | } |
125 | 114 |
|
126 | 115 | export default DataPage; |
0 commit comments