├── .gitignore ├── app ├── .DS_Store ├── components │ ├── children │ │ ├── .DS_Store │ │ ├── DB_children │ │ │ ├── Forum.js │ │ │ ├── Scrape.js │ │ │ ├── DoctorForm.js │ │ │ └── grandchildren │ │ │ │ └── Topic.js │ │ ├── Auth │ │ │ ├── Account.js │ │ │ ├── Signup.js │ │ │ └── Login.js │ │ └── Dashboard.js │ ├── utils │ │ ├── commenthelp.js │ │ ├── firehelp.js │ │ ├── forumTablehelp.js │ │ ├── scrapehelp.js │ │ └── formhelp.js │ ├── Main.js │ └── index.js ├── app.js └── firebase.js ├── server ├── .DS_Store ├── models │ ├── CommentModel.js │ ├── ForumModel.js │ └── DocInfo.js └── server-routes │ ├── forumTable-routes.js │ ├── form-routes.js │ ├── comment-routes.js │ └── scrape-routes.js ├── public ├── images │ ├── Doctor.png │ ├── Forum.png │ ├── breast.png │ ├── colon.png │ ├── logo.png │ ├── lung.png │ ├── ovary.png │ ├── connect.jpg │ ├── ovarian.png │ ├── prostate.png │ ├── Newspaper.png │ ├── background.jpg │ └── profile_pic.png ├── css │ ├── inline.css │ ├── tabs.css │ └── style.css └── index.html ├── README.md ├── webpack.config.js ├── package.json └── server.js /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | .DS_Store -------------------------------------------------------------------------------- /app/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chiaramdelucia/gitgirls2/HEAD/app/.DS_Store -------------------------------------------------------------------------------- /server/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chiaramdelucia/gitgirls2/HEAD/server/.DS_Store -------------------------------------------------------------------------------- /public/images/Doctor.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chiaramdelucia/gitgirls2/HEAD/public/images/Doctor.png -------------------------------------------------------------------------------- /public/images/Forum.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chiaramdelucia/gitgirls2/HEAD/public/images/Forum.png -------------------------------------------------------------------------------- /public/images/breast.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chiaramdelucia/gitgirls2/HEAD/public/images/breast.png -------------------------------------------------------------------------------- /public/images/colon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chiaramdelucia/gitgirls2/HEAD/public/images/colon.png -------------------------------------------------------------------------------- /public/images/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chiaramdelucia/gitgirls2/HEAD/public/images/logo.png -------------------------------------------------------------------------------- /public/images/lung.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chiaramdelucia/gitgirls2/HEAD/public/images/lung.png -------------------------------------------------------------------------------- /public/images/ovary.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chiaramdelucia/gitgirls2/HEAD/public/images/ovary.png -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # gitgirls2 2 | Website dedicated to helping patients find good healthcare using the MERN stack 3 | -------------------------------------------------------------------------------- /public/images/connect.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chiaramdelucia/gitgirls2/HEAD/public/images/connect.jpg -------------------------------------------------------------------------------- /public/images/ovarian.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chiaramdelucia/gitgirls2/HEAD/public/images/ovarian.png -------------------------------------------------------------------------------- /public/images/prostate.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chiaramdelucia/gitgirls2/HEAD/public/images/prostate.png -------------------------------------------------------------------------------- /public/images/Newspaper.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chiaramdelucia/gitgirls2/HEAD/public/images/Newspaper.png -------------------------------------------------------------------------------- /public/images/background.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chiaramdelucia/gitgirls2/HEAD/public/images/background.jpg -------------------------------------------------------------------------------- /public/images/profile_pic.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chiaramdelucia/gitgirls2/HEAD/public/images/profile_pic.png -------------------------------------------------------------------------------- /app/components/children/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chiaramdelucia/gitgirls2/HEAD/app/components/children/.DS_Store -------------------------------------------------------------------------------- /public/css/inline.css: -------------------------------------------------------------------------------- 1 | .ovMain, .breastMain, .prosMain { 2 | width: 30px; 3 | height: 30px; 4 | } 5 | 6 | .lungMain, .colonMain { 7 | width: 25px; 8 | height: 25px; 9 | } 10 | .mainBtn{ 11 | vertical-align: middle; 12 | } 13 | .logoMain{ 14 | width: 100px; 15 | height: 100px; 16 | 17 | } 18 | 19 | -------------------------------------------------------------------------------- /app/app.js: -------------------------------------------------------------------------------- 1 | // Include the Main React Dependencies 2 | 3 | import React from 'react' 4 | import ReactDOM from 'react-dom' 5 | 6 | 7 | // Grabs the Routes 8 | import App from "./components"; 9 | 10 | 11 | // Renders the contents according to the route page. 12 | ReactDOM.render(, document.getElementById("app")); -------------------------------------------------------------------------------- /server/models/CommentModel.js: -------------------------------------------------------------------------------- 1 | const mongoose = require('mongoose'); 2 | 3 | const Schema = mongoose.Schema; 4 | 5 | const CommentSchema = new Schema({ 6 | comment: { 7 | type: String 8 | }, 9 | username: { 10 | type: String 11 | } 12 | }); 13 | 14 | const Comment = mongoose.model('Comment', CommentSchema); 15 | 16 | module.exports = Comment; -------------------------------------------------------------------------------- /app/components/utils/commenthelp.js: -------------------------------------------------------------------------------- 1 | const axios = require('axios'); 2 | 3 | 4 | var commentHelp = { 5 | 6 | 7 | postComment: function({ data, id }) { 8 | return axios.post(`/forumpost/${id}`, { 9 | comment: data.comment, 10 | username: data.username 11 | }).then((response) => { 12 | return response.data 13 | }) 14 | } 15 | 16 | 17 | }; 18 | 19 | module.exports = commentHelp; -------------------------------------------------------------------------------- /public/css/tabs.css: -------------------------------------------------------------------------------- 1 | .tabs-menu { 2 | display: inline-flex; 3 | list-style: none; 4 | padding: 0; 5 | margin: 0; 6 | padding-left: 50px; 7 | } 8 | 9 | .tabs-menu-item { 10 | float: left; 11 | margin-right: 20px; 12 | 13 | } 14 | 15 | .tabs-menu-item a { 16 | cursor: pointer; 17 | display: block; 18 | color: #A9A9A9; 19 | } 20 | 21 | .tabs-menu-item:not(.is-active) a:hover, 22 | .tabs-menu-item.is-active a { 23 | color: #3498DB; 24 | } 25 | 26 | .tab-panel { 27 | padding: 10px 50px; 28 | } 29 | -------------------------------------------------------------------------------- /app/firebase.js: -------------------------------------------------------------------------------- 1 | import firebase from 'firebase'; 2 | 3 | var config = { 4 | apiKey: "AIzaSyAFpr5L9-yDiyT0mrG0OKuWip0xjR8vKb4", 5 | authDomain: "canceralliance-c13b1.firebaseapp.com", 6 | databaseURL: "https://canceralliance-c13b1.firebaseio.com", 7 | projectId: "canceralliance-c13b1", 8 | storageBucket: "canceralliance-c13b1.appspot.com", 9 | messagingSenderId: "1001737789804" 10 | }; 11 | firebase.initializeApp(config); 12 | 13 | export const ref = firebase.database().ref() 14 | export const firebaseAuth = firebase.auth 15 | 16 | 17 | -------------------------------------------------------------------------------- /server/models/ForumModel.js: -------------------------------------------------------------------------------- 1 | 2 | var mongoose = require('mongoose'); 3 | 4 | var Schema = mongoose.Schema; 5 | 6 | 7 | var ForumSchema = new Schema({ 8 | 9 | title: { 10 | type:String, 11 | required: true 12 | }, 13 | category: { 14 | type: String, 15 | required: true, 16 | }, 17 | author: String, 18 | content: { 19 | type: String, 20 | required:true 21 | }, 22 | comment: [{ 23 | type: Schema.Types.ObjectId, 24 | ref: 'Comment', 25 | }], 26 | location: String, 27 | condition: String 28 | 29 | }); 30 | 31 | 32 | var Forum = mongoose.model("Forum", ForumSchema); 33 | 34 | 35 | module.exports = Forum; 36 | -------------------------------------------------------------------------------- /app/components/utils/firehelp.js: -------------------------------------------------------------------------------- 1 | import { ref, firebaseAuth } from '../../firebase.js' 2 | 3 | export function auth (email, password) { 4 | return firebaseAuth().createUserWithEmailAndPassword(email, password) 5 | .then(saveUser) 6 | } 7 | 8 | export function logout () { 9 | return firebaseAuth().signOut() 10 | } 11 | 12 | export function login (email, password) { 13 | return firebaseAuth().signInWithEmailAndPassword(email, password) 14 | } 15 | 16 | export function resetPassword (email) { 17 | return firebaseAuth().sendPasswordResetEmail(email) 18 | } 19 | 20 | export function saveUser (user) { 21 | return ref.child(`users/${user.uid}/info`) 22 | .set({ 23 | email: user.email, 24 | uid: user.uid 25 | }) 26 | .then(() => user) 27 | } -------------------------------------------------------------------------------- /app/components/utils/forumTablehelp.js: -------------------------------------------------------------------------------- 1 | const axios = require('axios'); 2 | 3 | 4 | var forumTablehelp = { 5 | 6 | showInfo: function() { 7 | return axios.get('/forumtable') 8 | .then(function(response) { 9 | return response.data 10 | }) 11 | .catch(function (error) { 12 | console.log(error); 13 | }); 14 | }, 15 | 16 | postInfo: function(data) { 17 | console.log('data postInfo: ',data) 18 | return axios.post('/forumpost', { 19 | title:data.title, 20 | category:data.category, 21 | author:data.author, 22 | content:data.content, 23 | location:data.location, 24 | condition: data.condition 25 | }) 26 | .then((response) => { 27 | return response.data 28 | }); 29 | } 30 | 31 | 32 | }; 33 | 34 | module.exports = forumTablehelp; -------------------------------------------------------------------------------- /app/components/utils/scrapehelp.js: -------------------------------------------------------------------------------- 1 | var axios = require('axios'); 2 | 3 | var scrapehelp = { 4 | 5 | getNCIscrape: function(){ 6 | return axios.get('/nci').then(function(data){ 7 | // console.log('NCI Helper '+ data.data[0].title +" "+ data.data[0].link) 8 | return data.data 9 | }) 10 | }, 11 | 12 | getWHOscrape: function(){ 13 | return axios.get('/who').then(function(data){ 14 | // console.log('WHO Helper '+ data.data[0].title +" "+ data.data[0].link) 15 | return data.data 16 | }) 17 | }, 18 | 19 | getCRUKscrape: function(){ 20 | return axios.get('/cruk').then(function(data){ 21 | // console.log('CRUK Helper '+ data.data[0].title +" "+ data.data[0].link) 22 | return data.data 23 | }) 24 | } 25 | }; 26 | 27 | module.exports = scrapehelp; -------------------------------------------------------------------------------- /server/models/DocInfo.js: -------------------------------------------------------------------------------- 1 | /* Mongoose Example (Students) (18.3.03) 2 | * ===================================== */ 3 | 4 | // Dependency 5 | var mongoose = require("mongoose"); 6 | 7 | // Create the Schema class 8 | var Schema = mongoose.Schema; 9 | 10 | // Instantiate a userSchema object with the Schema class we just made 11 | 12 | var DocInfoSchema = new Schema({ 13 | fullname : { 14 | type: String 15 | }, 16 | website : { 17 | type: String 18 | }, 19 | phonenumber : { 20 | type: String 21 | }, 22 | condition : { 23 | type: String 24 | }, 25 | hospital: { 26 | type: String 27 | }, 28 | reason: { 29 | type: String 30 | } 31 | 32 | }); 33 | 34 | // Create the "User" model with our UserSchema schema 35 | var DocInfo = mongoose.model("DocInfo", DocInfoSchema); 36 | 37 | 38 | // Export the User model, so it can be used in server.js with a require 39 | module.exports = DocInfo; 40 | -------------------------------------------------------------------------------- /server/server-routes/forumTable-routes.js: -------------------------------------------------------------------------------- 1 | const axios = require('axios'); 2 | var Forum = require('../models/ForumModel.js'); 3 | 4 | 5 | module.exports = function(app){ 6 | 7 | app.get("/forumtable", function(req, res) { 8 | // This GET request will search for the latest Forum 9 | Forum.find({}) 10 | .populate('comment') 11 | .then(function(doc){ 12 | // console.log("/forumtable doc: " + doc) 13 | 14 | res.send(doc); 15 | }) 16 | }); 17 | 18 | app.post("/forumpost", function(req, res) { 19 | console.log("/forumpost req: " + req.body.category) 20 | 21 | var post = { 22 | title: req.body.title, 23 | category: req.body.category, 24 | author: req.body.author, 25 | content: req.body.content, 26 | location: req.body.location, 27 | condition: req.body.condition 28 | } 29 | 30 | var forum = new Forum(post) 31 | 32 | forum.save(function(err, forum){ 33 | res.send(forum) 34 | console.log("forum: " + forum) 35 | }); 36 | 37 | 38 | }); 39 | 40 | } -------------------------------------------------------------------------------- /app/components/utils/formhelp.js: -------------------------------------------------------------------------------- 1 | var axios = require('axios'); 2 | 3 | var formhelp = { 4 | 5 | showInfo: function() { 6 | return axios.get('/doctable').then(function(response) { 7 | // console.log("this is docform;table " + response.data); 8 | return response.data 9 | }) 10 | .catch(function(error) { 11 | console.log(error); 12 | }); 13 | }, 14 | 15 | postInfo: function(data) { 16 | return axios.post('/insertdoc', { 17 | fullname: data.fullname, 18 | website: data.website, 19 | phonenumber: data.phonenumber, 20 | condition: data.condition, 21 | hospital: data.hospital, 22 | reason: data.reason 23 | 24 | }) 25 | .then((response) => { 26 | // console.log("this is docform;table " + response.data); 27 | return response.data 28 | }); 29 | } 30 | 31 | 32 | 33 | }; 34 | 35 | module.exports = formhelp; -------------------------------------------------------------------------------- /public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Cancer Alliance 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 |
22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | -------------------------------------------------------------------------------- /server/server-routes/form-routes.js: -------------------------------------------------------------------------------- 1 | /*Require Models*/ 2 | var DocInfo = require('../models/DocInfo.js') 3 | 4 | 5 | module.exports = function(app) { 6 | 7 | app.get("/doctable", function(req, res) { 8 | // This GET request will search for the latest DocInfo 9 | 10 | DocInfo.find({}).exec(function(err, doc) { 11 | // console.log(doc) 12 | if (err) { 13 | console.log(err); 14 | } else { 15 | res.send(doc); 16 | } 17 | }); 18 | }); 19 | 20 | /*create and save docinfo*/ 21 | app.post('/insertdoc', function(req, res) { 22 | // console.log('req.body ' + req.body) 23 | 24 | var details = { 25 | fullname: req.body.fullname, 26 | website: req.body.website, 27 | phonenumber: req.body.phonenumber, 28 | condition: req.body.condition, 29 | hospital: req.body.hospital, 30 | reason: req.body.reason 31 | } 32 | 33 | var entry = new DocInfo(details); 34 | 35 | entry.save(function(err, doc) { 36 | if (err) { 37 | console.log(err) 38 | } else { 39 | console.log('saved!') 40 | res.send(doc); 41 | } 42 | }) 43 | }); 44 | 45 | } -------------------------------------------------------------------------------- /webpack.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | 3 | // This is the entry point or start of our react applicaton 4 | entry: "./app/app.js", 5 | 6 | // The plain compiled Javascript will be output into this file 7 | output: { 8 | filename: "public/bundle.js" 9 | }, 10 | 11 | // This section desribes the transformations we will perform 12 | module: { 13 | loaders: [ 14 | { 15 | // Only working with files that in in a .js or .jsx extension 16 | test: /\.jsx?$/, 17 | // Webpack will only process files in our app folder. This avoids processing 18 | // node modules and server files unnecessarily 19 | include: /app/, 20 | loader: "babel-loader", 21 | query: { 22 | // These are the specific transformations we'll be using. 23 | presets: ["react", "es2015"], 24 | plugins: ["transform-es2015-destructuring", "transform-object-rest-spread"] 25 | 26 | } 27 | } 28 | ] 29 | }, 30 | // This lets us debug our react code in chrome dev tools. Errors will have lines and file names 31 | // Without this the console says all errors are coming from just coming from bundle.js 32 | devtool: "eval-source-map" 33 | }; 34 | -------------------------------------------------------------------------------- /server/server-routes/comment-routes.js: -------------------------------------------------------------------------------- 1 | const axios = require('axios'); 2 | const Comment = require('../models/CommentModel.js'); 3 | const Forum = require('../models/ForumModel.js'); 4 | 5 | 6 | module.exports = function(app){ 7 | 8 | app.post('/forumpost/:id', function(req, res){ 9 | console.log('commentRoutes req.body: ', req.body) 10 | console.log('commentRoutes req.params: ', req.params); 11 | 12 | var newComment = { 13 | comment: req.body.comment, 14 | username: req.body.username 15 | } 16 | 17 | var comment = new Comment(newComment); 18 | console.log("comment", comment); 19 | comment.save(function(err, doc){ 20 | 21 | if (err) throw err; 22 | console.log('commentRoutes Save comment ' + doc); 23 | 24 | Forum.update({'_id': req.params.id},{$push: {'comment': doc._id }}) 25 | .exec(function(err, doc){ 26 | if (err) throw err; 27 | res.send(comment); 28 | 29 | }) 30 | 31 | 32 | }) 33 | 34 | }); 35 | 36 | app.get('/forumpost/:id', (req, res)=>{ 37 | 38 | Forum.findById(req.params.id) 39 | .populate('comment') 40 | .exec() 41 | .then(function(doc){ // console.log("/forumtable doc: " + doc) 42 | 43 | res.json(doc); 44 | }) 45 | }) 46 | 47 | 48 | } -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "gitgirls2", 3 | "version": "1.0.0", 4 | "description": "Website dedicated to helping patients find good healthcare using the MERN stack", 5 | "main": "server.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1", 8 | "start": "node server.js", 9 | "build": "webpack -w" 10 | }, 11 | "repository": { 12 | "type": "git", 13 | "url": "git+https://github.com/chiaramdelucia/gitgirls2.git" 14 | }, 15 | "keywords": [], 16 | "author": "", 17 | "license": "ISC", 18 | "dependencies": { 19 | "axios": "^0.16.1", 20 | "babel-plugin-transform-es2015-destructuring": "^6.23.0", 21 | "babel-plugin-transform-object-rest-spread": "^6.23.0", 22 | "body-parser": "^1.15.0", 23 | "cheerio": "^0.22.0", 24 | "express": "^4.13.4", 25 | "firebase": "^3.9.0", 26 | "mongoose": "^4.4.6", 27 | "react": "^0.14.3", 28 | "react-burger-menu": "^2.0.0", 29 | "react-dom": "^0.14.3", 30 | "react-modal": "^1.7.7", 31 | "react-modal-bootstrap": "^1.1.1", 32 | "react-router": "^2.4.1", 33 | "react-router-dom": "^4.1.1", 34 | "react-simpletabs": "^0.7.0", 35 | "request": "^2.81.0" 36 | }, 37 | "devDependencies": { 38 | "babel-core": "^6.3.13", 39 | "babel-loader": "^6.2.0", 40 | "babel-preset-es2015": "^6.3.13", 41 | "babel-preset-react": "^6.3.13", 42 | "webpack": "^1.13.1" 43 | }, 44 | "bugs": { 45 | "url": "https://github.com/chiaramdelucia/gitgirls2/issues" 46 | }, 47 | "homepage": "https://github.com/chiaramdelucia/gitgirls2#readme" 48 | } 49 | -------------------------------------------------------------------------------- /server.js: -------------------------------------------------------------------------------- 1 | // Include Server Dependencies 2 | var express = require("express"); 3 | var bodyParser = require("body-parser"); 4 | var mongoose = require("mongoose"); 5 | var axios = require('axios'); 6 | var cheerio = require('cheerio'); 7 | 8 | // Create a new express app 9 | var app = express(); 10 | // Sets an initial port. We'll use this later in our listener 11 | var PORT = process.env.PORT || 3000; 12 | 13 | app.use(bodyParser.json()); 14 | app.use(bodyParser.urlencoded({ extended: true })); 15 | app.use(bodyParser.text()); 16 | app.use(bodyParser.json({ type: "application/vnd.api+json" })); 17 | 18 | app.use(express.static(__dirname + '/public')); 19 | 20 | mongoose.Promise = Promise; 21 | 22 | 23 | // Database configuration for mongoose 24 | if (process.env.MONGODB_URI){ 25 | mongoose.connect(process.env.MONGODB_URI) 26 | } else { 27 | 28 | // db: CancerAlliance 29 | mongoose.connect("mongodb://localhost/CancerAlliance"); 30 | } 31 | // Hook mongoose connection to db 32 | var db = mongoose.connection; 33 | 34 | // Log any mongoose errors 35 | db.on("error", function(error) { 36 | console.log("Mongoose Error: ", error); 37 | }); 38 | 39 | // Log a success message when we connect to our mongoDB collection with no issues 40 | db.once("open", function() { 41 | console.log("Mongoose connection successful."); 42 | }); 43 | 44 | app.get('/', function(req,res){ 45 | res.sendFile(path.join(__dirname, '/public/index.html')) 46 | }) 47 | 48 | require('./server/server-routes/form-routes.js')(app); 49 | require('./server/server-routes/scrape-routes.js')(app); 50 | require('./server/server-routes/forumTable-routes.js')(app); 51 | require('./server/server-routes/comment-routes.js')(app); 52 | 53 | 54 | // Starting our express server 55 | app.listen(PORT, function() { 56 | console.log("App listening on PORT: " + PORT); 57 | }); -------------------------------------------------------------------------------- /app/components/children/DB_children/Forum.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import {Link, Route} from 'react-router-dom'; 4 | import Topic from './grandchildren/Topic' 5 | 6 | const customStyles = { 7 | content : { 8 | color: 'black' 9 | } 10 | }; 11 | 12 | 13 | class Forum extends React.Component { 14 | constructor(props) { 15 | super(props); 16 | } 17 | 18 | render() { 19 | console.log("FORUM PROPS",this.props); 20 | 21 | return ( 22 |
23 | 24 | 25 | 26 | 27 |
28 | 29 |
30 |
31 |

forumChat

32 | 33 | 34 | 35 |
    36 |
  • NJ
    • 37 |
  • NY
    • 38 |
  • PA
    • 39 |
  • CT
    • 40 |
41 | 42 |
43 | 44 | 45 |
46 | {this.props.children} 47 | 48 |
49 | 50 |
51 |
52 |
53 | 54 | 55 | ); 56 | } 57 | } 58 | 59 | export default Forum; 60 | 61 | -------------------------------------------------------------------------------- /app/components/children/Auth/Account.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react' 2 | import {Link} from 'react-router-dom'; 3 | 4 | export default class Account extends Component { 5 | constructor(props) { 6 | super(props); 7 | 8 | 9 | } 10 | render () { 11 | console.log("Account PROPS",this.props); 12 | return ( 13 |
14 |
15 |
16 |
17 |
18 |

Account Profile

19 |
20 |
21 | 22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 | logo 30 |
31 |

superwoman17

32 |
    33 |
  • Ovarian Cancer patient
    • 34 |
  • Member since May 2017
    • 35 |
36 |
37 |
38 |
39 |
40 |

About Me

41 |

I am a comic book loving RN who can't stand how itchy her head is under these 'fashionable' head scarfs. Looking to talk to people who can relate to the trivial annoyances of the day-to-day life post-chemo.

42 |
43 |
44 | 45 |

Favourites

46 |

All bookmarked doctor recommendations and forum posts will be placed here

47 |
48 |
49 |
50 |
51 | ) 52 | } 53 | } -------------------------------------------------------------------------------- /app/components/children/Auth/Signup.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react' 2 | import { auth } from '../../utils/firehelp' 3 | import {Link} from 'react-router-dom'; 4 | 5 | function setErrorMsg(error) { 6 | return { 7 | registerError: error.message 8 | } 9 | } 10 | 11 | export default class Signup extends Component { 12 | constructor(props) { 13 | super(props); 14 | this.state = { registerError: null } 15 | 16 | this.handleSubmit = this.handleSubmit.bind(this); 17 | } 18 | 19 | handleSubmit(e){ 20 | e.preventDefault() 21 | auth(this.email.value, this.password.value) 22 | .catch(e => this.setState(setErrorMsg(e))) 23 | } 24 | render () { 25 | return ( 26 |
27 |
28 |
29 |
30 |
31 |

Account Profile

32 |
33 |
34 | 35 |
36 |
37 |
38 |
39 |
40 |

Sign Up

41 |
42 |
43 | 44 | this.email = email} placeholder="Email"/> 45 |
46 |
47 | 48 | this.password = password} /> 49 |
50 | { 51 | this.state.registerError && 52 |
53 | 54 | Error: 55 |  {this.state.registerError} 56 |
57 | } 58 | 59 |
60 |
61 |
62 | ) 63 | } 64 | } -------------------------------------------------------------------------------- /app/components/Main.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import {Link} from 'react-router-dom'; 3 | 4 | 5 | class Main extends React.Component { 6 | constructor(props) { 7 | super(props); 8 | 9 | } 10 | 11 | render() { 12 | return ( 13 |
14 |
15 |
16 |
17 |
18 | logo 19 |
20 | 21 |
22 |

Cancer Alliance

23 |

HAVE AN ALLY | BE AN ALLY

24 |
25 |
26 |
27 |
28 | 29 |
30 |
31 |
32 | 33 |

Click on a topic below to learn more, connect and share your experiences

34 | 35 | 36 |

37 | 38 |

39 | 40 | 41 |

42 |

43 | 44 |

45 | 46 |

47 | 48 |

49 |

50 | 51 |

52 |
53 | 54 |
55 | 56 | connect 57 |

Cancer Alliance is a place where you can talk with and support other surviors with your specific disease. Our mission is educating and saving lives by empowering those living with and fighting cancer.

58 |
59 |
60 |
61 | 62 |
63 | 64 |
{this.props.children}
65 | 66 |
67 | 68 | ); 69 | } 70 | } 71 | 72 | export default Main 73 | -------------------------------------------------------------------------------- /app/components/children/Auth/Login.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react' 2 | import { login, resetPassword } from '../../utils/firehelp'; 3 | import {Link} from 'react-router-dom'; 4 | 5 | function setErrorMsg(error) { 6 | return { 7 | loginMessage: error 8 | } 9 | } 10 | 11 | export default class Login extends Component { 12 | constructor(props) { 13 | super(props); 14 | this.state = { loginMessage: null } 15 | 16 | this.handleSubmit = this.handleSubmit.bind(this); 17 | 18 | } 19 | 20 | handleSubmit(e){ 21 | e.preventDefault() 22 | login(this.email.value, this.password.value) 23 | .catch((error) => { 24 | this.setState(setErrorMsg('Invalid username/password.')) 25 | }) 26 | } 27 | resetPassword(){ 28 | resetPassword(this.email.value) 29 | .then(() => this.setState(setErrorMsg(`Password reset email sent to ${this.email.value}.`))) 30 | .catch((error) => this.setState(setErrorMsg(`Email address not found.`))) 31 | } 32 | render () { 33 | return ( 34 |
35 |
36 |
37 |
38 |
39 |

Account Profile

40 |
41 |
42 | 43 |
44 |
45 |
46 |
47 |
48 |
49 |

Login

50 |
51 |
52 | 53 | this.email = email} placeholder="Email"/> 54 |
55 |
56 | 57 | this.password = password} /> 58 |
59 | { 60 | this.state.loginMessage && 61 |
62 | 63 | Error: 64 |  {this.state.loginMessage} Forgot Password? 65 |
66 | } 67 | 68 |
69 |
70 |
71 |
72 | ) 73 | } 74 | } -------------------------------------------------------------------------------- /app/components/children/DB_children/Scrape.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | // import ReactDOM from 'react-dom' 3 | import Tabs from 'react-simpletabs' 4 | import scrapehelp from '../../utils/scrapehelp' 5 | 6 | class Scrape extends React.Component { 7 | constructor(props) { 8 | super(props); 9 | this.state = { 10 | nci: [], 11 | who: [], 12 | cruk: [], 13 | }; 14 | } 15 | 16 | 17 | componentWillMount(){ 18 | scrapehelp.getNCIscrape() 19 | .then((data) => { 20 | // console.log('REACT NCI ' + data); 21 | this.setState({ 22 | nci: data 23 | }) 24 | }); 25 | scrapehelp.getWHOscrape() 26 | .then((data)=> { 27 | // console.log('REACT WHO' + data); 28 | this.setState({ 29 | who: data 30 | }) 31 | }); 32 | scrapehelp.getCRUKscrape() 33 | .then((data)=> { 34 | // console.log('REACT CRUK' + data); 35 | this.setState({ 36 | cruk: data 37 | }) 38 | }); 39 | } 40 | 41 | render() { 42 | 43 | return ( 44 |
45 |
46 | 47 |
48 |
49 |

news In the News

50 |
51 |
52 | 53 | 54 |

National Cancer Institute

55 |
    56 | {this.state.nci.map((result, i) => { 57 | return
  • {result.title}
    • 58 | }) 59 | } 60 |
61 | 62 | 63 | 64 |

WHO

65 |
    66 | {this.state.who.map((result, i) => { 67 | return
  • {result.title}
    • 68 | }) 69 | } 70 |
71 | 72 | 73 |

Cancer Research UK

74 |
    75 | {this.state.cruk.map((result, i) => { 76 | return
  • {result.title}
    • 77 | }) 78 | } 79 |
80 | 81 | 82 | 83 |
84 |
85 |
86 |
87 | ); 88 | } 89 | } 90 | 91 | export default Scrape; 92 | 93 | -------------------------------------------------------------------------------- /server/server-routes/scrape-routes.js: -------------------------------------------------------------------------------- 1 | const axios = require('axios'); 2 | const cheerio = require('cheerio'); 3 | 4 | module.exports = function(app){ 5 | 6 | app.get('/nci', function(req, res) { 7 | 8 | axios.get('https://www.cancer.gov/news-events/cancer-currents-blog') 9 | .then(function(response, html){ 10 | var $ = cheerio.load(response.data); 11 | // console.log(response.data) 12 | var result = []; 13 | 14 | 15 | $('div.has-images > ul > li.list-item').each(function(i, element) { 16 | var link = $(element).find('a.title').attr('href'); 17 | var title = $(element).find('a.title').text(); 18 | //console.log(link) 19 | //console.log(title) 20 | 21 | result.push({ 22 | title: title, 23 | link: 'https://www.cancer.gov' + link, 24 | }); 25 | }) 26 | // console.log(result); 27 | res.send(result); 28 | 29 | }) 30 | .catch(function(error){ 31 | console.log(error) 32 | }) 33 | }) 34 | 35 | app.get('/who', function(req, res) { 36 | 37 | axios.get('http://www.who.int/cancer/publications/en/') 38 | .then(function(response, html){ 39 | var $ = cheerio.load(response.data); 40 | // console.log(response.data) 41 | var result = []; 42 | 43 | 44 | $('ul.auto_archive > li').each(function(i, element) { 45 | var link = $(element).find('a').attr('href'); 46 | var title = $(element).find('a').text(); 47 | // console.log(link); 48 | // console.log(title); 49 | 50 | result.push({ 51 | title: title, 52 | link: 'http://www.who.int' + link, 53 | }); 54 | 55 | }) 56 | // console.log(result); 57 | res.send(result); 58 | 59 | }) 60 | .catch(function(error){ 61 | console.log(error) 62 | }) 63 | }) 64 | 65 | app.get('/cruk', function(req, res) { 66 | 67 | axios.get('http://www.cancerresearchuk.org/about-us/cancer-news') 68 | .then(function(response, html){ 69 | var $ = cheerio.load(response.data); 70 | // console.log(response.data) 71 | var result = []; 72 | 73 | 74 | $('div.topic-content > h2').each(function(i, element) { 75 | var link = $(element).find('a').attr('href'); 76 | var title = $(element).find('a').text(); 77 | // console.log(link); 78 | // console.log(title); 79 | 80 | result.push({ 81 | title: title, 82 | link: 'http://www.cancerresearchuk.org' + link, 83 | }); 84 | 85 | }) 86 | // console.log(result); 87 | res.send(result); 88 | 89 | }) 90 | .catch(function(error){ 91 | console.log(error) 92 | }) 93 | }) 94 | 95 | } -------------------------------------------------------------------------------- /app/components/children/Dashboard.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import Forum from './DB_children/Forum.js' 3 | import Scrape from './DB_children/Scrape.js' 4 | import DoctorForm from './DB_children/DoctorForm.js' 5 | import {Link,Route} from 'react-router-dom'; 6 | import Topic from './DB_children/grandchildren/Topic.js' 7 | class Dashboard extends React.Component { 8 | constructor(props) { 9 | super(props); 10 | 11 | } 12 | 13 | componentDidUpdate(){ 14 | // console.log("component updated with condition" + this.props.route.condition); 15 | //do some stuff to load info about condition here, and set state data so u can pass it down to other components! 16 | } 17 | 18 | 19 | 20 | render() { 21 | 22 | 23 | console.log("Dashboard PROPS",this.props); 24 | console.log(this.props.match.params.condition) 25 | 26 | function capitalizeFirstLetter(string) { 27 | return string.charAt(0).toUpperCase() + string.slice(1); 28 | } 29 | var CapCondition = capitalizeFirstLetter(this.props.match.params.condition); 30 | console.log(CapCondition) 31 | 32 | 33 | return ( 34 |
35 |
36 |
37 |
38 | condition 39 |
40 |
41 |

{CapCondition} Cancer

42 |

Learn and support fellow surviors living with or have fought {CapCondition} Cancer

43 |
44 | 45 | 46 |
47 | 48 |
49 |
50 |
51 |
52 |
53 |
54 |
55 | 56 |

57 | 58 |

59 |

60 | 61 |

62 |

63 | 64 |

65 | 66 |

67 | 68 |

69 |

70 | 71 |

72 |
73 | 74 |
75 | 76 | {this.props.children} 77 | 78 | 79 | 80 | 81 |
82 |
83 |
84 |
85 | ); 86 | } 87 | } 88 | 89 | export default Dashboard; 90 | 91 | -------------------------------------------------------------------------------- /app/components/index.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import { Route, BrowserRouter, Link, Redirect, Switch, IndexRoute} from 'react-router-dom'; 3 | import Login from './children/Auth/Login'; 4 | import Signup from './children/Auth/Signup'; 5 | import Main from './Main'; 6 | import Account from './children/Auth/Account'; 7 | import Dashboard from './children/Dashboard'; 8 | import Topic from './children/DB_children/grandchildren/Topic'; 9 | import { logout } from './utils/firehelp'; 10 | import { firebaseAuth } from '../firebase.js'; 11 | 12 | function PrivateRoute ({component: Component, authed, ...rest}) { 13 | return ( 14 | authed === true 17 | ? 18 | : } 19 | /> 20 | ) 21 | } 22 | 23 | function PublicRoute ({component: Component, authed, ...rest}) { 24 | return ( 25 | authed === false 28 | ? 29 | : } 30 | /> 31 | ) 32 | } 33 | 34 | export default class App extends Component { 35 | constructor(){ 36 | super(); 37 | this.state = { 38 | authed: false, 39 | loading: true, 40 | } 41 | } 42 | componentDidMount () { 43 | this.removeListener = firebaseAuth().onAuthStateChanged((user) => { 44 | if (user) { 45 | this.setState({ 46 | authed: true, 47 | loading: false, 48 | }) 49 | } else { 50 | this.setState({ 51 | authed: false, 52 | loading: false 53 | }) 54 | } 55 | }) 56 | } 57 | componentWillUnmount () { 58 | this.removeListener() 59 | } 60 | render() { 61 | return this.state.loading === true ?

Loading

: ( 62 | 63 |
64 |
65 | 88 |
89 |
90 | 91 | 92 | 93 | 94 | 95 | 96 | 97 | 98 | 99 |

No Match

} /> 100 | 101 |
102 |
103 |
104 |
105 | 106 | ); 107 | } 108 | } -------------------------------------------------------------------------------- /app/components/children/DB_children/DoctorForm.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactModal from 'react-modal'; 3 | import formhelp from '../../utils/formhelp.js' 4 | // import style from '' 5 | const customModal = { 6 | content : { 7 | top : '50%', 8 | left : '50%', 9 | right : 'auto', 10 | bottom : 'auto', 11 | marginRight : '-50%', 12 | transform : 'translate(-50%, -50%)' 13 | } 14 | }; 15 | class DoctorForm extends React.Component { 16 | 17 | constructor (props) { 18 | super(props); 19 | this.state = { 20 | showModal: false, 21 | fullname: '', 22 | website: '', 23 | phonenumber: '', 24 | condition: this.props.condition, 25 | hospital: '', 26 | reason: '', 27 | info: [] 28 | }; 29 | 30 | this.handleOpenModal = this.handleOpenModal.bind(this); 31 | this.handleCloseModal = this.handleCloseModal.bind(this); 32 | this.handleSubmitModal = this.handleSubmitModal.bind(this); 33 | this.handleInputChange = this.handleInputChange.bind(this); 34 | } 35 | componentWillMount () { 36 | formhelp.showInfo() 37 | .then((data) => { 38 | // console.log('did mount' + '' + data) 39 | this.setState({ 40 | info: data 41 | }) 42 | }) 43 | } 44 | 45 | handleOpenModal () { 46 | this.setState({ showModal: true }); 47 | } 48 | 49 | handleCloseModal () { 50 | this.setState({ showModal: false }); 51 | } 52 | handleSubmitModal() { 53 | this.setState({ 54 | showModal:false, 55 | fullname: '', 56 | website: '', 57 | phonenumber: '', 58 | condition: '', 59 | hospital: '', 60 | reason: '', 61 | }); 62 | formhelp.postInfo(this.state) 63 | .then((doc) => { 64 | console.log("this.state " + this.state) 65 | this.setState({ 66 | 67 | info: this.state.info.concat([doc]), 68 | }); 69 | }); 70 | } 71 | handleInputChange(event) { 72 | const target = event.target; 73 | const value = target.value; 74 | const name = target.name; 75 | const condition = this.props.condition 76 | this.setState({ 77 | [name]: value, 78 | condition: condition 79 | 80 | }); 81 | } 82 | 83 | render () { 84 | // console.log("Doctor PROPS",this.props); 85 | const confilter = this.state.info.filter((c) => { 86 | return c.condition === this.props.condition}); 87 | return ( 88 |
89 |
90 |
91 |
92 | 93 |

doctorDoctor Recommendations

94 | 95 | 96 | 97 |
98 |
99 | 100 |
101 | 102 |
103 |
104 | {/*
{this.state.info.fullname}
*/} 105 | 106 | {confilter.map((result, i) => { 107 | return

Name : {result.fullname}

Website: {result.website}

Phone: {result.phonenumber}

Known Hospital Affiliation: {result.hospital}

Reason for Recommendation: {result.reason}

108 | })} 109 | 110 | 111 | 112 | 113 | 118 | 119 |
120 | 121 |
122 | 123 |
124 | 125 |
126 |

Add a Doctor

127 |
128 | 129 |
130 | 134 |
135 | 136 |
137 | 142 |
143 | 144 |
145 | 150 |
151 | 152 |
153 | 158 |
159 | 160 |
161 | 166 |
167 | 168 |
169 | 170 | 173 | 174 | 175 | 176 |
177 |
178 |
179 |
180 | 181 |
182 |
183 |
184 |
185 |
186 | ); 187 | } 188 | } 189 | 190 | export default DoctorForm 191 | 192 | -------------------------------------------------------------------------------- /public/css/style.css: -------------------------------------------------------------------------------- 1 | body { 2 | background: #757f9a; 3 | background: -webkit-linear-gradient(to right, #757f9a, #d7dde8); /* Chrome 10-25, Safari 5.1-6 */ 4 | background: linear-gradient(to right, #757f9a, #d7dde8); 5 | 6 | } 7 | 8 | .header { 9 | background-color: #2578a0; 10 | 11 | } 12 | 13 | #transparent { 14 | background: transparent; 15 | float: right; 16 | } 17 | 18 | .button { 19 | display: inline-block; 20 | border-radius: 4px; 21 | background-color: #2578a0; 22 | border: none; 23 | color: #FFFFFF; 24 | text-align: center; 25 | font-size: 20px; 26 | padding: 20px; 27 | width: 200px; 28 | height: 50px; 29 | transition: all 0.5s; 30 | cursor: pointer; 31 | margin: 5px; 32 | box-shadow: 4px 4px 5px #808080; 33 | 34 | } 35 | 36 | .button span { 37 | cursor: pointer; 38 | display: inline-block; 39 | position: relative; 40 | transition: 0.5s; 41 | } 42 | 43 | .button span:after { 44 | content: '\00bb'; 45 | position: absolute; 46 | opacity: 0; 47 | top: 0; 48 | right: -20px; 49 | transition: 0.5s; 50 | } 51 | 52 | .button:hover span { 53 | padding-right: 25px; 54 | } 55 | 56 | .button:hover span:after { 57 | opacity: 1; 58 | right: 0; 59 | } 60 | /*.mainbutton{ 61 | vertical-align:middle; 62 | } 63 | .mainimg{ 64 | width: 25px; height: 25px; 65 | }*/ 66 | 67 | h4 { 68 | font-family: 'Oxygen', sans-serif; 69 | color: white; 70 | } 71 | 72 | h1 { 73 | 74 | font-family: 'Paytone One', sans-serif; 75 | text-align: center; 76 | text-shadow: -3px -3px 6px rgba(150, 150, 150, 1); 77 | } 78 | 79 | h3 { 80 | 81 | font-family: 'Oxygen', sans-serif; 82 | text-align: center; 83 | } 84 | 85 | a { 86 | color: white; 87 | } 88 | 89 | .main-img { 90 | 91 | border:2px solid #fff; box-shadow: 8px 8px 10px #aaa; } 92 | 93 | .panel { 94 | background-color: #2578a0; 95 | box-shadow: 8px 8px 10px #aaa; 96 | } 97 | 98 | h2 { 99 | font-family: 'Oxygen', sans-serif; 100 | text-align: center; 101 | color: white; 102 | } 103 | 104 | h3 { 105 | font-family: 'Oxygen', sans-serif; 106 | text-align: center; 107 | color: white; 108 | } 109 | 110 | .well { 111 | background-color: #2578a0; 112 | box-shadow: 8px 8px 10px #aaa; 113 | width: 800px; 114 | 115 | } 116 | 117 | .btn.btn-open { 118 | background-color: white; 119 | color: black; 120 | } 121 | 122 | .btn.btn-default { 123 | background-color: #dd673f; 124 | color: white; 125 | float: left; 126 | } 127 | 128 | .btn.btn-primary { 129 | color: white; 130 | float: right; 131 | } 132 | 133 | #tagLine { 134 | text-shadow: -3px -3px 6px rgba(150, 150, 150, 1); 135 | } 136 | 137 | .doctor { 138 | height: 50px; 139 | width: 50px; 140 | } 141 | 142 | .news { 143 | height: 50px; 144 | width: 50px; 145 | } 146 | 147 | .forum { 148 | height: 50px; 149 | width: 50px; 150 | 151 | } 152 | 153 | hr { 154 | height: 12px; 155 | border: 0; 156 | box-shadow: inset 0 12px 12px -12px rgba(0, 0, 0, 0.5); 157 | background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0)); 158 | } 159 | 160 | /*BELOW HERE IS FOR THE FORMS IN THE MODALS*/ 161 | 162 | 163 | html{ 164 | background-color: #f3f3f3; 165 | } 166 | 167 | .form-register{ 168 | max-width: 1000px; 169 | width: 100%; 170 | margin: 0 auto; 171 | 172 | font: bold 14px sans-serif; 173 | text-align: center; 174 | } 175 | 176 | .form-register-with-email{ 177 | position: relative; 178 | display: inline-block; 179 | vertical-align: top; 180 | margin-right: 130px; 181 | text-align: center; 182 | } 183 | 184 | .form-register-with-email .form-white-background{ 185 | width: 570px; 186 | box-sizing: border-box; 187 | background-color: #ffffff; 188 | padding: 60px 80px; 189 | margin-bottom: 35px; 190 | } 191 | 192 | .form-register-with-email .form-row{ 193 | text-align: left; 194 | margin-bottom: 23px; 195 | } 196 | 197 | .form-register-with-email .form-title-row{ 198 | text-align: center; 199 | margin-bottom: 50px; 200 | } 201 | 202 | .form-register-with-email h1{ 203 | display: inline-block; 204 | box-sizing: border-box; 205 | color: #4c565e; 206 | font-size: 24px; 207 | padding: 0 20px 15px; 208 | border-bottom: 2px solid #6caee0; 209 | margin: 0; 210 | } 211 | 212 | .form-register-with-email .form-row > label span{ 213 | display: inline-block; 214 | box-sizing: border-box; 215 | color: #5f5f5f; 216 | width: 125px; 217 | text-align: right; 218 | padding-right: 25px; 219 | } 220 | 221 | .form-register-with-email input{ 222 | color: #5f5f5f; 223 | box-sizing: border-box; 224 | width: 230px; 225 | box-shadow: 1px 2px 4px 0 rgba(0, 0, 0, 0.08); 226 | padding: 7px 18px; 227 | border: 1px solid #dbdbdb; 228 | } 229 | 230 | .form-register-with-email textarea{ 231 | color: #5f5f5f; 232 | box-sizing: border-box; 233 | width: 400px; 234 | height: 100px; 235 | overflow:scroll; 236 | box-shadow: 1px 2px 4px 0 rgba(0, 0, 0, 0.08); 237 | padding: 7px 18px; 238 | border: 1px solid #dbdbdb; 239 | } 240 | 241 | .form-register-with-email .form-checkbox input{ 242 | margin-left: 128px; 243 | margin-right: 10px; 244 | width: auto; 245 | vertical-align: top; 246 | } 247 | 248 | .form-register-with-email .form-row .form-checkbox span{ 249 | font-size: 12px; 250 | font-weight: normal; 251 | display: inline-block; 252 | text-align: left; 253 | width: 220px; 254 | margin: 0; 255 | } 256 | 257 | .form-register-with-email .form-checkbox span a{ 258 | text-decoration: none; 259 | color: #6caee0; 260 | } 261 | 262 | .form-register-with-email button{ 263 | display: inline; 264 | border-radius: 2px; 265 | background-color: #6caee0; 266 | color: #ffffff; 267 | font-weight: bold; 268 | box-shadow: 1px 2px 4px 0 rgba(0, 0, 0, 0.08); 269 | padding: 15px 35px; 270 | border: 0; 271 | margin: 55px auto 0; 272 | cursor: pointer; 273 | } 274 | 275 | .form-register-with-email .form-log-in-with-existing{ 276 | text-decoration: none; 277 | padding: 4px 8px; 278 | font-weight: normal; 279 | color: #7b9d62; 280 | background-color: #d6f0c3; 281 | } 282 | 283 | 284 | .signuppage{ 285 | height: 800px; 286 | } 287 | 288 | .catwell{ 289 | width: 60%; 290 | color: white; 291 | font-family: 'Oxygen', sans-serif; 292 | margin: auto; 293 | margin-bottom: 20px; 294 | overflow:auto; 295 | text-overflow: auto; 296 | word-wrap: break-word 297 | 298 | 299 | } 300 | .top{ 301 | padding-top: 0px; 302 | margin-top: 0px; 303 | } 304 | nav.navbar.navbar-static-top{ 305 | margin-bottom: 0px; 306 | padding-bottom: 0px; 307 | 308 | } 309 | 310 | .scrollwell{ 311 | height: 300px; 312 | width: 75%; 313 | overflow: scroll; 314 | } 315 | 316 | 317 | .postBut { 318 | margin-left: 25px; 319 | margin-top: 15px; 320 | margin-bottom: 15px; 321 | } 322 | .account{ 323 | width: 85%; 324 | color: white; 325 | font-family: 'Oxygen', sans-serif; 326 | margin: auto; 327 | margin-bottom: 20px; 328 | background-color: #CF6D4A; 329 | } 330 | 331 | .bluewell{ 332 | background-color: #2578a0; 333 | } 334 | 335 | 336 | 337 | -------------------------------------------------------------------------------- /app/components/children/DB_children/grandchildren/Topic.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactModal from 'react-modal'; 3 | import Tabs from 'react-simpletabs'; 4 | import forumTable from '../../../utils/forumTablehelp.js'; 5 | import commentHelp from '../../../utils/commenthelp.js'; 6 | import axios from 'axios' 7 | 8 | const customModal = { 9 | content : { 10 | top : '50%', 11 | left : '50%', 12 | right : 'auto', 13 | bottom : 'auto', 14 | marginRight : '-50%', 15 | transform : 'translate(-50%, -50%)' 16 | } 17 | }; 18 | 19 | const tabStyle = { 20 | tabPane : { 21 | width : '10%', 22 | display : 'block' 23 | } 24 | }; 25 | 26 | 27 | 28 | 29 | class Topic extends React.Component { 30 | constructor(props) { 31 | super(props); 32 | this.state = { 33 | showModal: false, 34 | title:'', 35 | category:'localSupport', 36 | author:'', 37 | content: '', 38 | location: this.props.match.params.location, 39 | condition: this.props.match.params.condition, 40 | posts: [], 41 | }; 42 | this.handleOpenModal = this.handleOpenModal.bind(this); 43 | this.handleCloseModal = this.handleCloseModal.bind(this); 44 | this.handleSubmitModal = this.handleSubmitModal.bind(this); 45 | this.handleInputChange = this.handleInputChange.bind(this); 46 | this.handleComments = this.handleComments.bind(this); 47 | } 48 | 49 | componentWillMount(){ 50 | this.getPosts(); 51 | } 52 | 53 | // componentDidMount () { 54 | // console.log("mounted this.posts", this.state.posts); 55 | // // this.getPosts() 56 | // } 57 | 58 | getPosts(){ 59 | forumTable.showInfo().then((posts) => { 60 | console.log('did mount(data): ', posts) 61 | this.setState({posts}); 62 | }); 63 | 64 | } 65 | 66 | handleOpenModal () { 67 | this.setState({ showModal: true }); 68 | 69 | } 70 | 71 | handleCloseModal () { 72 | this.setState({ showModal: false }); 73 | } 74 | 75 | handleSubmitModal() { 76 | 77 | this.setState({ 78 | showModal:false, 79 | }); 80 | forumTable.postInfo(this.state) 81 | .then((forum) => { 82 | this.setState({ 83 | posts: this.state.posts.concat([forum]), 84 | location: this.props.match.params.location, 85 | condition:this.props.match.params.condition 86 | }); 87 | }); 88 | } 89 | 90 | handleComments(id) { 91 | console.log('first invocation bound on id', id); 92 | console.log("this", this); 93 | return (e) => { 94 | e.preventDefault(); 95 | 96 | commentHelp.postComment({ data: this.state, id }) 97 | .then((comment) => { 98 | console.log('id: ', id) 99 | 100 | this.state.posts.forEach((element) => { 101 | if(element._id == id){ 102 | this.setState({ 103 | posts: this.state.posts.concat([comment]), 104 | comment: '', 105 | username: '' 106 | }); 107 | console.log('after submit mdoal', this.state) 108 | } 109 | }); 110 | }) 111 | .catch(console.error) 112 | } 113 | } 114 | 115 | handleInputChange(event) { 116 | const target = event.target; 117 | const value = target.type === 'dropdown' ? target.select : target.value; 118 | const name = target.name; 119 | const location = this.props.match.params.location; 120 | const condition = this.props.match.params.condition; 121 | this.setState({ 122 | [name]: value, 123 | location: location, 124 | condition: condition 125 | }); 126 | 127 | } 128 | 129 | render() { 130 | // console.log("TPIC PROPS",this.props); 131 | const routeFilter = this.state.posts.filter((post) => {return post.location == this.props.match.params.location && post.condition == this.props.match.params.condition}); 132 | const localSupport = routeFilter.filter((c) => {return c.category == 'localSupport'}); 133 | const hospitalDoctor = routeFilter.filter((c) => {return c.category == 'hospitalDoctor'}); 134 | const painMgmt = routeFilter.filter((c) => {return c.category == 'painMgmt'}); 135 | const chemo = routeFilter.filter((c) => {return c.category == 'chemo'}); 136 | const radiation = routeFilter.filter((c) => {return c.category == 'radiation'}); 137 | const alt = routeFilter.filter((c) => {return c.category == 'alt'}); 138 | 139 | return ( 140 | 141 |
142 |
143 | {/* Submit new Post to Forum */} 144 |
145 | 146 | 149 | 150 |
151 |
152 |
153 | 154 |
155 |

Add a Post

156 |
157 | 158 | 159 |
160 | 161 | 162 |
163 |
164 | 165 | 173 |
174 | 175 |
176 | 177 | 178 |
179 | 180 |
181 | 182 | 183 |
184 | 185 |
186 | 187 | 188 |
189 |
190 | 191 | 192 | 193 | 194 |
195 |
196 |
197 |
198 | 199 | 200 | 201 |
202 | 203 | 204 | 205 |
206 | {localSupport.map((res, i)=> {return })} 207 |
208 | 209 | 210 | 211 |
    212 | {hospitalDoctor.map((res, i)=> {return })} 213 |
214 | 215 | 216 | 217 |
    218 | {painMgmt.map((res, i)=> {return })} 219 |
220 | 221 | 222 | 223 |
    224 | {chemo.map((res, i)=> {return })} 225 |
226 | 227 | 228 |
    229 | {radiation.map((res, i)=> {return })} 230 |
231 | 232 | 233 |
    234 | {alt.map((res, i)=> {return })} 235 |
236 | 237 | 238 |
239 |
240 | ); 241 | } 242 | } 243 | 244 | class Post extends React.Component{ 245 | constructor(props){ 246 | super(props) 247 | this.state=props.post; 248 | console.log("post state",this.state); 249 | } 250 | 251 | componentDidMount(){ 252 | axios.get(`forumpost/${this.props.post._id}`).then(res=> this.setState({comments: res.data.comments})) 253 | } 254 | 255 | receiveComment(newComm){ 256 | console.log("newComm",newComm); 257 | // console.log(this.state); 258 | this.setState({comment:this.state.comment.concat(newComm)}); 259 | console.log("after update",this.state); 260 | } 261 | 262 | render(){ 263 | const result= this.props.post; 264 | // console.log(this.props.commentHandler); 265 | return (
266 |
267 |
268 |

Post: {result.title}

269 |

Authored By: {result.author}

270 |

{result.content}

271 |
272 | 273 |

Comments

274 | {this.state.comment.map((result,i)=>{ 275 | return (
276 |

Username: {result.username}

277 |

Comment: {result.comment}

278 |
)} 279 | )} 280 | this.receiveComment(comment)}/> 281 |
282 | 283 |
) 284 | 285 | } 286 | 287 | } 288 | 289 | class CommentForm extends React.Component{ 290 | constructor(props){ 291 | super(props); 292 | this.state={ 293 | showModal: false, 294 | username:'', 295 | comment:'' 296 | } 297 | console.log('commentform state: ', this.state) 298 | } 299 | 300 | handleOpenModal () { 301 | this.setState({ showModal: true }); 302 | 303 | } 304 | 305 | handleCloseModal () { 306 | this.setState({ showModal: false }); 307 | } 308 | 309 | handleInputChange(event) { 310 | const target = event.target; 311 | const value = target.type === 'checkbox' ? target.checked : target.value; 312 | const name = target.name; 313 | this.setState({[name]: value}); 314 | } 315 | 316 | handleSubmit(e){ 317 | e.preventDefault() 318 | commentHelp.postComment({ data: this.state, id:this.props.post._id }) 319 | .then(res=>{console.log("commentformresponse", res) 320 | this.props.commentHandler(res); 321 | this.setState({username:'', comment: '', showModal:false}) 322 | }) 323 | 324 | } 325 | 326 | render(){ 327 | const result = this.props.post; 328 | return (
329 | 330 | 333 |
334 |
335 |
336 | 337 |
338 |

Add a Comment

339 |
340 |
this.handleSubmit(e)}> 341 |
342 | 343 | this.handleInputChange(e)}> 344 | 345 |
346 |
347 | 349 |
350 | 351 | 352 | 353 | 354 |
355 |
356 |
357 |
358 | 359 |
360 | ); 361 | } 362 | 363 | } 364 | 365 | export default Topic; 366 | --------------------------------------------------------------------------------