Merge pull request #32 from fac19/ZTRI-32-markdown-to-jsx

Ztri 32 markdown to jsx

package.json

@@ -23,6 +23,7 @@
 		"@typescript-eslint/parser": "^3.2.0",
 		"airtable": "^0.8.1",
 		"inquirer": "^7.1.0",
+		"markdown-to-jsx": "^6.11.4",
 		"prop-types": "^15.7.2",
 		"react": "^16.13.1",
 		"react-dom": "^16.13.1",

src/App.js

@@ -7,7 +7,7 @@ import AllWorkshops from './components/Pages/AllWorkshops/AllWorkshops';
 import WorkshopOverview from './components/Pages/workshopOverview/WorkshopOverview';
 // import WorkshopFeedback from './components/Pages/WorkshopFeedback';
 // import WorkshopWorksheet from './components/Pages/WorkshopWorksheet';
-// import WorkshopContent from './components/Pages/WorkshopContent';
+import WorkshopContent from './components/Pages/WorkshopContent/WorkshopContent';
 
 import './App.css';
 
@@ -25,9 +25,9 @@ function App() {
 							</Route>
 							<Route exact path="/workshops" component={AllWorkshops} />
 							<Route exact path="/workshop/overview/:ID" component={WorkshopOverview} />
-							{/* <Route exact path="/workshop/feedback/:ID" component={WorkshopFeedback} />
+							{/* <Route exact path="/workshop/feedback/:ID" component={WorkshopFeedback} /> */}
 							<Route exact path="/workshop/content/:ID" component={WorkshopContent} />
-							<Route exact path="/workshop/worksheet/:ID" component={WorkshopWorksheet} /> */}
+							{/* <Route exact path="/workshop/worksheet/:ID" component={WorkshopWorksheet} /> */}
 						</Switch>
 					</main>
 				</div>

src/components/Pages/WorkshopContent/WorkshopContent.js

@@ -0,0 +1,57 @@
+import React, { useEffect } from 'react';
+import PropTypes from 'prop-types';
+// import Markdown from 'markdown-to-jsx';
+
+import * as SC from './style';
+
+import WorkshopHeader from '../../WorkshopHeader/WorkshopHeader';
+import BackButton from '../../buttons/BackButton';
+import PrimaryButton from '../../buttons/PrimaryButton';
+
+import getFromJSON from '../../../utils/getFromJSON';
+import api from '../../../api/api';
+
+export default function WorkshopContent({ match: { params } }) {
+	const [errorState, setErrorState] = React.useState('');
+	const [workshop, setWorkshop] = React.useState({});
+
+	useEffect(() => {
+		api
+			.getSpecificWorkshop(params.ID)
+			.then((res) => {
+				setWorkshop(getFromJSON(res));
+			})
+			.catch(() => {
+				setErrorState(
+					<h2>
+						<br />
+						<br />
+						This workshop couldnt be found
+					</h2>,
+				);
+			});
+	}, [params.ID]);
+
+	return (
+		<>
+			<WorkshopHeader images={workshop.images} date={workshop.date_created} tags={workshop.tags} title={workshop.title} />
+			<SC.MainContainer>
+				{/* <Markdown>{workshop.content}</Markdown> */}
+				<p>{workshop.content}</p>
+				<SC.ButtonsWrapper>
+					<BackButton />
+					<PrimaryButton innerText="DOWNLOAD ALL" />
+				</SC.ButtonsWrapper>
+				{errorState}
+			</SC.MainContainer>
+		</>
+	);
+}
+
+WorkshopContent.propTypes = {
+	match: PropTypes.shape({
+		params: PropTypes.shape({
+			ID: PropTypes.string,
+		}),
+	}).isRequired,
+};

src/components/Pages/WorkshopContent/style.js

@@ -0,0 +1,14 @@
+import styled from 'styled-components';
+import * as vars from '../../../styles/variables';
+
+export const MainContainer = styled.section`
+	display: flex;
+	flex-direction: column;
+	max-width: ${vars.mainContainerWidth};
+	margin: 0 auto;
+`;
+
+export const ButtonsWrapper = styled.div`
+	display: flex;
+	justify-content: space-between;
+`;

src/components/Pages/workshopOverview/MainSection.js

@@ -2,6 +2,8 @@ import React from 'react';
 import styled from 'styled-components';
 import PropTypes from 'prop-types';
 
+import { Link } from 'react-router-dom';
+
 import PrimaryButton from '../../buttons/PrimaryButton';
 import SecondaryButton from '../../buttons/SecondaryButton';
 
@@ -40,21 +42,22 @@ const ButtonWrapper = styled.div`
 	margin-top: 4rem;
 `;
 
-export default function Main({ content }) {
+export default function Main({ overview, id }) {
 	return (
 		<MainWrapper>
 			<ContentDiv>
 				<Title>Overview</Title>
-				<ContentText>{content}</ContentText>
+				<ContentText>{overview}</ContentText>
 			</ContentDiv>
 			<ButtonWrapper>
-				<PrimaryButton innerText="Workshop" />
+				<PrimaryButton as={Link} to={`/workshop/content/${id}`} innerText="Workshop" />
 				<SecondaryButton innerText="Submit Feedback" />
 			</ButtonWrapper>
 		</MainWrapper>
 	);
 }
 
 Main.propTypes = {
-	content: PropTypes.string.isRequired,
+	overview: PropTypes.string.isRequired,
+	id: PropTypes.string.isRequired,
 };

src/components/Pages/workshopOverview/WorkshopOverview.js

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import styled from 'styled-components';
 
 import api from '../../../api/api';
-import getFromJSON from './getFromJSON';
+import getFromJSON from '../../../utils/getFromJSON';
 
 import Intro from './TitleSection';
 import Main from './MainSection';
@@ -41,9 +41,10 @@ export default function WorkshopOverview({ match: { params } }) {
 		<MainContainer>
 			<WorkshopHeader images={workshop.images} date={workshop.date_created} tags={workshop.tags} title={workshop.title} />
 			<Intro authorArr={workshop.workshop_authors} equipment={null} />
-			<Main content={workshop.overview} />
+			<Main overview={workshop.overview} id={params.ID} />
 			<Comments feedbackArr={workshop.feedback} />
 			<BackButton to="/workshops" />
+
 			{errorState}
 		</MainContainer>
 	);

src/styles/variables.js

@@ -10,6 +10,7 @@ export const offWhite = '#fbf9fa';
 export const medButtonHeight = '42px';
 export const smallButtonHeight = '38px';
 export const titleBarVerticalPadding = '8px';
+export const mainContainerWidth = '700px';
 
 // font-families
 export const headerFont = 'DIN, sans-serif';