commenting

README.md

@@ -1,68 +1,19 @@
-This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
 
-## Available Scripts
 
-In the project directory, you can run:
+You must create a mapbox account to get an api key and insert into an .env folder created in the root directory with REACT_APP_API_KEY as the key name. If you don't want to go through that mess, message me and i'll send you mine.
 
-### `npm start`
+Clone down the repository, cd into the project directory. (front-end-capstone)
+And in the project directory run:
 
-Runs the app in the development mode.<br>
-Open [http://localhost:3000](http://localhost:3000) to view it in the browser.
+npm start
+Runs the app in the development mode.
+Open http://localhost:3000 to view it in the browser.
 
-The page will reload if you make edits.<br>
+The page will reload if you make edits.
 You will also see any lint errors in the console.
 
-### `npm test`
+In a seperate terminal window,
+Inside of the api folder (api) of the app, run this command to start the database.
 
-Launches the test runner in the interactive watch mode.<br>
-See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.
-
-### `npm run build`
-
-Builds the app for production to the `build` folder.<br>
-It correctly bundles React in production mode and optimizes the build for the best performance.
-
-The build is minified and the filenames include the hashes.<br>
-Your app is ready to be deployed!
-
-See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.
-
-### `npm run eject`
-
-**Note: this is a one-way operation. Once you `eject`, you can’t go back!**
-
-If you aren’t satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project.
-
-Instead, it will copy all the configuration files and the transitive dependencies (Webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you’re on your own.
-
-You don’t have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn’t feel obligated to use this feature. However we understand that this tool wouldn’t be useful if you couldn’t customize it when you are ready for it.
-
-## Learn More
-
-You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started).
-
-To learn React, check out the [React documentation](https://reactjs.org/).
-
-### Code Splitting
-
-This section has moved here: https://facebook.github.io/create-react-app/docs/code-splitting
-
-### Analyzing the Bundle Size
-
-This section has moved here: https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size
-
-### Making a Progressive Web App
-
-This section has moved here: https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app
-
-### Advanced Configuration
-
-This section has moved here: https://facebook.github.io/create-react-app/docs/advanced-configuration
-
-### Deployment
-
-This section has moved here: https://facebook.github.io/create-react-app/docs/deployment
-
-### `npm run build` fails to minify
-
-This section has moved here: https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify
+json-server -p 5002 -w issues.json
+Login with any user name or password

src/components/applicationViews.js

@@ -2,15 +2,15 @@ import { Route, Redirect, withRouter } from "react-router-dom";
 import React, { Component } from "react";
 import IssueList from "./issues/issueList";
 import Login from "./authentication/login";
-import Welcome from "./authentication/welcome";
-import Register from "./authentication/register";
 import issueManager from "./modules/issueManager";
 import loginManager from "./modules/loginManager";
 import IssueEditForm from "./issues/issueEditForm";
 import IssueForm from "./issues/newIssueForm";
 import "./issues/issues.css";
 import "bootstrap/dist/css/bootstrap.min.css";
 
+
+//Setting the state of the current variables
 class ApplicationViews extends Component {
   state = {
     issues: [],
@@ -19,9 +19,7 @@ class ApplicationViews extends Component {
   };
 
   isAuthenticated = () => sessionStorage.getItem("userId") !== null;
-
-
-
+//function to update the issue
   updateIssue = (resourse, editedIssueObject) => {
     return issueManager
       .put(resourse, editedIssueObject)
@@ -32,6 +30,7 @@ class ApplicationViews extends Component {
         });
       });
   };
+  //function to add a new issue
   addIssue = issue =>
     issueManager
       .post("issues", issue)
@@ -41,12 +40,13 @@ class ApplicationViews extends Component {
           issues: issues
         })
       );
+  //function to attach the user to the new issue being stored
   getUser = userName => {
     return loginManager.get("user", userName);
   };
-
+//rendering and routes for the different tabs on navbar
   render() {
-    console.log("app render trigger")
+    console.log("app render trigger");
     return (
       <React.Fragment>
         <Route
@@ -55,11 +55,7 @@ class ApplicationViews extends Component {
           render={props => {
             if (this.isAuthenticated()) {
               return (
-                <IssueList
-                  {...props}
-                  getUserIssues={this.getUserIssues}
-
-                />
+                <IssueList {...props} getUserIssues={this.getUserIssues} />
               );
             } else {
               return <Redirect to="/login" />;
@@ -90,4 +86,4 @@ class ApplicationViews extends Component {
   }
 }
 
-export default withRouter(ApplicationViews)
+export default withRouter(ApplicationViews);

src/components/issues/issueList.js

@@ -4,7 +4,7 @@ import issueManager from "../modules/issueManager";
 import "./issues.css"
 
 
-
+//getting the user to display only their issues
 let userId = sessionStorage.getItem("userId");
 
 export default class IssueList extends Component {

src/components/issues/newIssueForm.js

@@ -12,6 +12,7 @@ import ReactMapGL, { NavigationControl, GeolocateControl } from "react-map-gl";
 import "mapbox-gl/dist/mapbox-gl.css";
 import "./issues.css";
 
+
 const API_KEY = process.env.REACT_APP_API_KEY;
 const CLOUDINARY_UPLOAD_PRESET = "uploadCapstone";
 const CLOUDINARY_UPLOAD_URL =
@@ -24,6 +25,7 @@ const navStyle = {
   padding: "10px"
 };
 
+//accessing the mapbox api, cloudinary api, the form, and rendering to dom
 export default class IssueForm extends Component {
   // Set initial state
   onClickMap = evt => {
@@ -32,6 +34,7 @@ export default class IssueForm extends Component {
       lngLat: evt.lngLat
     });
   };
+  //map rendering
   constructor(props) {
     super(props);
     this.toggle = this.toggle.bind(this);
@@ -57,7 +60,7 @@ export default class IssueForm extends Component {
     };
     this.handleDropChange = this.handleDropChange.bind(this);
   }
-
+//drop down toggle for issue type page
   toggle() {
     this.setState(prevState => ({
       dropdownOpen: !prevState.dropdownOpen
@@ -70,7 +73,7 @@ export default class IssueForm extends Component {
     stateToChange[evt.target.id] = evt.target.value;
     this.setState(stateToChange);
   };
-
+  //data handeler for form to database
   constructNewIssue = evt => {
     evt.preventDefault();
     if (this.state.address === "") {
@@ -95,7 +98,7 @@ export default class IssueForm extends Component {
       dropdownOpen: !prevState.dropdownOpen
     }));
   }
-  //image uploading
+  //image upload cloudinary api
   onImageDrop(files) {
     this.setState({
       uploadedFile: files[0]
@@ -125,7 +128,7 @@ export default class IssueForm extends Component {
   handleDropChange(e) {
     this.setState({ selectValue: e.target.value });
   }
-
+//dom rendering of each component for the form on the new issue page
   render() {
     const { viewport } = this.state;
     return (

src/components/modules/issueManager.js

@@ -1,3 +1,6 @@
+
+//fetch calls to get data from our database.json
+
 const remoteURL = "http://localhost:5002";
 
 export default {

src/components/modules/loginManager.js

@@ -1,3 +1,5 @@
+
+//fetch calls for logging in a user
 const remoteURL = "http://localhost:5002"
 
 export default {