add folder structure

ucladevx · Apr 5, 2018 · ac7a8ff · ac7a8ff
commit ac7a8ff
Show file tree

Hide file tree

Showing 20 changed files with 8,385 additions and 0 deletions.
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,21 @@
+# See https://help.github.com/ignore-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+
+# testing
+/coverage
+
+# production
+/build
+
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
diff --git a/README.md b/README.md
@@ -0,0 +1 @@
+# BPool Frontend
diff --git a/package.json b/package.json
@@ -0,0 +1,37 @@
+{
+  "name": "create-react-app-redux",
+  "version": "0.1.0",
+  "private": true,
+  "devDependencies": {
+    "husky": "^0.14.3",
+    "lint-staged": "^7.0.0",
+    "prettier": "^1.11.0",
+    "react-scripts": "^1.0.17"
+  },
+  "dependencies": {
+    "react": "^16.2.0",
+    "react-dom": "^16.2.0",
+    "react-redux": "^5.0.6",
+    "react-router": "^4.2.0",
+    "react-router-dom": "^4.2.2",
+    "react-router-redux": "next",
+    "redux": "^3.7.2",
+    "redux-devtools-extension": "^2.13.2",
+    "redux-thunk": "^2.2.0",
+    "sanitize.css": "^5.0.0"
+  },
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test --env=jsdom",
+    "eject": "react-scripts eject",
+    "precommit": "lint-staged"
+  },
+  "homepage": "https://cra-redux-router-thunk.herokuapp.com",
+  "lint-staged": {
+    "*.{js,json,css,md}": [
+      "prettier --write",
+      "git add"
+    ]
+  }
+}
diff --git a/public/index.html b/public/index.html
@@ -0,0 +1,31 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
+    <!--
+      Notice the use of %PUBLIC_URL% in the tag above.
+      It will be replaced with the URL of the `public` folder during the build.
+      Only files inside the `public` folder can be referenced from the HTML.
+
+      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
+      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>
+  </head>
+  <body>
+    <div id="root"></div>
+    <!--
+      This HTML file is a template.
+      If you open it directly in the browser, you will see an empty page.
+
+      You can add webfonts, meta tags, or analytics to this file.
+      The build step will place the bundled scripts into the <body> tag.
+
+      To begin the development, run `npm start`.
+      To create a production bundle, use `npm run build`.
+    -->
+  </body>
+</html>
diff --git a/src/actions/actionTypes.js b/src/actions/actionTypes.js
diff --git a/src/components/App/index.js b/src/components/App/index.js
@@ -0,0 +1,25 @@
+import React from 'react'
+import { Route, Link } from 'react-router-dom'
+import Home from '../Home'
+import Header from '../Header'
+import Footer from '../Footer'
+
+const App = () => (
+  <div>
+    {/*<header>
+      <Link to="/">Home</Link>
+      <Link to="/about-us">About</Link>
+    </header>*/}
+
+    <Header />
+
+    <main>
+      <Route exact path="/" component={Home} />
+    </main>
+
+    <Footer />
+
+  </div>
+)
+
+export default App;
diff --git a/src/components/Footer/index.js b/src/components/Footer/index.js
@@ -0,0 +1,11 @@
+import React from 'react'
+import './style.css'
+import car from '../../static/img/car.png'
+
+const Footer = () => (
+  <div className="footer">
+  	<img id="car" src={car} alt="BPool" />
+  </div>
+);
+
+export default Footer;
diff --git a/src/components/Footer/style.css b/src/components/Footer/style.css
@@ -0,0 +1,8 @@
+.footer {
+	position: fixed;
+	bottom: 0;
+}
+
+#car {
+	width: 100%;
+}
diff --git a/src/components/Header/index.js b/src/components/Header/index.js
@@ -0,0 +1,14 @@
+import React from 'react'
+import './style.css'
+import logo from '../../static/img/logo.png'
+
+const Header = () => (
+  <div className="header">
+  	<img id="logo" src={logo} alt="BPool" />
+	  <div id="login">
+			<a id="login_link" href="">Login</a>
+	  </div>
+  </div>
+);
+
+export default Header;
diff --git a/src/components/Header/style.css b/src/components/Header/style.css
@@ -0,0 +1,19 @@
+.header {
+	height: 50px;
+}
+
+#logo {
+	width: 100px;
+	padding: 20px 0 0 40px;
+}
+
+#login {
+	padding: 20px 40px 0 0;
+	float: right;
+}
+
+#login_link {
+	text-decoration: none;
+	color: black;
+	font-weight: 700;
+}
diff --git a/src/components/Home/index.js b/src/components/Home/index.js
@@ -0,0 +1,10 @@
+import React from 'react'
+import './style.css'
+
+const Home = () => (
+  <div id="home">
+
+  </div>
+);
+
+export default Home;
diff --git a/src/components/Home/style.css b/src/components/Home/style.css
diff --git a/src/index.css b/src/index.css
@@ -0,0 +1,5 @@
+body {
+  margin: 0;
+  padding: 0;
+  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+}
diff --git a/src/index.js b/src/index.js
@@ -0,0 +1,21 @@
+import React from 'react'
+import { render } from 'react-dom'
+import { Provider } from 'react-redux'
+import { ConnectedRouter } from 'react-router-redux'
+import store, { history } from './store/store'
+import App from './components/App'
+
+import './index.css'
+
+const target = document.querySelector('#root');
+
+render(
+  <Provider store={store}>
+    <ConnectedRouter history={history}>
+      <div>
+        <App />
+      </div>
+    </ConnectedRouter>
+  </Provider>,
+  target
+);
diff --git a/src/reducers/initialState.js b/src/reducers/initialState.js
@@ -0,0 +1,3 @@
+export default {
+  user: {}
+};
diff --git a/src/reducers/rootReducer.js b/src/reducers/rootReducer.js
@@ -0,0 +1,6 @@
+import { combineReducers } from 'redux'
+import { routerReducer } from 'react-router-redux'
+
+export default combineReducers({
+  router: routerReducer,
+});
diff --git a/src/static/img/car.png b/src/static/img/car.png
diff --git a/src/static/img/logo.png b/src/static/img/logo.png
diff --git a/src/store/store.js b/src/store/store.js
@@ -0,0 +1,23 @@
+import { createStore, applyMiddleware, compose } from 'redux';
+import { routerMiddleware } from 'react-router-redux';
+import thunk from 'redux-thunk';
+import createHistory from 'history/createBrowserHistory';
+import rootReducer from '../reducers/rootReducer';
+
+export const history = createHistory();
+
+const initialState = {};
+const enhancers = [];
+const middleware = [thunk, routerMiddleware(history)];
+
+if (process.env.NODE_ENV === 'development') {
+  const devToolsExtension = window.__REDUX_DEVTOOLS_EXTENSION__;
+
+  if (typeof devToolsExtension === 'function') {
+    enhancers.push(devToolsExtension());
+  }
+}
+
+const composedEnhancers = compose(applyMiddleware(...middleware), ...enhancers);
+
+export default createStore(rootReducer, initialState, composedEnhancers);