From 604c32ababa32489c46cb6e80cc9470e49593ccb Mon Sep 17 00:00:00 2001 From: Chaudhry Date: Sun, 10 Nov 2019 16:52:45 -0500 Subject: [PATCH] Added the beginnings of a homepage. Note: HomePage.js has more than one class because I am implementing it to be responsive, and need a mobile and desktop class. --- package.json | 2 + src/App/AppContainer.js | 5 +- src/components/HomePage/HomePage.js | 305 ++++++++++++++++++++++++++++ src/index.js | 3 +- yarn.lock | 95 ++++++++- 5 files changed, 405 insertions(+), 5 deletions(-) create mode 100644 src/components/HomePage/HomePage.js diff --git a/package.json b/package.json index df063f09..9119f129 100644 --- a/package.json +++ b/package.json @@ -43,6 +43,8 @@ "redux-immutable-state-invariant": "2.1.0", "redux-thunk": "2.3.0", "sass-loader": "7.2.0", + "semantic-ui-css": "2.4.1", + "semantic-ui-react": "0.88.1", "source-map-explorer": "2.0.1", "tabletop": "1.5.2" }, diff --git a/src/App/AppContainer.js b/src/App/AppContainer.js index d556808e..d97ec2fe 100644 --- a/src/App/AppContainer.js +++ b/src/App/AppContainer.js @@ -23,7 +23,10 @@ const envSheetId = process.env.REACT_APP_GOOGLE_SHEETS_ID; // const revereSheetId = '1QolGVE4wVWSKdiWeMaprQGVI6MsjuLZXM5XQ6mTtONA'; function sheetIdFromPath(directory, path) { - return directory.find(x => x.path === path).sheetId; + if (directory.find(x => x.path === path)) { + return directory.find(x => x.path === path).sheetId; + } + else return null } class AppContainer extends Component { diff --git a/src/components/HomePage/HomePage.js b/src/components/HomePage/HomePage.js new file mode 100644 index 00000000..8dacbfa3 --- /dev/null +++ b/src/components/HomePage/HomePage.js @@ -0,0 +1,305 @@ +import React, { Component } from "react"; +import PropTypes from "prop-types"; +import { + Button, + Container, + Divider, + Grid, + Header, + Icon, + Image, + List, + Menu, + Responsive, + Segment, + Sidebar, + Visibility, +} from "semantic-ui-react"; +import "semantic-ui-css/semantic.min.css"; +import Logo from "../../images/cc-logo-home.png"; +import CIcon from "../../images/cc-logo-icon.png"; +// Heads up! +// We using React Static to prerender our docs with server side rendering, this is a quite simple solution. +// For more advanced usage please check Responsive docs under the "Usage" section. +const getWidth = () => { + const isSSR = typeof window === "undefined"; + + return isSSR ? Responsive.onlyTablet.minWidth : window.innerWidth; +}; + +/* eslint-disable react/no-multi-comp */ +/* Heads up! HomepageHeading uses inline styling, however it's not the best practice. Use CSS or styled components for + * such things. + */ +const HomepageHeading = ({ mobile }) => ( + +
+ Community Connect + +
+
+ + +); + +HomepageHeading.propTypes = { + mobile: PropTypes.bool, +}; + +/* TODO: Responsive Navbar + */ +class DesktopContainer extends Component { + state = {}; + + hideFixedMenu = () => this.setState({ fixed: false }); + + showFixedMenu = () => this.setState({ fixed: true }); + + render() { + const { children } = this.props; + const { fixed } = this.state; + + return ( + + + + + + + Home + + + + + + + + {children} + + ); + } +} + +DesktopContainer.propTypes = { + children: PropTypes.node, +}; + +class MobileContainer extends Component { + state = {}; + + handleSidebarHide = () => this.setState({ sidebarOpened: false }); + + handleToggle = () => this.setState({ sidebarOpened: true }); + + render() { + const { children } = this.props; + const { sidebarOpened } = this.state; + + return ( + + + + Home + + + + + + + + + + + + + + + + + + + + {children} + + + ); + } +} + +MobileContainer.propTypes = { + children: PropTypes.node, +}; + +const ResponsiveContainer = ({ children }) => ( +
+ {children} + {children} +
+); + +ResponsiveContainer.propTypes = { + children: PropTypes.node, +}; + +const HomepageLayout = () => ( + + + + + +
+ A tool to help social workers +
+

+ Finding relevant health resources for your clients is tough. + Community Connect solves this problem by having a real-time, + collaborative database of vetted local health resources. +

+
+ Collaborative? +
+

+ Yes! Any resource that our partners can access can be updated in + real time if any changes aoccur. +

+ + + + + + + + + +
+ About Us +
+

+ The original architectural design for this app was designed proven out + by Bob Breznak for an organization assisting with the refugee crisis + in Greece in 2016, Prosper. They needed help consolidating, vetting + and displaying resources on the web. In May 2018 he re-wrote the + frontend in react.js to create an app that assists homeless people + Seeking Shelter and resources. +

+

+ In August 2018 Code for Boston’s Community Connect project had similar + aims and the repo was moved into their org. The data used for this + project was initially collected from Nevil Desai during his internship + with Revere CARES, a coalition group under the umbrella of MGH Center + for Community Health Improvement. +

+

+ In September 2019, Community Connect officially received their + non-profit status, and is aiming at expanding out of the Greater + Boston Area to clinics and health centers nation wide. +

+ + + + + + + + +
+ + + Github + + + LinkedIn + + + Instagram + + + + +
+ + + MGH Revere Health Center + + + University of Vermont Medical Center + + + + + + + + +); +export default HomepageLayout; diff --git a/src/index.js b/src/index.js index e71c10ce..329d0fca 100644 --- a/src/index.js +++ b/src/index.js @@ -11,7 +11,7 @@ import AppContainer from "./App/AppContainer"; import PrintPage from "./components/PrintPage/PrintPageContainer"; import NotFoundPage from "./components/NotFoundPage/NotFoundPage"; import registerServiceWorker from "./registerServiceWorker"; - +import HomePageLayout from "./components/HomePage/HomePage"; import "bootstrap/dist/css/bootstrap.min.css"; import "./css/index.scss"; @@ -20,6 +20,7 @@ library.add(fab, fas); const getRoutes = store => (
+