No description, website, or topics provided.
Clone or download
Pull request Compare This branch is 14 commits ahead of wdi-nyc-60:master.
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
db
dist
models
routes
services
src
.babelrc
README.md
package.json
server.js
site.png
webpack.config.js
wireframe.png

README.md

Unsafely

Overview

**My single-page app's goal is to knit together a network of user testimonials regarding the safety of spaces. It would employ the google places api to display a map of establishments in the area and allow users to flag the place as having been the location for an experience in which the user felt unsafe due to some aspect of their identity.


Wireframe

Map Component
import React, { Component } from 'react';
import {GoogleMapLoader, GoogleMap, Marker} from "react-google-maps";

export default function MapContainer (props) {
  return (
    <section>
      <GoogleMapLoader
        containerElement={
          <div
            style={{
              height: "25vh",
              width: "25vh"
            }}
          />
        }
        googleMapElement={
          <GoogleMap
            ref={(map) => console.log(map)}
            defaultZoom={14}
            defaultCenter={props.coordinates}
          >
          <Marker
          position={props.coordinates}
          place={props.place}
          />
          </GoogleMap>
        }
      />
    </section>
  );
}
Chart Component
import React, { Component } from 'react';
// flags, placeName
const RadarChart = require("react-chartjs").Radar;

const ChartComponent = React.createClass({
  render: function() {
    return <RadarChart data={{
    labels: ["Race", "Body", "Sexuality", "Gender", "Religion"],
    datasets: [
        {
            label: "My First dataset",
            backgroundColor: "rgba(179,181,198,0.2)",
            borderColor: "rgba(179,181,198,1)",
            pointBackgroundColor: "rgba(179,181,198,0.1)",
            pointBorderColor: "#fff",
            pointHoverBackgroundColor: "#fff",
            pointHoverBorderColor: "rgba(179,181,198,1)",
            data: [this.props.flags.Race, this.props.flags.Body, this.props.flags.Sexuality, this.props.flags.Gender, this.props.flags.Religion]
        }
    ]
}} height="200" width="200" redraw/>
  }
});

export default ChartComponent;