Merge branch 'develop'

Contributing.md

@@ -1,7 +1,9 @@
 # Contributing to the TDM Calculator Project
 
 If you are not going to do hands-on development, you can simply experiment
-with the test version of the application at <a href="https://tdm-calc.herokuapp.com"> https://tdm-calc.herokuapp.com</a>.
+with the test version of the application at <a href="https://tdm-calc-staging.herokuapp.com"> https://tdm-calc-staging.herokuapp.com</a>.
+
+The version that LA DOT personnel are using is deployedd to <a href="https://tdm-calc.herokuapp.com"> https://tdm-calc.herokuapp.com</a>.
 
 If you wish to study or contribute to the code base, follow these Installation
 Instructions to install a development environment on your machine:
@@ -15,17 +17,17 @@ Instructions to install a development environment on your machine:
 
 ### Full-Stack React/Node Application Installation
 
-1. Clone this repo to your local drive.
-
 1. Start a terminal app, such as a Git bash shell on Windows or Terminal on Mac OS
 1. Create a source directory (e.g. hack-for-la) in the user's home directory and go in it (or use the folder where you normally put local git repositories)
    ```
-   cd && mkdir hack-for-la && cd hack-for-la
+   mkdir hackforla
+   cd hackforla
    ```
-1. Clone the repository
-   `git clone https://github.com/hackforla/tdm-calculator`
+1. Clone the TDM repository
 
-     </p></details>
+   ```
+   git clone https://github.com/hackforla/tdm-calculator
+   ```
 
 1. Change to the tdm-calculator directory:
    ```
@@ -50,74 +52,132 @@ Instructions to install a development environment on your machine:
 1. In one terminal window, navigate back to the /tdm-calculator directory and start the node server:
 
 ```
-cd .. && npm start
+cd ..
+npm start
 ```
 
 1. In a separate terminal window, navigate to the /tdm-calculator/client directory, start the react app, and open the browser :
 
 ```
-cd client && npm start
+cd client
+npm start
 ```
 
 Note: Node server (backend) should start before the React server (frontend/client)
 
 ## To Contribute Code
 
-We use the individual person branch Git flow in order to work to a volunteering environment.
+### Claiming an Issue
+
+Before modifying any code, an issue should exist for the task in the GitHub repo. You should make sure that no one else is assigned to the issue and then assign it to yourself, so we avoid stepping on each others' toes. If there is not an issue for the work you want to do, you should talk to the lead developer and/or project manager to get an issue created and prioritized on the kanban board and then have them create the issue from there for you to work on.
 
-1. After cloning the repository, create a branch with your name.
+We use the "Git Flow" workflow to manage source code. See [Vincent Driessen's seminal article](https://nvie.com/posts/a-successful-git-branching-model/) for an overview, though a few of the detailed procedures below have additional steps. We have modified a few steps here, so your changes are merged into _develop_ on GitHub (rather than locally). This allows others to easily view your changes, and is a smaller departure from the previous workflow to learn.
+
+1. After cloning the repository, create a feature branch with a name containing your name and a feature name, separated by dashes, for example.
 
 ```
-git checkout -b nicholas
+git checkout -b nicholas-issue-100 develop
 ```
 
+Note that your feature branch is based on the _develop_ branch, which is where feature changes will be integrated for eventual release to production.
+
 2. Claim an issue (see instructions down below) and start coding.
 
 3. Regularly add, commit, and push your code to your branch.
 
 ```
-git add . or git add -a
+git add -A
 git commit -m "Write your commit message here with overall description of your code changes"
-git push origin nicholas or git push --set-upstream origin nicholas or git push -u origin nicholas
+git push origin HEAD
 ```
 
-4. When an issue is completed and is ready for a pull request, make sure your code has the latest code from the master branch by pulling from the master branch. This is to ensure merge conflicts are in your local envinronment, which is easier to clean up, than in GitHub.
+4. When an issue is completed and is ready for a pull request, first add and commit your latest changes as in Step 3 above, then make sure your code has the latest code from the _develop_ branch by pulling from the develop branch. This is to ensure merge conflicts are in your local envinronment, which is easier to clean up, than in GitHub:
 
 ```
-git pull origin master
+git fetch
+git merge origin/develop
 ```
 
-5. Go onto the [GitHub repository for TDM-Calculator](https://github.com/hackforla/tdm-calculator). There are three options:
+5. Resolve any merge conflicts and _run the application_ (client and server) to be sure that the application builds correctly before proceeding. Then push your changes to your feature branch on the github repo:
+
+```
+git push origin HEAD
+```
+
+6. Go to the [GitHub repository for TDM-Calculator](https://github.com/hackforla/tdm-calculator). There are three options:
 
 - Click on "Compare & pull request" button underneath the "commits branches releases environment contributors" box.
 - Click on the "New Pull Request" button underneath the "commits branches releases environment contributors" box and underneath "Your recently pushed branches" section.
 - Click on the "Pull Request" tab and press "New Pull Request"
 
-6. In "Comparing Changes", switch the "compare" (right button) to your branch name. Make sure the "base" (left button) is on the master branch Double check the changes you've made down below, and click "Create pull request".
+7. In "Comparing Changes", switch the "compare" (right button) to your branch name. Make sure the "base" (left button) is on the _develop_ branch. Double check the changes you've made down below, and click "Create pull request". Make sure the description of your changes is reflected in the Pull Request, e.g.
+   "Start to incorporate Storybook and LADOT theme (colors, logos and headers)".
 
-7. Make sure the description of your changes is reflected in the Pull Request
+8. Click on "Create Pull Request" and wait for someone to review to merge your changes!
 
-- Ex. "Start to incorporate Storybook and LADOT theme (colors, logos and headers)
+9. Once your PR has been reviewed, accepted and merged to the develop branch, it will automatically be published to <a href="https://tdm-calc-staging.herokuapp.com"> https://tdm-calc-staging.herokuapp.com</a>. Please be sure to run the application here and make sure your changes are reflected in this deployed version of the develop branch.
 
-8. Add entrotech or fyliu as a reviewer.
+## Creating a Release
 
-9. Click on "Create Pull Request" and wait for someone to review to merge your changes!
+Creating a release should only be done by the release manager!
+Release branches are crated from teh _develop_ branch. Decide on a release number for the next release, using [semver](https://semver.org/) conventions. For example, if the current release is 1.0.0 and the changes in this release are minor, the new release number would be 1.0.1.
 
-Resources from our very own Hack For LA member!
-[Intro to Git CLI exercises](https://github.com/ndanielsen/intro-cli-git-github)
-[Intermediate Git CLI exercises](https://github.com/ndanielsen/intermediate-cli-git-github)
+- Make sure your local machine has an up-to-date version of the _develop_ branch:
 
-### Claiming an Issue
+```
+git checkout develop
+git fetch
+git merge origin/develop
+```
+
+- Create a new release branch from _develop_ wtih the name release-<release#>:
+
+```
+git checkout -b release-1.0.1 develop
+```
+
+- Update the release number in the application. This typically entails updating the package.json file version properties, and perhaps other locations where the release number might appear (For now, I just added it to the About.js component, though we should probably put it in a site footer or some inconspicuous place, so it can be viewed from the UI.)
 
-Before modifying any code, an issue should exist for the task in the GitHub repo. You should make sure that no one else is assigned to the issue and the assign it to yourself, so we avoid stepping on each others' toes. If there is not an issue for the work you want to do, you should talk to the lead developer and/or project manager to get an issue created and prioritized on the kanban board and then have them create the issue from there for you to work on.
+- Commit the version number change:
 
-### Working with forks and branches
+```
+git add -A
+git commit -m "Bumped version number to 1.0.1"
+```
 
-- Explain your guidelines here.
+- Run the application (locally and/or in a deployment environment) and make any fixes necessary. These should be very minor changes - significant changes should be made by creating a feature release based on the _develop_ branch as described above. When the application is ready for release...
+- Merge the release branch into _master_:
 
-### Working with pull requests and reviews
+```
+git checkout master
+git merge --no-ff release-1.0.0
+git tag -a v1.0.1 -m "Release version 1.0.1"
+```
+
+The release is now done and tagged for future reference.
+
+- Merge the release branch into _develop_:
+
+```
+git checkout develop
+git merge --no-ff release-1.0.1
+```
 
-- Explain your process.
+- We are now done with this release and can delete the release branch:
+
+```
+git branch -d release-1.0.1
+```
+
+- Deploy the master branch to production. At present, Heroku is configured to detect the commit to _master_ and automatically deploy the application to production. You should navigate to <a href="https://tdm-calc-staging.herokuapp.com"> https://tdm-calc-staging.herokuapp.com</a> after giving Heroku time to deploy and verify that the application runs, and any visible release # has been incremented.
+
+## Creating a HotFix
+
+TBD
+
+Resources from our very own Hack For LA member!
+[Intro to Git CLI exercises](https://github.com/ndanielsen/intro-cli-git-github)
+[Intermediate Git CLI exercises](https://github.com/ndanielsen/intermediate-cli-git-github)
 
 ### Testing
 

app/services/account.service.js

@@ -35,13 +35,11 @@ const selectById = id => {
 };
 
 const selectByEmail = email => {
-  console.log('email', email)
   return mssql
     .executeProc("Login_SelectByEmail", sqlRequest => {
       sqlRequest.addParameter("Email", TYPES.NVarChar, email);
     })
     .then(response => {
-      console.log('email response', response.resultSets[0])
       if (
         response.resultSets &&
         response.resultSets[0] &&
@@ -194,7 +192,6 @@ const forgotPassword = async model => {
   try {
 
     const checkAccountResult = await selectByEmail(email)
-    console.log('checkAccount', checkAccountResult)
     if (
       checkAccountResult
     ) {
@@ -213,8 +210,16 @@ const forgotPassword = async model => {
     }
     // Replace the success result if there is a prob
     // sending email.
-    result = await requestResetPasswordConfirmation(email, result);
-    return result;
+    let tokenInsertResult = await requestResetPasswordConfirmation(email, result);
+    if (tokenInsertResult) {
+      return result;
+    } else {
+      return {
+        isSuccess: false,
+        code: 'FORGOT_PASSWORD_INTERNAL_SERVER_ERROR',
+        message: 'Something went wrong with your request. Please try again later. If the problem persists,contact TDM.'
+      }
+    }
   } catch (err) {
     return Promise.reject(`Unexpected Error: ${err.message}`);
   }
@@ -233,7 +238,6 @@ const requestResetPasswordConfirmation = async (email, result) => {
       sqlRequest.addParameter("token", TYPES.NVarChar, token);
       sqlRequest.addParameter("email", TYPES.NVarChar, email);
     });
-    console.log('request confirmation', email, token)
     result = await sendResetPasswordConfirmation(email, token);
     return result;
   } catch (err) {

client/src/App.js

@@ -8,13 +8,13 @@ import Projects from "./components/Projects";
 import Header from "./components/Header";
 import About from "./components/About";
 import ContactUs from "./components/ContactUs";
-import Register from "./components/Register";
-import ConfirmEmail from "./components/ConfirmEmail";
-import Login from "./components/Login";
+import Register from "./components/Authorization/Register";
+import ConfirmEmail from "./components/Authorization/ConfirmEmail";
+import Login from "./components/Authorization/Login";
 import Admin from "./components/Admin";
 import LandingPage from "./components/LandingPage/LandingPage";
-import ResetPassword from "./components/ResetPassword";
-import ResetPasswordRequest from "./components/ResetPasswordRequest";
+import ResetPassword from "./components/Authorization/ResetPassword";
+import ResetPasswordRequest from "./components/Authorization/ResetPasswordRequest";
 import "./styles/App.scss";
 import axios from "axios";
 
@@ -69,7 +69,7 @@ const App = props => {
   };
 
   return (
-    <div>
+    <React.Fragment>
       <UserContext.Provider value={account}>
         <Router>
           <Header account={account} setAccount={setAccount} />
@@ -85,27 +85,21 @@ const App = props => {
             />
             <Route path="/about" component={About} />
             <Route path="/register/:email?" component={Register} />
-            <Route path="/confirm/:token">
-              <ConfirmEmail />
-            </Route>
+            <Route path="/confirm/:token" component={ConfirmEmail} />
             <Route
               path="/login/:email?"
               render={() => <Login setLoggedInAccount={setLoggedInAccount} />}
             />
-            <Route path="/forgotpassword">
-              <ResetPasswordRequest />
-            </Route>
-            <Route path="/resetPassword/:token">
-              <ResetPassword />
-            </Route>
+            <Route path="/forgotpassword" component={ResetPasswordRequest} />
+            <Route path="/resetPassword/:token" component={ResetPassword} />
             <Route path="/contactus" component={ContactUs} />
             {account && account.role === "admin" ? (
               <Route path="/admin" render={() => <Admin account={account} />} />
             ) : null}
           </div>
         </Router>
       </UserContext.Provider>
-    </div>
+    </React.Fragment>
   );
 };
 

client/src/components/ConfirmEmail.js → client/src/components/Authorization/ConfirmEmail.js

@@ -1,7 +1,7 @@
 import React, { useState, useEffect } from "react";
 import { Redirect, withRouter } from "react-router-dom";
-import * as accountService from "../services/account-service";
-import { useToast } from "../contexts/Toast";
+import * as accountService from "../../services/account-service";
+import { useToast } from "../../contexts/Toast";
 
 const ConfirmEmail = props => {
   const { history } = props;
@@ -39,7 +39,6 @@ const ConfirmEmail = props => {
       ) : confirmResult.success ? (
         <Redirect to={`/login/${email}`} />
       ) : emailSent ? (
-        // TODO: CHECK ON THIS CODE - How do we test this to see this?? -- Claire
         <p>
           {`A confirmation email has been sent to ${email}. Please find this
             email and click on the link provided to complete your email confirmation.`}

client/src/components/Login.js → client/src/components/Authorization/Login.js

@@ -2,7 +2,8 @@ import React, {useState} from "react";
 import { Link, withRouter } from "react-router-dom";
 import { Formik, Form, Field, ErrorMessage } from "formik";
 import * as Yup from "yup";
-import * as accountService from "../services/account-service";
+import * as accountService from "../../services/account-service";
+import SideBar from '../Sidebar';
 
 const Login = props => {
   const [errorMsg, setErrorMsg] = useState("")
@@ -68,7 +69,7 @@ const Login = props => {
         className="tdm-wizard"
         style={{ flex: "1 0 auto", display: "flex", flexDirection: "row" }}
       >
-        <div className="tdm-wizard-sidebar"></div>
+        <SideBar />
         <div
           className="tdm-wizard-content-container"
           style={{ justifyContent: "center" }}

client/src/components/Register.js → client/src/components/Authorization/Register.js

@@ -1,8 +1,9 @@
 import React, {useState} from "react";
-import * as accountService from "../services/account-service";
+import * as accountService from "../../services/account-service";
 import { Formik, Form, Field, ErrorMessage } from "formik";
 import { Link, withRouter } from "react-router-dom";
 import * as Yup from "yup";
+import Sidebar from '../Sidebar';
 
 const Register = props => {
   const { match } = props;
@@ -69,8 +70,7 @@ const Register = props => {
   return (
     <div style={{ flex: "1 0 auto", display: "flex", flexDirection: "column" }} >
       <div className="tdm-wizard" style={{ flex: "1 0 auto", display: "flex", flexDirection: "row" }}>
-        <div className="tdm-wizard-sidebar">
-        </div>
+        <Sidebar />
         <div className="tdm-wizard-content-container" style={{justifyContent: "center"}}>
 
         <h1 style={{fontWeight: 500}}>Create a New Account</h1>

client/src/components/ResetPassword.js → client/src/components/Authorization/ResetPassword.js

@@ -1,10 +1,11 @@
 import React, { useState } from 'react';
 import { withRouter } from "react-router-dom";
-import * as accountService from "../services/account-service";
+import * as accountService from "../../services/account-service";
 import { Formik, Form, Field, ErrorMessage } from "formik";
 import * as Yup from "yup";
 import clsx from 'clsx';
 import { useStyles } from './ResetPasswordRequest'
+import Sidebar from '../Sidebar';
 
 
 const validationSchema = Yup.object().shape({
@@ -35,7 +36,8 @@ export function ResetPassword(props) {
 
   return (
     <div className={classes.root}>
-      <div className={classes.content}>
+      <Sidebar />
+      <div className={classes.formContent}>
         { !success ? (
           <>
             <h1>Reset Your Password</h1>