New project structure

IS3106-T07 · Oct 25, 2018 · 7d52b90 · 7d52b90
1 parent 114ca15
commit 7d52b90
Show file tree

Hide file tree

Showing 30 changed files with 273 additions and 83 deletions.
diff --git a/README.md b/README.md
@@ -1,50 +1,99 @@
-##Project Structure
+## Project Files 
+This is our basic file structure, including `build/`, `public/` and `src/`. 
 ```
-src/
-├── _actions
-│   ├── alert.actions.js
-│   ├── index.js
-│   └── user.actions.js
-├── _components
-│   ├── PrivateRoute.jsx
-│   └── index.js
-├── _constants
-│   ├── alert.constants.js
-│   ├── index.js
-│   └── user.constants.js
-├── _helpers
-│   ├── auth-header.js
-│   ├── fake-backend.js
-│   ├── history.js
-│   ├── index.js
-│   └── store.js
-├── _reducers
-│   ├── alert.reducer.js
-│   ├── authentication.reducer.js
-│   ├── index.js
-│   ├── registration.reducer.js
-│   └── users.reducer.js
-├── _services
-│   ├── index.js
-│   └── user.service.js
-├── App
-│   ├── App.jsx
-│   └── index.js
-├── HomePage
-│   ├── HomePage.jsx
-│   └── index.js
-├── LoginPage
-│   ├── LoginPage.jsx
-│   └── index.js
-├── RegisterPage
-│   ├── RegisterPage.jsx
-│   └── index.js
-├── AnotherFeature
-│   ├── AnotherFeature.jsx
-│   └── index.js
-├── index.html
-└── index.jsx
+/   
+├── build
+│   └── ...generated static resources: css, js, media
+│
+├── public
+│   └── ...favicon.ico, index.html, manifest.json
+│
+├── src
+│   └── ...development files
+│
+├── .gitignore
+├── package.json (dependencies, scripts, configuration)
+└── README.md
 ```
+## Development
+For development, `src/` contains the main assets. There are `components/`, `resources/`, redux-based `actions/`, `constants/`, `reducers/` and `services/`.
+
+**Note**: each folder contains a file called `index.js`. This helps to shorten import statements, and the decision to include these is for convenience.
+
+```
+/ ...
+└── src
+    ├── actions
+    │   ├── ...actions.js
+    │   └── index.js
+    ├── components
+    │   ├── css
+    │   │   └── ...example.module.css
+    │   ├── App.js
+    │   ├── PrivateRoute.js
+    │   └── ...PageComponents.js
+    ├── constants
+    │   ├── ...constants.js
+    │   └── index.js
+    ├── reducers
+    │   ├── ...reducer.js
+    │   └── index.js
+    ├── resources
+    │   └── (images)
+    ├── services
+    │   ├── ...service.js
+    │   └── index.js
+    └ ...
+```
+
+And `helpers/`, `index.html` and `index.js`. 
+```
+    ...
+    ├── helpers
+    │   ├── auth-header.js
+    │   ├── fake-backend.js
+    │   ├── history.js
+    │   ├── index.js
+    │   ├── serviceWorker.js
+    │   └── store.js
+    ├── index.html
+    └── index.js
+```
+
+## Using this project
+The development server runs on `PORT 8000`.  See *scripts* in `package.json` to change.  
+Configure *apiUrl* at `src/index.js`. Default value: http://localhost:3000.  
+
+**Note**: `HTTPS` is required for service workers.  
+
+Run in **development**
+```
+npm install 
+npm start
+HTTPS=true npm start                    // Linux, macOS (bash)
+set HTTPS=true&&npm start               // Windows (cmd.exe)
+($env:HTTPS = $true) -and (npm start)   // Windows (powershell)
+```
+Run in **production**
+```
+npm install
+npm run build
+serve -s build
+```
+Run **tests**
+```
+npm build
+npm run test
+```
+
+## Creating a component
+```
+// todo Guide
+```
+
+This brings us to the end of project-specific documentation.  
+The rest of the documentation was generated from `cra-v2`.
+# Documentation generated by create-react-app v2.
 
 This project was bootstrapped with [Create React App](https://github.com/facebookincubator/create-react-app).
 

diff --git a/public/index.html b/public/index.html
@@ -19,7 +19,7 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
-    <title>React App</title>
+    <title>Public</title>
   </head>
   <body>
     <noscript>

diff --git a/src/_service/user.service.js b/src/_service/user.service.js
@@ -75,11 +75,7 @@ function update(user) {
         body: JSON.stringify(user)
     };
 
-<<<<<<< HEAD:src/_service/user.service.js
-    return fetch(`${config.apiUrl}/users/${user.id}`, requestOptions).then(handleResponse);
-=======
     return fetch(`${apiUrl}/users/${user.id}`, requestOptions).then(handleResponse);
->>>>>>> Update to react-scripts@2.0, cra-v2 and other required structuing:src/_services/user.service.js
 }
 
 // prefixed function name with underscore because delete is a reserved word in javascript

diff --git a/src/_actions/alert.actions.js → src/actions/alert.actions.js b/src/_actions/alert.actions.js → src/actions/alert.actions.js
@@ -1,4 +1,4 @@
-import { alertConstants } from '../_constants';
+import { alertConstants } from '../constants';
 
 export const alertActions = {
     success,

diff --git a/src/actions/index.js b/src/actions/index.js
@@ -0,0 +1,2 @@
+export * from './alert.actions';
+export * from './user.actions';
diff --git a/src/_actions/user.actions.js → src/actions/user.actions.js b/src/_actions/user.actions.js → src/actions/user.actions.js
@@ -1,7 +1,6 @@
-import { userConstants } from '../_constants';
-import { userService } from '../_services';
+import { userConstants } from '../constants';
+import { userService, history } from '../helpers';
 import { alertActions } from './';
-import { history } from '../_helpers';
 
 export const userActions = {
     login,

diff --git a/src/App/App.jsx → src/components/App.js b/src/App/App.jsx → src/components/App.js
@@ -2,12 +2,12 @@ import React from 'react';
 import { Router, Route } from 'react-router-dom';
 import { connect } from 'react-redux';
 
-import { history } from '../_helpers';
-import { alertActions } from '../_actions';
-import { PrivateRoute } from '../_components';
-import { HomePage } from '../HomePage';
-import { LoginPage } from '../LoginPage';
-import { RegisterPage } from '../RegisterPage';
+import { history } from '../helpers';
+import { alertActions } from '../actions';
+import { PrivateRoute } from './PrivateRoute';
+import { HomePage } from './HomePage';
+import { LoginPage } from './LoginPage';
+import { RegisterPage } from './RegisterPage';
 
 class App extends React.Component {
     constructor(props) {

diff --git a/src/HomePage/HomePage.jsx → src/components/HomePage.js b/src/HomePage/HomePage.jsx → src/components/HomePage.js
@@ -2,7 +2,7 @@ import React from 'react';
 import { Link } from 'react-router-dom';
 import { connect } from 'react-redux';
 
-import { userActions } from '../_actions';
+import { userActions } from '../actions';
 
 class HomePage extends React.Component {
     componentDidMount() {

diff --git a/src/LoginPage/LoginPage.jsx → src/components/LoginPage.js b/src/LoginPage/LoginPage.jsx → src/components/LoginPage.js
@@ -2,10 +2,10 @@ import React from 'react';
 import { Link } from 'react-router-dom';
 import { connect } from 'react-redux';
 
-import { userActions } from '../_actions';
+import { userActions } from '../actions';
 
-import './login.module.css';
-import logo from '../img/logo_background.png';
+import './css/login.module.css';
+import logo from '../resources/logo_background.png';
 
 class LoginPage extends React.Component {
     constructor(props) {
@@ -48,20 +48,20 @@ class LoginPage extends React.Component {
             <div className="col-md-6 col-md-offset-3" align='center'>
 
                 <p >Welcome To Qoodie</p>
-                <img src={logo} alt='Qoodie logo'/>
+                        <img src={logo} alt="Qoodie logo" className="img-responsive" />
                 <h2>Login</h2>
 
                 <form name="form" onSubmit={this.handleSubmit}>
                     <div className={'form-group' + (submitted && !email ? ' has-error' : '')}>
-                        <label htmlFor="email">Email</label>
-                        <input type="text" className="form-control" name="email" value={email} onChange={this.handleChange} />
+                        {/* <label htmlFor="email">Email</label> */}
+                        <input type="text" className="form-control" name="email" value={email} onChange={this.handleChange} placeholder="Email" />
                         {submitted && !email &&
                             <div className="help-block">Email is required</div>
                         }
                     </div>
                     <div className={'form-group' + (submitted && !password ? ' has-error' : '')}>
-                        <label htmlFor="password">Password</label>
-                        <input type="password" className="form-control" name="password" value={password} onChange={this.handleChange} />
+                        {/* <label htmlFor="password">Password</label> */}
+                        <input type="password" className="form-control" name="password" value={password} onChange={this.handleChange} placeholder="Password" />
                         {submitted && !password &&
                         <div className="help-block">Password is required</div>
                         }

diff --git a/src/components/PrivateRoute.js b/src/components/PrivateRoute.js
@@ -0,0 +1,10 @@
+import React from 'react';
+import { Route, Redirect } from 'react-router-dom';
+
+export const PrivateRoute = ({ component: Component, ...rest }) => (
+    <Route {...rest} render={props => (
+        localStorage.getItem('user')
+            ? <Component {...props} />
+            : <Redirect to={{ pathname: '/login', state: { from: props.location } }} />
+    )} />
+)
diff --git a/src/RegisterPage/RegisterPage.jsx → src/components/RegisterPage.js b/src/RegisterPage/RegisterPage.jsx → src/components/RegisterPage.js
@@ -2,7 +2,7 @@ import React from 'react';
 import { Link } from 'react-router-dom';
 import { connect } from 'react-redux';
 
-import { userActions } from '../_actions';
+import { userActions } from '../actions';
 
 class RegisterPage extends React.Component {
     //TODO: add middle page for registering: student, vendor; add registration page for vendor

diff --git a/src/LoginPage/login.module.css → src/components/css/login.module.css b/src/LoginPage/login.module.css → src/components/css/login.module.css
@@ -1,3 +1,5 @@
+@import 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css';
+
 p {
     color: #cb9d1e;
 }

diff --git a/src/_constants/alert.constants.js → src/constants/alert.constants.js b/src/_constants/alert.constants.js → src/constants/alert.constants.js
diff --git a/src/constants/index.js b/src/constants/index.js
@@ -0,0 +1,2 @@
+export * from './alert.constants';
+export * from './user.constants';
diff --git a/src/_constants/user.constants.js → src/constants/user.constants.js b/src/_constants/user.constants.js → src/constants/user.constants.js
diff --git a/src/_helpers/auth-header.js → src/helpers/authHeader.js b/src/_helpers/auth-header.js → src/helpers/authHeader.js
diff --git a/src/_helpers/fake-backend.js → src/helpers/fakeBackend.js b/src/_helpers/fake-backend.js → src/helpers/fakeBackend.js
diff --git a/src/_helpers/history.js → src/helpers/history.js b/src/_helpers/history.js → src/helpers/history.js
diff --git a/src/helpers/index.js b/src/helpers/index.js
@@ -0,0 +1,6 @@
+export * from './fakeBackend';
+export * from './history';
+export * from './store';
+export * from './userLogin'
+export * from './authHeader';
+export * from './serviceWorker';
diff --git a/src/serviceWorker.js → src/helpers/serviceWorker.js b/src/serviceWorker.js → src/helpers/serviceWorker.js
diff --git a/src/_helpers/store.js → src/helpers/store.js b/src/_helpers/store.js → src/helpers/store.js
@@ -1,7 +1,7 @@
 import { createStore, applyMiddleware, compose } from 'redux';
 import thunkMiddleware from 'redux-thunk';
 import { createLogger } from 'redux-logger';
-import rootReducer from '../_reducers';
+import rootReducer from '../reducers';
 
 const loggerMiddleware = createLogger();