Create PolicyContainer component, add terms of use

Author: catarak

client/modules/IDE/components/PolicyContainer.jsx

@@ -0,0 +1,51 @@
+import React from 'react';
+import styled from 'styled-components';
+import ReactMarkdown from 'react-markdown';
+import remarkSlug from 'remark-slug';
+import PropTypes from 'prop-types';
+import { remSize } from '../../../theme';
+
+const PolicyContainerMain = styled.main`
+  max-width: ${remSize(700)};
+  margin: 0 auto;
+  padding: ${remSize(10)};
+  line-height: 1.5em;
+  & p {
+    margin-bottom: ${remSize(10)};
+  }
+  font-size: ${remSize(16)};
+  & h1 {
+    font-size: 2em;
+  }
+  & h2 {
+    font-size: 1.5em;
+    margin-block-start: 0.83em;
+    margin-block-end: 0.83em;
+  }
+  & h3 {
+    font-size: 1.17em;
+    margin-block-start: 1em;
+    margin-block-end: 1em;
+    font-weight: bold;
+  }
+  & ul {
+    list-style: initial;
+    padding-inline-start: 40px;
+    margin-block-start: 1em;
+    margin-block-end: 1em;
+  }
+`;
+
+function PolicyContainer({ policy }) {
+  return (
+    <PolicyContainerMain>
+      <ReactMarkdown remarkPlugins={[remarkSlug]}>{policy}</ReactMarkdown>
+    </PolicyContainerMain>
+  );
+}
+
+PolicyContainer.propTypes = {
+  policy: PropTypes.string.isRequired
+};
+
+export default PolicyContainer;

client/modules/IDE/pages/PrivacyPolicy.jsx

@@ -1,41 +1,8 @@
 import React, { useEffect, useState } from 'react';
 import Helmet from 'react-helmet';
-import ReactMarkdown from 'react-markdown';
-import remarkSlug from 'remark-slug';
-import styled from 'styled-components';
 import axios from 'axios';
 import Nav from '../../../components/Nav';
-import { remSize } from '../../../theme';
-
-const PrivacyPolicyContainer = styled.main`
-  max-width: ${remSize(700)};
-  margin: 0 auto;
-  padding: ${remSize(10)};
-  & p {
-    margin-bottom: ${remSize(10)};
-  }
-  font-size: ${remSize(16)};
-  & h1 {
-    font-size: 2em;
-  }
-  & h2 {
-    font-size: 1.5em;
-    margin-block-start: 0.83em;
-    margin-block-end: 0.83em;
-  }
-  & h3 {
-    font-size: 1.17em;
-    margin-block-start: 1em;
-    margin-block-end: 1em;
-    font-weight: bold;
-  }
-  & ul {
-    list-style: initial;
-    padding-inline-start: 40px;
-    margin-block-start: 1em;
-    margin-block-end: 1em;
-  }
-`;
+import PolicyContainer from '../components/PolicyContainer';
 
 function PrivacyPolicy() {
   const [privacyPolicy, setPrivacyPolicy] = useState('');
@@ -50,11 +17,7 @@ function PrivacyPolicy() {
         <title>Privacy Policy</title>
       </Helmet>
       <Nav layout="dashboard" />
-      <PrivacyPolicyContainer>
-        <ReactMarkdown remarkPlugins={[remarkSlug]}>
-          {privacyPolicy}
-        </ReactMarkdown>
-      </PrivacyPolicyContainer>
+      <PolicyContainer policy={privacyPolicy} />
     </>
   );
 }

client/modules/IDE/pages/TermsOfUse.jsx

@@ -0,0 +1,25 @@
+import React, { useEffect, useState } from 'react';
+import Helmet from 'react-helmet';
+import axios from 'axios';
+import Nav from '../../../components/Nav';
+import PolicyContainer from '../components/PolicyContainer';
+
+function TermsOfUse() {
+  const [termsOfUse, setTermsOfUse] = useState('');
+  useEffect(() => {
+    axios.get('terms-of-use.md').then((response) => {
+      setTermsOfUse(response.data);
+    });
+  }, []);
+  return (
+    <>
+      <Helmet>
+        <title>Terms of Use</title>
+      </Helmet>
+      <Nav layout="dashboard" />
+      <PolicyContainer policy={termsOfUse} />
+    </>
+  );
+}
+
+export default TermsOfUse;

client/routes.jsx

@@ -18,6 +18,7 @@ import DashboardView from './modules/User/pages/DashboardView';
 import createRedirectWithUsername from './components/createRedirectWithUsername';
 import MobileDashboardView from './modules/Mobile/MobileDashboardView';
 import PrivacyPolicy from './modules/IDE/pages/PrivacyPolicy';
+import TermsOfUse from './modules/IDE/pages/TermsOfUse';
 import { getUser } from './modules/User/actions';
 import { stopSketch } from './modules/IDE/actions/ide';
 import {
@@ -119,6 +120,7 @@ const routes = (store) => (
     <Route path="/preview" component={MobileSketchView} />
     <Route path="/preferences" component={MobilePreferences} />
     <Route path="privacy-policy" component={PrivacyPolicy} />
+    <Route path="terms-of-use" component={TermsOfUse} />
   </Route>
 );
 

server/routes/server.routes.js

@@ -137,4 +137,8 @@ router.get('/privacy-policy', (req, res) => {
   res.send(renderIndex());
 });
 
+router.get('/terms-of-use', (req, res) => {
+  res.send(renderIndex());
+});
+
 export default router;