2 |
20 |
--------------------------------------------------------------------------------
/client/src/components/card.html:
--------------------------------------------------------------------------------
1 | Schedule a Test Drive
3 |
4 |
19 |
5 |
17 |
18 |
2 |
20 |
--------------------------------------------------------------------------------
/src/components/admin/message_window.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 |
3 |
4 |
5 | class MessageWindow extends Component{
6 | render(){
7 | return(
8 | Schedule a Test Drive
3 |
4 |
19 |
5 |
17 |
18 |
9 |
15 |
16 | );
17 | }
18 | }
19 |
20 | export default MessageWindow;
21 |
--------------------------------------------------------------------------------
/src/components/user/home.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import JumboTron from './jumbotron';
3 | import Services from './services';
4 | import firebase from 'firebase';
5 | import CarsList from './cars_list';
6 | import TopSearchBar from './top_search_bar';
7 | import NavigationBar from './navigation_bar';
8 | class UserHomePage extends Component {
9 | render(){
10 | return(
11 | Header
10 |
11 |
14 | Primary card title
12 |Some quick example text to build on the card title and make up the bulk of the card's content.
13 |
12 |
13 |
14 |
17 |
20 |
21 | );
22 | }
23 | }
24 | export default UserHomePage;
--------------------------------------------------------------------------------
/client/src/components/user/home.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import JumboTron from './jumbotron';
3 | import Services from './services';
4 | import firebase from 'firebase';
5 | import CarsList from './cars_list';
6 | import TopSearchBar from './top_search_bar';
7 | import NavigationBar from './navigation_bar';
8 | class UserHomePage extends Component {
9 | render(){
10 | return(
11 | Latest Cars
17 |
12 |
13 |
14 |
17 |
20 |
21 | );
22 | }
23 | }
24 | export default UserHomePage;
--------------------------------------------------------------------------------
/src/components/user/breadcrumb.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { Breadcrumb, BreadcrumbItem } from 'reactstrap';
3 |
4 | const BreadCrumb = (props) => {
5 | return (
6 | Latest Cars
17 |
7 |
10 | Home
11 | Cars
12 | Data
13 | Bootstrap
14 |
15 |
16 | );
17 | };
18 |
19 | export default BreadCrumb;
20 |
--------------------------------------------------------------------------------
/client/build/asset-manifest.json:
--------------------------------------------------------------------------------
1 | {
2 | "main.css": "static/css/main.17670369.css",
3 | "main.css.map": "static/css/main.17670369.css.map",
4 | "main.js": "static/js/main.1ea9d9c1.js",
5 | "main.js.map": "static/js/main.1ea9d9c1.js.map",
6 | "static\\media\\audiA3.jpg": "static/media/audiA3.a9a5fe3b.jpg",
7 | "static\\media\\camry.jpg": "static/media/camry.f94f6f71.jpg",
8 | "static\\media\\finance.jpg": "static/media/finance.f2e63f0b.jpg",
9 | "static\\media\\lambo.jpg": "static/media/lambo.a72171b9.jpg",
10 | "static\\media\\new_car.webp": "static/media/new_car.80787942.webp",
11 | "static\\media\\test-drive.jpg": "static/media/test-drive.862d4dd2.jpg"
12 | }
--------------------------------------------------------------------------------
/client/src/components/user/breadcrumb.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { Breadcrumb, BreadcrumbItem } from 'reactstrap';
3 |
4 | const BreadCrumb = (props) => {
5 | return (
6 |
7 |
10 | Home
11 | Cars
12 | Data
13 | Bootstrap
14 |
15 |
16 | );
17 | };
18 |
19 | export default BreadCrumb;
20 |
--------------------------------------------------------------------------------
/src/components/user/references.js:
--------------------------------------------------------------------------------
1 | import * as firebase from "firebase";
2 |
3 | var config = {
4 | apiKey: "AIzaSyC6C-8A-vfsEzv31acwjhru8N64g0Hzhcc",
5 | authDomain: "car-app-506db.firebaseapp.com",
6 | databaseURL: "https://car-app-506db.firebaseio.com",
7 | projectId: "car-app-506db",
8 | storageBucket: "car-app-506db.appspot.com",
9 | messagingSenderId: "496521253390"
10 | };
11 | firebase.initializeApp(config);
12 |
13 |
14 | const databaseRef = firebase.database().ref();
15 | export const CarsRef = databaseRef.child("Cars");
16 | export const authRef = firebase.auth();
17 | export const provider = new firebase.auth.GoogleAuthProvider();
18 |
19 | export const timeRef = firebase.database.ServerValue.TIMESTAMP;
--------------------------------------------------------------------------------
/client/src/components/user/references.js:
--------------------------------------------------------------------------------
1 | import * as firebase from "firebase";
2 |
3 | var config = {
4 | apiKey: "AIzaSyC6C-8A-vfsEzv31acwjhru8N64g0Hzhcc",
5 | authDomain: "car-app-506db.firebaseapp.com",
6 | databaseURL: "https://car-app-506db.firebaseio.com",
7 | projectId: "car-app-506db",
8 | storageBucket: "car-app-506db.appspot.com",
9 | messagingSenderId: "496521253390"
10 | };
11 | firebase.initializeApp(config);
12 |
13 |
14 | const databaseRef = firebase.database().ref();
15 | export const CarsRef = databaseRef.child("Cars");
16 | export const authRef = firebase.auth();
17 | export const provider = new firebase.auth.GoogleAuthProvider();
18 |
19 | export const timeRef = firebase.database.ServerValue.TIMESTAMP;
--------------------------------------------------------------------------------
/src/components/admin/reference.js:
--------------------------------------------------------------------------------
1 | import * as firebase from "firebase";
2 |
3 | var config = {
4 | apiKey: "AIzaSyAQQn07buTAwldacMSsvgFV3M5ql-eDAJU",
5 | authDomain: "car-urdjym.firebaseapp.com",
6 | databaseURL: "https://car-urdjym.firebaseio.com",
7 | projectId: "car-urdjym",
8 | storageBucket: "car-urdjym.appspot.com",
9 | messagingSenderId: "145902025889"
10 | };
11 | firebase.initializeApp(config);
12 |
13 |
14 | const databaseRef = firebase.database().ref();
15 | export const CarsRef = databaseRef.child("Cars");
16 |
17 | export const CarssRef = databaseRef.child("Cars2");
18 | export const authRef = firebase.auth();
19 | export const provider = new firebase.auth.GoogleAuthProvider();
20 |
21 | export const timeRef = firebase.database.ServerValue.TIMESTAMP;
--------------------------------------------------------------------------------
/src/reducers/message.js:
--------------------------------------------------------------------------------
1 | import {
2 | GET_MESSAGES_PENDING,
3 | GET_MESSAGES_SUCCESS,
4 | SEND_MESSAGE_PENDING,
5 | SEND_MESSAGE_SUCCESS,
6 | REMOVE_MESSAGE_PENDING,
7 | REMOVE_MESSAGE_SUCCESS
8 | } from '../actions/message';
9 |
10 | export default (state = [], action) => {
11 | switch (action.type) {
12 | case GET_MESSAGES_PENDING:
13 | return state;
14 | case GET_MESSAGES_SUCCESS:
15 | return [...action.payload.data]
16 | case SEND_MESSAGE_PENDING:
17 | return state;
18 | case SEND_MESSAGE_SUCCESS:
19 | return [...action.payload.data]
20 | case REMOVE_MESSAGE_PENDING:
21 | return state;
22 | case REMOVE_MESSAGE_SUCCESS:
23 | return [...action.payload.data]
24 | default:
25 | return state;
26 | }
27 | }
28 |
--------------------------------------------------------------------------------
/client/src/reducers/message.js:
--------------------------------------------------------------------------------
1 | import {
2 | GET_MESSAGES_PENDING,
3 | GET_MESSAGES_SUCCESS,
4 | SEND_MESSAGE_PENDING,
5 | SEND_MESSAGE_SUCCESS,
6 | REMOVE_MESSAGE_PENDING,
7 | REMOVE_MESSAGE_SUCCESS
8 | } from '../actions/message';
9 |
10 | export default (state = [], action) => {
11 | switch (action.type) {
12 | case GET_MESSAGES_PENDING:
13 | return state;
14 | case GET_MESSAGES_SUCCESS:
15 | return [...action.payload.data]
16 | case SEND_MESSAGE_PENDING:
17 | return state;
18 | case SEND_MESSAGE_SUCCESS:
19 | return [...action.payload.data]
20 | case REMOVE_MESSAGE_PENDING:
21 | return state;
22 | case REMOVE_MESSAGE_SUCCESS:
23 | return [...action.payload.data]
24 | default:
25 | return state;
26 | }
27 | }
28 |
--------------------------------------------------------------------------------
/src/components/user/signin.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 |
3 | const LogInView = ({ onSubmit }) => {
4 | return (
5 |
6 |
29 | );
30 | };
31 |
32 | export default LogInView;
--------------------------------------------------------------------------------
/src/Login/index.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from "react";
2 | import LogInView from "./LoginView";
3 | import { withRouter } from "react-router";
4 | import app from "../components/config/dev";
5 | class LogInContainer extends Component {
6 | handleSignUp = async event => {
7 | event.preventDefault();
8 | const { email, password } = event.target.elements;
9 | try {
10 | const user = await app
11 | .auth()
12 | .signInWithEmailAndPassword(email.value, password.value);
13 | alert("you have sucsesfully logged in!! ")
14 | this.props.history.push("/home");
15 | } catch (error) {
16 | alert(error);
17 | }
18 | };
19 |
20 | render() {
21 | return Log in
7 | 28 |
6 |
29 | );
30 | };
31 |
32 | export default LogInView;
--------------------------------------------------------------------------------
/client/src/components/admin/reference.js:
--------------------------------------------------------------------------------
1 | import * as firebase from "firebase";
2 |
3 | var config = {
4 | apiKey: "AIzaSyAQQn07buTAwldacMSsvgFV3M5ql-eDAJU",
5 | authDomain: "car-urdjym.firebaseapp.com",
6 | databaseURL: "https://car-urdjym.firebaseio.com",
7 | projectId: "car-urdjym",
8 | storageBucket: "car-urdjym.appspot.com",
9 | messagingSenderId: "145902025889"
10 | };
11 | firebase.initializeApp(config);
12 |
13 |
14 | const databaseRef = firebase.database().ref();
15 | export const CarsRef = databaseRef.child("Cars");
16 |
17 | export const CarssRef = databaseRef.child("Cars2");
18 | export const authRef = firebase.auth();
19 | export const provider = new firebase.auth.GoogleAuthProvider();
20 |
21 | export const timeRef = firebase.database.ServerValue.TIMESTAMP;
22 |
23 | export default databaseRef;
--------------------------------------------------------------------------------
/src/SignUp/index.js:
--------------------------------------------------------------------------------
1 |
2 | import React, { Component } from "react";
3 | import SignUpView from "./SignUpView";
4 | import { withRouter } from "react-router";
5 |
6 | import app from "../components/config/dev";
7 | class SignUpContainer extends Component {
8 | handleSignUp = async event => {
9 | event.preventDefault();
10 | const { email, password } = event.target.elements;
11 | try {
12 | const user = await app
13 | .auth()
14 | .createUserWithEmailAndPassword(email.value, password.value);
15 | alert("you have succseffully signed up!!")
16 | this.props.history.push("/");
17 | } catch (error) {
18 | alert(error);
19 | }
20 | };
21 |
22 | render() {
23 | return Log in
7 | 28 |11 | 12 | {car.year} {car.make} {car.model} - {car.sale}% 13 | 14 |
15 | ) 16 | }) : null; 17 | 18 | return( 19 |
20 |
27 | );
28 | }
29 | }
30 |
31 |
32 |
33 | export default Specials;
34 |
--------------------------------------------------------------------------------
/client/src/components/admin/specials.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import { connect } from 'react-redux';
3 | import { Link } from 'react-router-dom';
4 |
5 | class Specials extends Component{
6 | render(){
7 |
8 | let specialsOnCars = this.props.cars ? this.props.cars.map(car =>{
9 | return(
10 |
21 |
26 | SPECIALS
22 |
23 | {specialsOnCars}
24 |
25 | 11 | 12 | {car.year} {car.make} {car.model} - {car.sale}% 13 | 14 |
15 | ) 16 | }) : null; 17 | 18 | return( 19 |
20 |
27 | );
28 | }
29 | }
30 |
31 |
32 |
33 | export default Specials;
34 |
--------------------------------------------------------------------------------
/client/src/components/admin/message_window.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 |
3 |
4 |
5 | class MessageWindow extends Component{
6 | render(){
7 | return(
8 |
21 |
26 | SPECIALS
22 |
23 | {specialsOnCars}
24 |
25 |
9 |
20 |
21 | );
22 | }
23 | }
24 |
25 | export default MessageWindow;
26 |
--------------------------------------------------------------------------------
/src/actions/index.js:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | import { CarsRef, authRef, provider } from "../components/admin/reference";
6 |
7 |
8 |
9 | export const fetchUser = () => dispatch => {
10 | authRef.onAuthStateChanged(user => {
11 | if (user) {
12 | dispatch({
13 | type: FETCH_USER,
14 | payload: user
15 | });
16 | } else {
17 | dispatch({
18 | type: FETCH_USER,
19 | payload: null
20 | });
21 | }
22 | });
23 | };
24 |
25 | export const signIn = () => dispatch => {
26 | authRef
27 | .signInWithPopup(provider)
28 | .then(result => {})
29 | .catch(error => {
30 | console.log(error);
31 | });
32 | };
33 |
34 | export const signOut = () => dispatch => {
35 | authRef
36 | .signOut()
37 | .then(() => {
38 | // Sign-out successful.
39 | })
40 | .catch(error => {
41 | console.log(error);
42 | });
43 | };
44 | view rawindex.js hosted with ❤ by GitHub
--------------------------------------------------------------------------------
/client/src/actions/index.js:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | import { CarsRef, authRef, provider } from "../components/admin/reference";
6 |
7 |
8 |
9 | export const fetchUser = () => dispatch => {
10 | authRef.onAuthStateChanged(user => {
11 | if (user) {
12 | dispatch({
13 | type: FETCH_USER,
14 | payload: user
15 | });
16 | } else {
17 | dispatch({
18 | type: FETCH_USER,
19 | payload: null
20 | });
21 | }
22 | });
23 | };
24 |
25 | export const signIn = () => dispatch => {
26 | authRef
27 | .signInWithPopup(provider)
28 | .then(result => {})
29 | .catch(error => {
30 | console.log(error);
31 | });
32 | };
33 |
34 | export const signOut = () => dispatch => {
35 | authRef
36 | .signOut()
37 | .then(() => {
38 | // Sign-out successful.
39 | })
40 | .catch(error => {
41 | console.log(error);
42 | });
43 | };
44 | view rawindex.js hosted with ❤ by GitHub
--------------------------------------------------------------------------------
/src/SignUp/SignUpView.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import { Redirect,Link } from 'react-router-dom'
3 |
4 | const SignUpView = ({ onSubmit }) => {
5 | return (
6 | Message
10 |
11 |
16 |
19 | From: {this.props.message.uname}
12 |Phone: {this.props.message.uphone}
13 |Email: {this.props.message.uemail}
14 |Interest: {this.props.message.uinterest}
15 |16 |
Message:
17 |Message: {this.props.message.umessage}
18 |
7 |
23 |
24 | );
25 | };
26 |
27 | export default SignUpView;
--------------------------------------------------------------------------------
/client/src/SignUp/SignUpView.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import { Redirect,Link } from 'react-router-dom'
3 |
4 | const SignUpView = ({ onSubmit }) => {
5 | return (
6 |
7 |
23 |
24 | );
25 | };
26 |
27 | export default SignUpView;
--------------------------------------------------------------------------------
/src/Login/LoginView.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import NavigationBar from '../components/user/navigation_bar';
3 | import TopSearchBar from '../components/user/top_search_bar';
4 | import { Redirect,Link } from 'react-router-dom'
5 |
6 | const LogInView = ({ onSubmit }) => {
7 | return (
8 |
9 |
25 |
26 | );
27 | };
28 |
29 | export default LogInView;
--------------------------------------------------------------------------------
/client/src/Login/LoginView.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import NavigationBar from '../components/user/navigation_bar';
3 | import TopSearchBar from '../components/user/top_search_bar';
4 | import { Redirect,Link } from 'react-router-dom'
5 |
6 | const LogInView = ({ onSubmit }) => {
7 | return (
8 |
9 |
25 |
26 | );
27 | };
28 |
29 | export default LogInView;
--------------------------------------------------------------------------------
/client/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "g66-car-dealer",
3 | "version": "0.1.0",
4 | "private": true,
5 | "dependencies": {
6 | "axios": "^0.17.1",
7 | "body-parser": "^1.18.3",
8 | "cookie-parser": "^1.4.3",
9 | "ejs": "^2.6.1",
10 | "express": "^4.16.3",
11 | "firebase": "^5.2.0",
12 | "morgan": "^1.9.0",
13 | "nodemailer": "^4.6.7",
14 | "react": "^16.2.0",
15 | "react-dom": "^16.2.0",
16 | "react-icons-kit": "^1.0.7",
17 | "react-image": "^1.3.1",
18 | "react-redux": "^5.0.6",
19 | "react-router-dom": "^4.2.2",
20 | "react-scripts": "1.0.17",
21 | "react-slideshow-image": "^0.2.2",
22 | "reactstrap": "^5.0.0-alpha.4",
23 | "redux": "^3.7.2",
24 | "redux-form": "^7.2.0",
25 | "redux-logger": "^3.0.6",
26 | "redux-thunk": "^2.2.0",
27 | "serve-favicon": "^2.5.0",
28 | "trim": "0.0.1"
29 | },
30 | "scripts": {
31 | "start": "react-scripts start",
32 | "build": "react-scripts build",
33 | "test": "react-scripts test --env=jsdom",
34 | "eject": "react-scripts eject"
35 | },
36 | "proxy": {
37 | "/api": {
38 | "target": "http://localhost:4000",
39 | "secure": false
40 | }
41 | }
42 | }
43 |
--------------------------------------------------------------------------------
/src/registerServiceWorker.js:
--------------------------------------------------------------------------------
1 | export default function register() {
2 | if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) {
3 | // The URL constructor is available in all browsers that support SW.
4 | const publicUrl = new URL(process.env.PUBLIC_URL, window.location);
5 | if (publicUrl.origin !== window.location.origin) {
6 | // Our service worker won't work if PUBLIC_URL is on a different origin
7 | // from what our page is served on. This might happen if a CDN is used to
8 | // serve assets; see https://github.com/facebookincubator/create-react-app/issues/2374
9 | return;
10 | }
11 |
12 | window.addEventListener('load', (event) => {
13 | const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`;
14 |
15 | if (!isLocalhost) {
16 | // Is not local host. Just register service worker
17 | registerValidSW(swUrl);
18 | } else {
19 | // This is running on localhost. Lets check if a service worker still exists or not.
20 | checkValidServiceWorker(swUrl);
21 | }
22 | });
23 |
24 | window.addEventListener('fetch', (event) => {
25 | if ( event.request.url.match( '^.*(\/api\/).*$' ) ) {
26 | return false;
27 | }
28 | });
29 | }
30 | }
--------------------------------------------------------------------------------
/client/src/registerServiceWorker.js:
--------------------------------------------------------------------------------
1 | export default function register() {
2 | if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) {
3 | // The URL constructor is available in all browsers that support SW.
4 | const publicUrl = new URL(process.env.PUBLIC_URL, window.location);
5 | if (publicUrl.origin !== window.location.origin) {
6 | // Our service worker won't work if PUBLIC_URL is on a different origin
7 | // from what our page is served on. This might happen if a CDN is used to
8 | // serve assets; see https://github.com/facebookincubator/create-react-app/issues/2374
9 | return;
10 | }
11 |
12 | window.addEventListener('load', (event) => {
13 | const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`;
14 |
15 | if (!isLocalhost) {
16 | // Is not local host. Just register service worker
17 | registerValidSW(swUrl);
18 | } else {
19 | // This is running on localhost. Lets check if a service worker still exists or not.
20 | checkValidServiceWorker(swUrl);
21 | }
22 | });
23 |
24 | window.addEventListener('fetch', (event) => {
25 | if ( event.request.url.match( '^.*(\/api\/).*$' ) ) {
26 | return false;
27 | }
28 | });
29 | }
30 | }
--------------------------------------------------------------------------------
/src/components/admin/total_messages.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import { Link } from 'react-router-dom';
3 | import { connect } from 'react-redux';
4 | import { Row, Col } from 'reactstrap';
5 |
6 | class TotalMessage extends Component{
7 | render(){
8 | console.log('message: ', this.props.messages);
9 |
10 | let potentialBuyers = this.props.messages ? this.props.messages.map(message => {
11 | return(
12 |
13 |
27 |
34 | );
35 | }
36 | }
37 |
38 | function mapStateToProps(state, props){
39 | return{
40 | messages: state.messages
41 |
42 | }
43 | }
44 |
45 | export default connect(mapStateToProps, null)(TotalMessage);
46 |
--------------------------------------------------------------------------------
/client/src/components/admin/total_messages.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import { Link } from 'react-router-dom';
3 | import { connect } from 'react-redux';
4 | import { Row, Col } from 'reactstrap';
5 |
6 | class TotalMessage extends Component{
7 | render(){
8 | console.log('message: ', this.props.messages);
9 |
10 | let potentialBuyers = this.props.messages ? this.props.messages.map(message => {
11 | return(
12 |
13 |
28 |
33 | POTENTIAL BUYERS
29 |
30 | {potentialBuyers}
31 |
32 |
27 |
34 | );
35 | }
36 | }
37 |
38 | function mapStateToProps(state, props){
39 | return{
40 | messages: state.messages
41 |
42 | }
43 | }
44 |
45 | export default connect(mapStateToProps, null)(TotalMessage);
46 |
--------------------------------------------------------------------------------
/src/actions/message.js:
--------------------------------------------------------------------------------
1 | import axios from 'axios'
2 |
3 | export const GET_MESSAGES_PENDING = 'GET_MESSAGES_PENDING'
4 | export const GET_MESSAGES_SUCCESS = 'GET_MESSAGES_SUCCESS'
5 | export const SEND_MESSAGE_PENDING = 'SEND_MESSAGE_PENDING'
6 | export const SEND_MESSAGE_SUCCESS = 'SEND_MESSAGE_SUCCESS'
7 | export const REMOVE_MESSAGE_PENDING = 'REMOVE_MESSAGE_PENDING'
8 | export const REMOVE_MESSAGE_SUCCESS = 'REMOVE_MESSAGE_SUCCESS'
9 |
10 | export const getMessages = () => {
11 | return async (dispatch) => {
12 | dispatch({ type: GET_MESSAGES_PENDING })
13 | let messages = await axios.get('http://localhost:8000/messages')
14 | dispatch({
15 | type: GET_MESSAGES_SUCCESS,
16 | payload: messages
17 | })
18 | }
19 | }
20 |
21 | export const sendMessage = (privateMessage) => {
22 | return async (dispatch) => {
23 | dispatch({ type: SEND_MESSAGE_PENDING })
24 | let message = await axios.post('http://localhost:8000/messages', privateMessage)
25 | dispatch({
26 | type: SEND_MESSAGE_SUCCESS,
27 | payload: message
28 | })
29 | }
30 | }
31 |
32 | export const deleteMsg = (msgId) => {
33 | return async (dispatch) => {
34 | dispatch({ type: REMOVE_MESSAGE_PENDING })
35 | let deletemsg = await axios.delete(`http://localhost:8000/messages/${msgId}`)
36 | dispatch({
37 | type: REMOVE_MESSAGE_SUCCESS,
38 | payload: deletemsg
39 | })
40 | }
41 | }
42 |
--------------------------------------------------------------------------------
/client/src/actions/message.js:
--------------------------------------------------------------------------------
1 | import axios from 'axios'
2 |
3 | export const GET_MESSAGES_PENDING = 'GET_MESSAGES_PENDING'
4 | export const GET_MESSAGES_SUCCESS = 'GET_MESSAGES_SUCCESS'
5 | export const SEND_MESSAGE_PENDING = 'SEND_MESSAGE_PENDING'
6 | export const SEND_MESSAGE_SUCCESS = 'SEND_MESSAGE_SUCCESS'
7 | export const REMOVE_MESSAGE_PENDING = 'REMOVE_MESSAGE_PENDING'
8 | export const REMOVE_MESSAGE_SUCCESS = 'REMOVE_MESSAGE_SUCCESS'
9 |
10 | export const getMessages = () => {
11 | return async (dispatch) => {
12 | dispatch({ type: GET_MESSAGES_PENDING })
13 | let messages = await axios.get('http://localhost:8000/messages')
14 | dispatch({
15 | type: GET_MESSAGES_SUCCESS,
16 | payload: messages
17 | })
18 | }
19 | }
20 |
21 | export const sendMessage = (privateMessage) => {
22 | return async (dispatch) => {
23 | dispatch({ type: SEND_MESSAGE_PENDING })
24 | let message = await axios.post('http://localhost:8000/messages', privateMessage)
25 | dispatch({
26 | type: SEND_MESSAGE_SUCCESS,
27 | payload: message
28 | })
29 | }
30 | }
31 |
32 | export const deleteMsg = (msgId) => {
33 | return async (dispatch) => {
34 | dispatch({ type: REMOVE_MESSAGE_PENDING })
35 | let deletemsg = await axios.delete(`http://localhost:8000/messages/${msgId}`)
36 | dispatch({
37 | type: REMOVE_MESSAGE_SUCCESS,
38 | payload: deletemsg
39 | })
40 | }
41 | }
42 |
--------------------------------------------------------------------------------
/src/components/user/SignOut.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import JumboTron from './jumbotron';
3 | import Services from './services';
4 | import firebase from 'firebase';
5 | import CarsList from './cars_list';
6 | import TopSearchBar from './top_search_bar';
7 | import NavigationBar from './navigation_bar';
8 | class Signout extends Component {
9 | render(){
10 | return(
11 |
28 |
33 | POTENTIAL BUYERS
29 |
30 | {potentialBuyers}
31 |
32 |
12 |
13 |
15 |
18 |
20 |
21 | );
22 | }
23 | }
24 | export default Signout;
25 |
--------------------------------------------------------------------------------
/client/src/components/user/SignOut.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import JumboTron from './jumbotron';
3 | import Services from './services';
4 | import firebase from 'firebase';
5 | import CarsList from './cars_list';
6 | import TopSearchBar from './top_search_bar';
7 | import NavigationBar from './navigation_bar';
8 | class Signout extends Component {
9 | render(){
10 | return(
11 | 15 |
DirectMotorGroup
17 |18 |
Our Mission at DirectMotorGroup is to build relationships that are consistent with our core values as we strive to fulfill the needs from every customer. We have built a reputation in Brooklyn, Staten Island, Queens, New Jersey, and Long Island on providing courteous, honest-service, and we never lose sight of what makes us successful; Our Customers, Employees, Business Partners and Investors. Because of this, we have seen a proven track record of success spanning 10 years. This is why we strive daily to exceed their expectations. Our services include, Auto Leasing, Sales, Insurance, Financing, Early Lease Termination, Trade-Ins, Lease Transfers, and much more. We are pleased to announce that DirectMotorGroup is now accredited with the greater New York Chamber of Commerce. Make new car leasing experience a pleasant one.
19 |
12 |
13 |
15 |
18 |
20 |
21 | );
22 | }
23 | }
24 | export default Signout;
25 |
--------------------------------------------------------------------------------
/src/components/user/footer_top.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 |
3 | export default class FooterTop extends Component {
4 | render(){
5 | return(
6 | 15 |
DirectMotorGroup
17 |18 |
Our Mission at DirectMotorGroup is to build relationships that are consistent with our core values as we strive to fulfill the needs from every customer. We have built a reputation in Brooklyn, Staten Island, Queens, New Jersey, and Long Island on providing courteous, honest-service, and we never lose sight of what makes us successful; Our Customers, Employees, Business Partners and Investors. Because of this, we have seen a proven track record of success spanning 10 years. This is why we strive daily to exceed their expectations. Our services include, Auto Leasing, Sales, Insurance, Financing, Early Lease Termination, Trade-Ins, Lease Transfers, and much more. We are pleased to announce that DirectMotorGroup is now accredited with the greater New York Chamber of Commerce. Make new car leasing experience a pleasant one.
19 |
7 |
33 | );
34 | }
35 | }
--------------------------------------------------------------------------------
/client/src/components/user/footer_top.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 |
3 | export default class FooterTop extends Component {
4 | render(){
5 | return(
6 |
8 |
32 |
9 |
31 |
10 |
13 | ABOUT
11 |These extremely popular cars continue to be top choices for many drivers who want dependable, long-lasting cars for their families. Check out our new car specials and financing options that offer great deals on these in-demand new cars.
12 |
14 |
16 | Mon 8:00 am - 9:00 pm
17 | Tue 8:00 am - 9:00 pm
18 | Wed 8:00 am - 9:00 pm
19 | Thu 8:00 am - 9:00 pm
20 | Fri 8:00 am - 9:00 pm
21 | Sat 8:00 am - 8:00 pm
22 |
23 | HOURS
15 | Sun 10:00 am - 7:00 pm16 | Mon 8:00 am - 9:00 pm
17 | Tue 8:00 am - 9:00 pm
18 | Wed 8:00 am - 9:00 pm
19 | Thu 8:00 am - 9:00 pm
20 | Fri 8:00 am - 9:00 pm
21 | Sat 8:00 am - 8:00 pm
22 |
24 |
26 | 830 Willis Ave,
27 | Albertson, NY 11507
28 | Phone: 1.516.765.1003 29 |
30 | CONTACT
25 | Direct Motor Group26 | 830 Willis Ave,
27 | Albertson, NY 11507
28 | Phone: 1.516.765.1003 29 |
7 |
33 | );
34 | }
35 | }
--------------------------------------------------------------------------------
/client/build/index.html:
--------------------------------------------------------------------------------
1 |
8 |
32 |
9 |
31 |
10 |
13 | ABOUT
11 |These extremely popular cars continue to be top choices for many drivers who want dependable, long-lasting cars for their families. Check out our new car specials and financing options that offer great deals on these in-demand new cars.
12 |
14 |
16 | Mon 8:00 am - 9:00 pm
17 | Tue 8:00 am - 9:00 pm
18 | Wed 8:00 am - 9:00 pm
19 | Thu 8:00 am - 9:00 pm
20 | Fri 8:00 am - 9:00 pm
21 | Sat 8:00 am - 8:00 pm
22 |
23 | HOURS
15 | Sun 10:00 am - 7:00 pm16 | Mon 8:00 am - 9:00 pm
17 | Tue 8:00 am - 9:00 pm
18 | Wed 8:00 am - 9:00 pm
19 | Thu 8:00 am - 9:00 pm
20 | Fri 8:00 am - 9:00 pm
21 | Sat 8:00 am - 8:00 pm
22 |
24 |
26 | 830 Willis Ave,
27 | Albertson, NY 11507
28 | Phone: 1.516.765.1003 29 |
30 | CONTACT
25 | Direct Motor Group26 | 830 Willis Ave,
27 | Albertson, NY 11507
28 | Phone: 1.516.765.1003 29 |
35 |
36 |
69 |
70 | );
71 | }
72 | }
73 |
--------------------------------------------------------------------------------
/src/reducers/cars.js:
--------------------------------------------------------------------------------
1 | import {
2 | GET_CARS_PENDING,
3 | GET_CARS_SUCCESS,
4 | ADD_CAR_PENDING,
5 | <<<<<<< HEAD
6 | ADD_CAR_SUCCESS,
7 | GET_SINGLE_CAR,
8 | EDIT_CAR_PENDING,
9 | EDIT_CAR_SUCCESS,
10 | REMOVE_CAR_PENDING,
11 | REMOVE_CAR_SUCCESS,
12 | GET_SINGLE_CAR_PENDING
13 |
14 | } from '../actions/cars'
15 |
16 |
17 | import { createStore, applyMiddleware } from 'redux'
18 |
19 | import { CarsRef, authRef, provider } from "../config/firebase";
20 | import thunkMiddleware from 'redux-thunk'
21 |
22 | // export default (state = [], action) => {
23 | // switch (action.type) {
24 | // case GET_CARS_PENDING:
25 | // return state;
26 |
27 | // case ADD_CAR_PENDING:
28 | // return state;
29 | // case ADD_CAR_SUCCESS:
30 | // return [...action.payload.data]
31 | // case EDIT_CAR_PENDING:
32 | // return state;
33 | // case EDIT_CAR_SUCCESS:
34 | // return [...action.payload.data]
35 | // case REMOVE_CAR_PENDING:
36 | // return state;
37 | // case REMOVE_CAR_SUCCESS:
38 | // return [...action.payload.data]
39 | // default:
40 | // return state;
41 | // }
42 | // }
43 |
44 | const initialState = {
45 | payload: '',
46 | loading: true,
47 | };
48 |
49 |
50 | function Reducer (state = [], action) {
51 | switch (action.type) {
52 | case GET_CARS_SUCCESS:
53 | return action.payload
54 | default:
55 | return state
56 | }
57 | }
58 |
59 |
60 |
61 | function Reducer (state = initialState, action) {
62 | switch (action.type) {
63 | case GET_SINGLE_CAR_PENDING:
64 | return { loading: true };
65 | case GET_SINGLE_CAR:
66 | return {
67 | car: action.payload,
68 | loading: false
69 | }
70 | default:
71 | return state
72 | =======
73 | ADD_CAR_SUCCESS
74 | } from '../actions/cars'
75 |
76 | export default (state = [], action) => {
77 | switch (action.type) {
78 | case GET_CARS_PENDING:
79 | return state;
80 | case GET_CARS_SUCCESS:
81 | return [...action.payload.data]
82 | case ADD_CAR_PENDING:
83 | return state;
84 | case ADD_CAR_SUCCESS:
85 | return [...action.payload.data]
86 | default:
87 | return state;
88 | >>>>>>> parent of 0453b9b... working on edit car
89 | }
90 | }
91 | export default Reducer;
--------------------------------------------------------------------------------
/client/src/components/admin/admin_top_navigation.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import {
3 | Collapse,
4 | Navbar,
5 | NavbarToggler,
6 | NavbarBrand,
7 | Nav,
8 | NavItem,
9 | NavLink,
10 | UncontrolledDropdown,
11 | DropdownToggle,
12 | DropdownMenu,
13 | DropdownItem } from 'reactstrap';
14 |
15 | import Icon from 'react-icons-kit';
16 | import Routes from './routes';
17 | import { Link } from 'react-router-dom';
18 | import { car } from 'react-icons-kit/fa/car';
19 |
20 | export default class AdminNavigatioBar extends React.Component {
21 | constructor(props) {
22 | super(props);
23 |
24 | this.toggle = this.toggle.bind(this);
25 | this.state = {
26 | isOpen: false
27 | };
28 | }
29 | toggle() {
30 | this.setState({
31 | isOpen: !this.state.isOpen
32 | });
33 | }
34 | render() {
35 | return (
36 |
37 |
38 |
39 | G66 CARS ADMIN
40 |
42 |
66 |
67 |
68 |
37 |
38 |
71 |
72 | );
73 | }
74 | }
75 |
--------------------------------------------------------------------------------
/src/components/admin/total_inventory.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import { Row, Col } from 'reactstrap';
3 |
4 | class TotalInventory extends Component{
5 | render(){
6 |
7 | let sedan = this.props.totalInventory ? this.props.totalInventory.filter(inventory => inventory.body_type == "Sedan") : null;
8 |
9 | let coupe = this.props.totalInventory ? this.props.totalInventory.filter(inventory => inventory.body_type == "Coupe") : null;
10 |
11 | let suv = this.props.totalInventory ? this.props.totalInventory.filter(inventory => inventory.body_type == "SUV") : null;
12 |
13 | let van = this.props.totalInventory ? this.props.totalInventory.filter(inventory => inventory.body_type == "Van") : null;
14 |
15 | let convertible = this.props.totalInventory ? this.props.totalInventory.filter(inventory => inventory.body_type == "Convertible") : null;
16 |
17 | let hatchback = this.props.totalInventory ? this.props.totalInventory.filter(inventory => inventory.body_type == "Hatchback") : null;
18 |
19 | let truck = this.props.totalInventory ? this.props.totalInventory.filter(inventory => inventory.body_type == "Truck") : null;
20 |
21 |
22 |
23 | return(
24 |
39 |
40 |
41 | G66 CARS ADMIN
42 |
44 |
68 |
69 |
70 |
25 |
63 | );
64 | }
65 | }
66 |
67 | export default TotalInventory;
68 |
--------------------------------------------------------------------------------
/client/src/components/admin/total_inventory.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import { Row, Col } from 'reactstrap';
3 |
4 | class TotalInventory extends Component{
5 | render(){
6 |
7 | let sedan = this.props.totalInventory ? this.props.totalInventory.filter(inventory => inventory.body_type == "Sedan") : null;
8 |
9 | let coupe = this.props.totalInventory ? this.props.totalInventory.filter(inventory => inventory.body_type == "Coupe") : null;
10 |
11 | let suv = this.props.totalInventory ? this.props.totalInventory.filter(inventory => inventory.body_type == "SUV") : null;
12 |
13 | let van = this.props.totalInventory ? this.props.totalInventory.filter(inventory => inventory.body_type == "Van") : null;
14 |
15 | let convertible = this.props.totalInventory ? this.props.totalInventory.filter(inventory => inventory.body_type == "Convertible") : null;
16 |
17 | let hatchback = this.props.totalInventory ? this.props.totalInventory.filter(inventory => inventory.body_type == "Hatchback") : null;
18 |
19 | let truck = this.props.totalInventory ? this.props.totalInventory.filter(inventory => inventory.body_type == "Truck") : null;
20 |
21 |
22 |
23 | return(
24 |
26 |
62 | TOTAL INVENTORY
27 |
28 |
29 |
36 |
37 |
44 |
45 |
52 |
53 |
60 |
61 |
25 |
63 | );
64 | }
65 | }
66 |
67 | export default TotalInventory;
68 |
--------------------------------------------------------------------------------
/client/public/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
11 |
12 |
13 |
14 |
15 |
19 |
20 |
21 |
22 |
31 |
26 |
62 | TOTAL INVENTORY
27 |
28 |
29 |
36 |
37 |
44 |
45 |
52 |
53 |
60 |
61 |
46 |
47 | this.enlargeMessage(message)}
58 | />
59 |
60 | this.handleDelete(message.id)}
65 | />
66 |
67 |
68 |
69 | )
70 | }) : null;
71 |
72 | return(
73 |
74 |
75 |
76 | : null}
86 |
87 |
88 |
89 | );
90 | }
91 | }
92 |
93 | function mapStateToProps(state, props){
94 | return{
95 | messages: state.messages
96 | }
97 | }
98 |
99 | export default connect(mapStateToProps, {deleteMsg})(Messages);
100 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | ## Project description
2 | This Web App provides car shoppers a better way to buy a car. Browse new cars online and get full information about car and schedule test drive. Navigate to admin pannel https://directmotorgroup.herokuapp.com/admin
3 | g66 Car Dealership Web App provides car shoppers a better way to buy a car. Browse new cars online and get full information about car and schedule test drive.
4 |
5 | ## Who uses it?
6 | g66 Car Dealership Web App will be used by both dealer and potential customers.
7 |
8 | ## Outputs from g66 Car Dealership Web App
9 | Outputs for users
10 | * Browse cars by Year
11 | * Save Cars
12 | * See gallery of photos
13 | * Browse cars by Make
14 | * Browse cars by Body Type
15 | * Browse cars by Price Range
16 | * Schedule Test Drive
17 |
18 | Outputs for Admin
19 | * View Inventory
20 | * Add Inventory
21 | * Edit Inventory
22 | * Delete Inventory
23 | * Followup with potential car buyers
24 |
25 | ## Inputs are needed to generate outputs
26 | Following inputs will be needed to generate above listed outputs
27 | * ID
28 | * Year
29 | * Make
30 | * Model
31 | * Trim
32 | * Engine
33 | * Drive Type
34 | * Body Type
35 | * Transmission Type
36 | * Price
37 | * Sale Price
38 | * Images
39 | * Features list
40 |
41 | ## Technologies
42 | This CRUD app will use following technologies
43 |
44 | Front End
45 | * React
46 | * React-router
47 | * Redux
48 | * Redux-form
49 | * Reactstrap
50 |
51 | Backend
52 | * Node.js
53 | * Express.js
54 | * Firenase.js
55 | * Postgresql
56 |
57 |
58 | ## Feature list
59 | User
60 | * User will see list of cars
61 | * User will see different filters in order to browse particular type of car
62 | * User will click on car from list and will see detailed information about that car
63 | * User will see a message form to send an interest for car also can be used for schedule test drive
64 |
65 | Admin
66 | * Admin will see dashboard
67 | * Admin will see a list of inventory
68 | * Admin will be able to Add, Edit and Delete cars from inventory
69 | * Admin will see a list of messages by users
70 | * Admin will read user's messages and follow up
71 |
72 | ## User - Home Page
73 |
74 | 
75 |
76 | ## User - Search car by make
77 |
78 | 
79 |
80 | ## User - Car detail
81 |
82 | 
83 |
84 | ## Admin - Dashboard
85 |
86 | 
87 |
88 | ## Admin - Add car
89 |
90 | 
91 |
92 | ## Admin - Edit car
93 |
94 | 
95 |
96 | ## Admin - Messages
97 |
98 | 
99 |
--------------------------------------------------------------------------------
/src/components/admin/messages.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import { Row, Col} from 'reactstrap';
3 | import { connect } from 'react-redux';
4 | import { deleteMsg } from '../../actions/message';
5 | import Icon from 'react-icons-kit';
6 | import { bin } from 'react-icons-kit/icomoon';
7 | import { enlarge } from 'react-icons-kit/icomoon';
8 | import MessageWindow from './message_window';
9 |
10 | class Messages extends Component {
11 |
12 | state ={
13 | show: false,
14 | id:'',
15 | uname:'',
16 | uemail:'',
17 | uphone:'',
18 | uinterest:'',
19 | umessage:''
20 | }
21 |
22 | enlargeMessage = (message) => {
23 | let show = this.state.show;
24 | this.setState({
25 | show: !show,
26 | id: message.id,
27 | uname: message.uname,
28 | uemail: message.uemail,
29 | uphone: message.uphone,
30 | uinterest: message.uinterest,
31 | umessage: message.umessage
32 | });
33 | }
34 |
35 | handleDelete = (id) => {
36 | console.log("id is: ", id);
37 | this.props.deleteMsg(id);
38 | this.props.history.push('/admin/messages');
39 | }
40 |
41 | render(){
42 |
43 | let messagesList = this.props.messages ? this.props.messages.map(message => {
44 | return(
45 | 75 |
78 |
83 |
84 | MESSAGES
79 |
80 | {messagesList}
81 |
82 |
46 |
47 | this.enlargeMessage(message)}
58 | />
59 |
60 | this.handleDelete(message.id)}
65 | />
66 |
67 |
68 |
69 | )
70 | }) : null;
71 |
72 | return(
73 |
74 |
75 |
76 | : null}
86 |
87 |
88 |
89 | );
90 | }
91 | }
92 |
93 | function mapStateToProps(state, props){
94 | return{
95 | messages: state.messages
96 | }
97 | }
98 |
99 | export default connect(mapStateToProps, {deleteMsg})(Messages);
100 |
--------------------------------------------------------------------------------
/client/src/components/admin/messages.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import { Row, Col} from 'reactstrap';
3 | import { connect } from 'react-redux';
4 | import { deleteMsg } from '../../actions/message';
5 | import Icon from 'react-icons-kit';
6 | import { bin } from 'react-icons-kit/icomoon';
7 | import { enlarge } from 'react-icons-kit/icomoon';
8 | import MessageWindow from './message_window';
9 |
10 | class Messages extends Component {
11 |
12 | state ={
13 | show: false,
14 | id:'',
15 | uname:'',
16 | uemail:'',
17 | uphone:'',
18 | uinterest:'',
19 | umessage:''
20 | }
21 |
22 | enlargeMessage = (message) => {
23 | let show = this.state.show;
24 | this.setState({
25 | show: !show,
26 | id: message.id,
27 | uname: message.uname,
28 | uemail: message.uemail,
29 | uphone: message.uphone,
30 | uinterest: message.uinterest,
31 | umessage: message.umessage
32 | });
33 | }
34 |
35 | handleDelete = (id) => {
36 | console.log("id is: ", id);
37 | this.props.deleteMsg(id);
38 | this.props.history.push('/admin/messages');
39 | }
40 |
41 | render(){
42 |
43 | let messagesList = this.props.messages ? this.props.messages.map(message => {
44 | return(
45 | 75 |
78 |
83 |
84 | MESSAGES
79 |
80 | {messagesList}
81 |
82 |
46 |
47 | this.enlargeMessage(message)}
58 | />
59 |
60 | this.handleDelete(message.id)}
65 | />
66 |
67 |
68 |
69 | )
70 | }) : null;
71 |
72 | return(
73 |
74 |
75 |
76 | : null}
86 |
87 |
88 |
89 | );
90 | }
91 | }
92 |
93 | function mapStateToProps(state, props){
94 | return{
95 | messages: state.messages
96 | }
97 | }
98 |
99 | export default connect(mapStateToProps, {deleteMsg})(Messages);
100 |
--------------------------------------------------------------------------------
/src/components/user/slideshow.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import {
3 | Carousel,
4 | CarouselItem,
5 | CarouselControl,
6 | CarouselIndicators,
7 | CarouselCaption
8 | } from 'reactstrap';
9 |
10 | const items = [
11 | {
12 | src: 'https://s3.amazonaws.com/cartool/background.jpg',
13 | altText: 'Audi A3',
14 | caption: 'Checkout Christmas Sale'
15 | },
16 | {
17 | src: 'https://s3.amazonaws.com/cartool/lam_bg.jpg',
18 | altText: 'Lamborghini',
19 | caption: 'Aventador SV Roadster'
20 | },
21 | {
22 | src: 'https://s3.amazonaws.com/cartool/camry_bg.jpg',
23 | altText: '',
24 | caption: '2018 Camry'
25 | }
26 | ];
27 |
28 | class JumboTron extends Component {
29 | constructor(props) {
30 | super(props);
31 | this.state = { activeIndex: 0 };
32 | this.next = this.next.bind(this);
33 | this.previous = this.previous.bind(this);
34 | this.goToIndex = this.goToIndex.bind(this);
35 | this.onExiting = this.onExiting.bind(this);
36 | this.onExited = this.onExited.bind(this);
37 | }
38 |
39 | onExiting() {
40 | this.animating = true;
41 | }
42 |
43 | onExited() {
44 | this.animating = false;
45 | }
46 |
47 | next() {
48 | if (this.animating) return;
49 | const nextIndex = this.state.activeIndex === items.length - 1 ? 0 : this.state.activeIndex + 1;
50 | this.setState({ activeIndex: nextIndex });
51 | }
52 |
53 | previous() {
54 | if (this.animating) return;
55 | const nextIndex = this.state.activeIndex === 0 ? items.length - 1 : this.state.activeIndex - 1;
56 | this.setState({ activeIndex: nextIndex });
57 | }
58 |
59 | goToIndex(newIndex) {
60 | if (this.animating) return;
61 | this.setState({ activeIndex: newIndex });
62 | }
63 |
64 | render() {
65 | const { activeIndex } = this.state;
66 |
67 | const slides = items.map((item) => {
68 | return (
69 | 75 |
78 |
83 |
84 | MESSAGES
79 |
80 | {messagesList}
81 |
82 |
82 |
87 |
92 |
93 | );
94 | }
95 | }
96 |
97 |
98 | export default JumboTron;
99 |
100 |
101 |
102 |
--------------------------------------------------------------------------------
/client/src/components/user/slideshow.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import {
3 | Carousel,
4 | CarouselItem,
5 | CarouselControl,
6 | CarouselIndicators,
7 | CarouselCaption
8 | } from 'reactstrap';
9 |
10 | const items = [
11 | {
12 | src: 'https://s3.amazonaws.com/cartool/background.jpg',
13 | altText: 'Audi A3',
14 | caption: 'Checkout Christmas Sale'
15 | },
16 | {
17 | src: 'https://s3.amazonaws.com/cartool/lam_bg.jpg',
18 | altText: 'Lamborghini',
19 | caption: 'Aventador SV Roadster'
20 | },
21 | {
22 | src: 'https://s3.amazonaws.com/cartool/camry_bg.jpg',
23 | altText: '',
24 | caption: '2018 Camry'
25 | }
26 | ];
27 |
28 | class JumboTron extends Component {
29 | constructor(props) {
30 | super(props);
31 | this.state = { activeIndex: 0 };
32 | this.next = this.next.bind(this);
33 | this.previous = this.previous.bind(this);
34 | this.goToIndex = this.goToIndex.bind(this);
35 | this.onExiting = this.onExiting.bind(this);
36 | this.onExited = this.onExited.bind(this);
37 | }
38 |
39 | onExiting() {
40 | this.animating = true;
41 | }
42 |
43 | onExited() {
44 | this.animating = false;
45 | }
46 |
47 | next() {
48 | if (this.animating) return;
49 | const nextIndex = this.state.activeIndex === items.length - 1 ? 0 : this.state.activeIndex + 1;
50 | this.setState({ activeIndex: nextIndex });
51 | }
52 |
53 | previous() {
54 | if (this.animating) return;
55 | const nextIndex = this.state.activeIndex === 0 ? items.length - 1 : this.state.activeIndex - 1;
56 | this.setState({ activeIndex: nextIndex });
57 | }
58 |
59 | goToIndex(newIndex) {
60 | if (this.animating) return;
61 | this.setState({ activeIndex: newIndex });
62 | }
63 |
64 | render() {
65 | const { activeIndex } = this.state;
66 |
67 | const slides = items.map((item) => {
68 | return (
69 |
82 |
87 |
92 |
93 | );
94 | }
95 | }
96 |
97 |
98 | export default JumboTron;
99 |
100 |
101 |
102 |
--------------------------------------------------------------------------------
/src/components/user/Form:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import app from "../config/dev";
3 | import Message from './Message';
4 | import { messageRef, timeRef } from './references';
5 |
6 |
7 | export default class Form extends Component {
8 | constructor(props) {
9 | super(props);
10 | this.state = {
11 | userName: 'Sample@gmail.com',
12 | message: '',
13 | Carsloading: true,
14 | list: [],
15 | authenticated: false,
16 | currentUser: null,
17 | redirect: false,
18 | email: '',
19 | };
20 | this.listenMessages();
21 | this.handleSend = this.handleSend.bind(this);
22 | }
23 |
24 | componentWillMount() {
25 |
26 | app.auth().onAuthStateChanged((user) => {
27 | if (user) {
28 | this.setState({
29 | currentUser: user,
30 | userName: user.email,
31 | authenticated: true
32 | })
33 | }
34 | });
35 | }
36 |
37 | handleChange(event) {
38 | this.setState({message: event.target.value});
39 | }
40 | handleSend() {
41 | if (this.state.message) {
42 | var newItem = {
43 | userName: this.state.userName,
44 | message: this.state.message,
45 | }
46 | messageRef.push(newItem);
47 | this.setState({ message: '' });
48 | this.setState({userName: this.state.userName})
49 | }
50 | }
51 | handleKeyPress(event) {
52 | if (event.key !== 'Enter') return;
53 | this.handleSend();
54 | }
55 | listenMessages() {
56 |
57 | messageRef.on('value', snap => {
58 | const tasks = [];
59 | let list = []
60 | snap.forEach(shot => {
61 | list.push({ ...shot.val(), key: shot.key });
62 | });
63 | list = list.slice(-10)
64 | this.setState({ list: list, CarsLoading: false });
65 | });
66 | }
67 |
68 | render() {
69 | let carList;
70 | const { list, CarsLoading } = this.state;
71 | if (list.length){
72 | carList = (
73 | - { list.map((item, index, userName) =>
74 |
81 |
103 | );
104 | }
105 | }
106 |
--------------------------------------------------------------------------------
/src/components/user/services.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import { Card, CardImg, CardBody,
3 | CardTitle, Button } from 'reactstrap';
4 | import { Link } from 'react-router-dom'
5 | export default class Services extends Component{
6 |
7 |
8 | constructor(props) {
9 | super(props);
10 | this.state = {
11 | info: "",
12 | info2:'',
13 | msg:"more",
14 | counter: 0,
15 | counter3: 0
16 | };
17 |
18 | this.showMore = this.showMore.bind(this);
19 |
20 |
21 | }
22 | showMore() {
23 |
24 | this.setState({counter: this.state.counter+1})
25 | console.log("counter is" + this.state.counter);
26 |
27 | if (this.state.counter%2===0) {
28 | this.setState({info:"Neweset Vehicles available! including our 2018 Bmw! " , msg:"Less"})
29 |
30 | }
31 |
32 | if (this.state.counter%2===1) {
33 | this.setState({info:"" , msg:"more"})
34 |
35 | }
36 |
37 | }
38 | showMore2() {
39 | alert("counter"+ this.state.counter3);
40 | this.setState({counter3: this.state.counter3++})
41 | console.log("counter is" + this.state.counter3);
42 |
43 | if (this.state.counter3%2===0) {
44 | this.setState({info2:"test drive Available. Please call 18000000 to shecdule test drive.. " , msg:"Less"})
45 |
46 | }
47 |
48 | if (this.state.counter3%2===1) {
49 | this.setState({info2:"" , msg:"more"})
50 |
51 | }
52 |
53 | }
54 | render(){
55 | return(
56 |
82 | {carList}
83 |
84 |
85 |
93 |
102 |
94 |
100 |
101 |
57 |
58 |
59 |
92 | );
93 | }
94 | }
95 |
--------------------------------------------------------------------------------
/client/src/components/user/services.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import { Card, CardImg, CardBody,
3 | CardTitle, Button } from 'reactstrap';
4 | import { Link } from 'react-router-dom'
5 | export default class Services extends Component{
6 |
7 |
8 | constructor(props) {
9 | super(props);
10 | this.state = {
11 | info: "",
12 | info2:'',
13 | msg:"more",
14 | counter: 0,
15 | counter3: 0
16 | };
17 |
18 | this.showMore = this.showMore.bind(this);
19 |
20 |
21 | }
22 | showMore() {
23 |
24 | this.setState({counter: this.state.counter+1})
25 | console.log("counter is" + this.state.counter);
26 |
27 | if (this.state.counter%2===0) {
28 | this.setState({info:"Neweset Vehicles available! including our 2018 Bmw! " , msg:"Less"})
29 |
30 | }
31 |
32 | if (this.state.counter%2===1) {
33 | this.setState({info:"" , msg:"more"})
34 |
35 | }
36 |
37 | }
38 | showMore2() {
39 | alert("counter"+ this.state.counter3);
40 | this.setState({counter3: this.state.counter3++})
41 | console.log("counter is" + this.state.counter3);
42 |
43 | if (this.state.counter3%2===0) {
44 | this.setState({info2:"test drive Available. Please call 18000000 to shecdule test drive.. " , msg:"Less"})
45 |
46 | }
47 |
48 | if (this.state.counter3%2===1) {
49 | this.setState({info2:"" , msg:"more"})
50 |
51 | }
52 |
53 | }
54 | render(){
55 | return(
56 | 58 |
59 |
60 |
91 |
61 |
90 |
62 |
89 |
63 | 
64 |
70 |
64 |
65 |
69 | Find New Vehicle
66 |Over 1000 Vehicles available!
67 |68 |
71 | 
72 |
79 |
72 |
73 |
78 | Financing
74 |We Help with getting loans and have the best rates!
75 | 76 |{this.state.info}
77 |
80 | 
81 |
88 |
81 |
82 |
87 | Schedule Test Drive
83 |Test drive availalbe 5 days a week ! Feel free to shcedule one now!
84 | 85 | 86 |
57 |
58 |
59 |
92 | );
93 | }
94 | }
95 |
--------------------------------------------------------------------------------
/client/build/service-worker.js:
--------------------------------------------------------------------------------
1 | "use strict";function setOfCachedUrls(e){return e.keys().then(function(e){return e.map(function(e){return e.url})}).then(function(e){return new Set(e)})}var precacheConfig=[["/index.html","4cbc28a58444736105b7bc8aae3d9d1f"],["/static/css/main.17670369.css","682586dba4533a4ccfe12d49fb48f102"],["/static/js/main.1ea9d9c1.js","140ad968b682dbdcad2056b1fe130e37"],["/static/media/audiA3.a9a5fe3b.jpg","a9a5fe3bf43da2e99166f8389729f649"],["/static/media/camry.f94f6f71.jpg","f94f6f71d275e26509b45530971dca12"],["/static/media/finance.f2e63f0b.jpg","f2e63f0be010952eaf97f31ecfe79f22"],["/static/media/lambo.a72171b9.jpg","a72171b904c4b7cfa3872007a90cf88d"],["/static/media/new_car.80787942.webp","80787942020be1931cceea922b56b4e2"],["/static/media/test-drive.862d4dd2.jpg","862d4dd2981552e2831ed4ca2e748ecb"]],cacheName="sw-precache-v3-sw-precache-webpack-plugin-"+(self.registration?self.registration.scope:""),ignoreUrlParametersMatching=[/^utm_/],addDirectoryIndex=function(e,t){var n=new URL(e);return"/"===n.pathname.slice(-1)&&(n.pathname+=t),n.toString()},cleanResponse=function(e){if(!e.redirected)return Promise.resolve(e);return("body"in e?Promise.resolve(e.body):e.blob()).then(function(t){return new Response(t,{headers:e.headers,status:e.status,statusText:e.statusText})})},createCacheKey=function(e,t,n,r){var a=new URL(e);return r&&a.pathname.match(r)||(a.search+=(a.search?"&":"")+encodeURIComponent(t)+"="+encodeURIComponent(n)),a.toString()},isPathWhitelisted=function(e,t){if(0===e.length)return!0;var n=new URL(t).pathname;return e.some(function(e){return n.match(e)})},stripIgnoredUrlParameters=function(e,t){var n=new URL(e);return n.hash="",n.search=n.search.slice(1).split("&").map(function(e){return e.split("=")}).filter(function(e){return t.every(function(t){return!t.test(e[0])})}).map(function(e){return e.join("=")}).join("&"),n.toString()},hashParamName="_sw-precache",urlsToCacheKeys=new Map(precacheConfig.map(function(e){var t=e[0],n=e[1],r=new URL(t,self.location),a=createCacheKey(r,hashParamName,n,/\.\w{8}\./);return[r.toString(),a]}));self.addEventListener("install",function(e){e.waitUntil(caches.open(cacheName).then(function(e){return setOfCachedUrls(e).then(function(t){return Promise.all(Array.from(urlsToCacheKeys.values()).map(function(n){if(!t.has(n)){var r=new Request(n,{credentials:"same-origin"});return fetch(r).then(function(t){if(!t.ok)throw new Error("Request for "+n+" returned a response with status "+t.status);return cleanResponse(t).then(function(t){return e.put(n,t)})})}}))})}).then(function(){return self.skipWaiting()}))}),self.addEventListener("activate",function(e){var t=new Set(urlsToCacheKeys.values());e.waitUntil(caches.open(cacheName).then(function(e){return e.keys().then(function(n){return Promise.all(n.map(function(n){if(!t.has(n.url))return e.delete(n)}))})}).then(function(){return self.clients.claim()}))}),self.addEventListener("fetch",function(e){if("GET"===e.request.method){var t,n=stripIgnoredUrlParameters(e.request.url,ignoreUrlParametersMatching),r="index.html";(t=urlsToCacheKeys.has(n))||(n=addDirectoryIndex(n,r),t=urlsToCacheKeys.has(n));var a="/index.html";!t&&"navigate"===e.request.mode&&isPathWhitelisted(["^(?!\\/__).*"],e.request.url)&&(n=new URL(a,self.location).toString(),t=urlsToCacheKeys.has(n)),t&&e.respondWith(caches.open(cacheName).then(function(e){return e.match(urlsToCacheKeys.get(n)).then(function(e){if(e)return e;throw Error("The cached response that was expected is missing.")})}).catch(function(t){return console.warn('Couldn\'t serve response for "%s" from cache: %O',e.request.url,t),fetch(e.request)}))}});
--------------------------------------------------------------------------------
/client/src/actions/cars.js:
--------------------------------------------------------------------------------
1 | import axios from 'axios'
2 | import thunkMiddleware from 'redux-thunk';
3 | import { createStore, applyMiddleware } from 'redux'
4 |
5 | import { CarsRef, authRef, provider } from "../components/admin/reference";
6 | export const GET_CARS_PENDING = 'GET_CARS_PENDING'
7 | export const GET_CARS_SUCCESS = 'GET_CARS_SUCCESS'
8 | export const GET_SEARCH_RESULTS = 'GET_SEARCH_RESULTS'
9 | export const GET_SINGLE_CAR = 'GET_SINGLE_CAR'
10 | export const ADD_CAR_PENDING = 'ADD_CAR_PENDING'
11 | export const ADD_CAR_SUCCESS = 'ADD_CAR_SUCCESS'
12 | export const EDIT_CAR_PENDING = 'EDIT_CAR_PENDING'
13 | export const EDIT_CAR_SUCCESS = 'EDIT_CAR_SUCCESS'
14 | export const REMOVE_CAR_PENDING = 'REMOVE_CAR_PENDING'
15 | export const REMOVE_CAR_SUCCESS = 'REMOVE_CAR_SUCCESS'
16 | export const GET_SINGLE_CAR_PENDING = 'GET_SINGLE_CAR_PENDING';
17 |
18 |
19 |
20 | export function getCarsThunk() {
21 | return dispatch => {
22 | const cars = [];
23 | CarsRef.on('value', snap => {
24 | const tasks = [];
25 | let Cars = []
26 | snap.forEach(shot => {
27 | Cars.push({ ...shot.val(), key: shot.key });
28 | })
29 | })
30 | dispatch({
31 | type:GET_CARS_SUCCESS,
32 | payload:cars
33 | })
34 | }
35 |
36 | }
37 |
38 |
39 |
40 | export function getsinglecar(id){
41 | return async dispatch => {
42 | dispatch({ type: GET_SINGLE_CAR_PENDING });
43 | CarsRef.child(id).once("value", function(snapshot) {
44 | dispatch({
45 | type: GET_SINGLE_CAR,
46 | payload: snapshot.val()
47 | })
48 |
49 | })
50 | }
51 | }
52 |
53 | export function search(make) {
54 | return async dispatch => {
55 |
56 |
57 | dispatch({ type: GET_SEARCH_RESULTS });
58 | CarsRef.child(make).once("value", function(snapshot) {
59 | dispatch({
60 | type: GET_SEARCH_RESULTS,
61 | payload: snapshot.val()
62 | })
63 |
64 | })
65 | }
66 | }
67 |
68 | export const createCar = (newCar) => {
69 | return async (dispatch) => {
70 | dispatch({ type: ADD_CAR_PENDING })
71 | let newcar = await axios.post('http://localhost:8000/car', newCar)
72 | dispatch({
73 | type: ADD_CAR_SUCCESS,
74 | payload: newcar
75 | })
76 | }
77 | }
78 |
79 |
80 |
81 |
82 | export const editCar = (editedCar) => {
83 | console.log(editedCar, "*****");
84 | return async (dispatch) => {
85 | dispatch({ type: EDIT_CAR_PENDING })
86 | let bodyObj = {
87 | car: {
88 | year: editedCar.year,
89 | make: editedCar.make,
90 | model: editedCar.model,
91 | trim: editedCar.trim,
92 | engine: editedCar.engine,
93 | drive_type: editedCar.drive_type,
94 | body_type: editedCar.body_type,
95 | ext_color: editedCar.ext_color,
96 | int_color: editedCar.int_color,
97 | transmission: editedCar.transmission,
98 | price: editedCar.price,
99 | sale: editedCar.sale,
100 | status: editedCar.status,
101 | vin: editedCar.vin
102 | },
103 | image: editedCar.link,
104 | features: {
105 | elect_stab: editedCar.elect_stab,
106 | wireless: editedCar.wireless,
107 | seat: editedCar.seat,
108 | keyless: editedCar.keyless,
109 | trip_comp: editedCar.trip_comp,
110 | tire_pressure: editedCar.tire_pressure,
111 | wiper: editedCar.wiper,
112 | headlight: editedCar.headlight
113 | }
114 | }
115 | let updatedcar = await axios.patch(`http://localhost:8000/car/${editedCar.id}`, bodyObj)
116 | dispatch({
117 | type: EDIT_CAR_SUCCESS,
118 | payload: updatedcar
119 | })
120 | }
121 | }
122 |
123 | export const deleteCar = (carId) => {
124 | return async (dispatch) => {
125 | dispatch({ type: REMOVE_CAR_PENDING })
126 | let removedcar = await axios.delete(`http://localhost:8000/car/${carId}`)
127 | dispatch({
128 | type: REMOVE_CAR_SUCCESS,
129 | payload: removedcar
130 | })
131 | }
132 | }
--------------------------------------------------------------------------------
/src/actions/cars.js:
--------------------------------------------------------------------------------
1 | import axios from 'axios'
2 | import thunkMiddleware from 'redux-thunk';
3 | import { createStore, applyMiddleware } from 'redux'
4 |
5 | import { CarsRef, authRef, provider } from "../components/admin/reference";
6 | export const GET_CARS_PENDING = 'GET_CARS_PENDING'
7 | export const GET_CARS_SUCCESS = 'GET_CARS_SUCCESS'
8 | export const GET_SEARCH_RESULTS = 'GET_SEARCH_RESULTS'
9 | export const GET_SINGLE_CAR = 'GET_SINGLE_CAR'
10 | export const ADD_CAR_PENDING = 'ADD_CAR_PENDING'
11 | export const ADD_CAR_SUCCESS = 'ADD_CAR_SUCCESS'
12 | export const EDIT_CAR_PENDING = 'EDIT_CAR_PENDING'
13 | export const EDIT_CAR_SUCCESS = 'EDIT_CAR_SUCCESS'
14 | export const REMOVE_CAR_PENDING = 'REMOVE_CAR_PENDING'
15 | export const REMOVE_CAR_SUCCESS = 'REMOVE_CAR_SUCCESS'
16 | export const GET_SINGLE_CAR_PENDING = 'GET_SINGLE_CAR_PENDING';
17 |
18 |
19 |
20 | export function getCarsThunk() {
21 | return dispatch => {
22 | const cars = [];
23 | CarsRef.on('value', snap => {
24 | const tasks = [];
25 | let Cars = []
26 | snap.forEach(shot => {
27 | Cars.push({ ...shot.val(), key: shot.key });
28 | })
29 | })
30 | dispatch({
31 | type:GET_CARS_SUCCESS,
32 | payload:cars
33 | })
34 | }
35 |
36 | }
37 |
38 |
39 |
40 | export function getsinglecar(id){
41 | return async dispatch => {
42 | dispatch({ type: GET_SINGLE_CAR_PENDING });
43 | CarsRef.child(id).once("value", function(snapshot) {
44 | dispatch({
45 | type: GET_SINGLE_CAR,
46 | payload: snapshot.val()
47 | })
48 |
49 | })
50 | }
51 | }
52 |
53 | export function search(make) {
54 | return async dispatch => {
55 |
56 |
57 | dispatch({ type: GET_SEARCH_RESULTS });
58 | CarsRef.child(make).once("value", function(snapshot) {
59 | dispatch({
60 | type: GET_SEARCH_RESULTS,
61 | payload: snapshot.val()
62 | })
63 |
64 | })
65 | }
66 | }
67 |
68 | export const createCar = (newCar) => {
69 | return async (dispatch) => {
70 | dispatch({ type: ADD_CAR_PENDING })
71 | let newcar = await axios.post('http://localhost:8000/car', newCar)
72 | dispatch({
73 | type: ADD_CAR_SUCCESS,
74 | payload: newcar
75 | })
76 | }
77 | }
78 | <<<<<<< HEAD
79 |
80 |
81 |
82 |
83 | export const editCar = (editedCar) => {
84 | console.log(editedCar, "*****");
85 | return async (dispatch) => {
86 | dispatch({ type: EDIT_CAR_PENDING })
87 | let bodyObj = {
88 | car: {
89 | year: editedCar.year,
90 | make: editedCar.make,
91 | model: editedCar.model,
92 | trim: editedCar.trim,
93 | engine: editedCar.engine,
94 | drive_type: editedCar.drive_type,
95 | body_type: editedCar.body_type,
96 | ext_color: editedCar.ext_color,
97 | int_color: editedCar.int_color,
98 | transmission: editedCar.transmission,
99 | price: editedCar.price,
100 | sale: editedCar.sale,
101 | status: editedCar.status,
102 | vin: editedCar.vin
103 | },
104 | image: editedCar.link,
105 | features: {
106 | elect_stab: editedCar.elect_stab,
107 | wireless: editedCar.wireless,
108 | seat: editedCar.seat,
109 | keyless: editedCar.keyless,
110 | trip_comp: editedCar.trip_comp,
111 | tire_pressure: editedCar.tire_pressure,
112 | wiper: editedCar.wiper,
113 | headlight: editedCar.headlight
114 | }
115 | }
116 | let updatedcar = await axios.patch(`http://localhost:8000/car/${editedCar.id}`, bodyObj)
117 | dispatch({
118 | type: EDIT_CAR_SUCCESS,
119 | payload: updatedcar
120 | })
121 | }
122 | }
123 |
124 | export const deleteCar = (carId) => {
125 | return async (dispatch) => {
126 | dispatch({ type: REMOVE_CAR_PENDING })
127 | let removedcar = await axios.delete(`http://localhost:8000/car/${carId}`)
128 | dispatch({
129 | type: REMOVE_CAR_SUCCESS,
130 | payload: removedcar
131 | })
132 | }
133 | }
134 | =======
135 | >>>>>>> parent of 0453b9b... working on edit car
136 |
--------------------------------------------------------------------------------
/src/components/user/top_search_bar.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import { connect } from 'react-redux';
3 | import { bindActionCreators } from 'redux';
4 | import { updateFilter } from '../../actions/filtered';
5 | import { CarsRef, timeRef } from '../admin/reference';
6 | import Searchresults from './searchresult';
7 |
8 |
9 | class TopSearchBar extends Component {
10 | state = {
11 | make: '',
12 | body: '',
13 | priceRange: ''
14 | }
15 | handleSubmit = (e) => {
16 | e.preventDefault();
17 |
18 |
19 | this.props.history.push(`/cars2/${this.state.make}`)
20 |
21 | }
22 |
23 |
24 |
25 |
26 |
27 | render(){
28 | let content = null;
29 |
30 | if (content !==null ) {
31 | 58 |
59 |
60 |
91 |
61 |
90 |
62 |
89 |
63 |
64 |
70 |
64 |
65 |
69 | Find New Vehicle
66 |Over 1000 Vehicles available!
67 |68 |
71 |
72 |
79 |
72 |
73 |
78 | Financing
74 |We Help with getting loans and have the best rates!
75 | 76 |{this.state.info}
77 |
80 |
81 |
88 |
81 |
82 |
87 | Schedule Test Drive
83 |Test drive availalbe 5 days a week ! Feel free to shcedule one now!
84 | 85 | 86 |h
37 | 38 | } 39 | 40 | let searchMake = ["Audi","Honda","Lamborghini","Maserati", "Subaru","Toyota"]; 41 | 42 | let cars = { 43 | Audi: [ {body: "Sedan"}, {body: "Coupe"}, {body: "SUV"} ], 44 | Honda: [ {body: "Sedan"}, {body: "Van"}, {body: "SUV"} ], 45 | Lamborghini: [ {body: "Coupe"} ], 46 | Maserati: [ {body: "Coupe"}, {body: "SUV"} ], 47 | Mercedes: [ {body: "Convertible"}, {body: "Coupe"} ], 48 | Subaru: [ {body: "Hatchback"} ], 49 | Toyota: [ {body: "SUV"}, {body: "Sedan"}, {body: "Truck"} ] 50 | } 51 | 52 | let makes = searchMake.map((make, i) => { 53 | return ( 54 | 57 | ) 58 | }) 59 | 60 | if(this.state.make) { 61 | var body = cars[this.state.make].map((make, i) => { 62 | return ( 63 | ) 66 | }) 67 | } 68 | 69 | return( 70 |
71 |
72 |
114 | );
115 | }
116 | }
117 |
118 | function mapStateToProps(state){
119 | return{
120 | filter: state.filter
121 | }
122 | }
123 |
124 | function mapDispatchToProps(dispatch){
125 | return bindActionCreators({updateFilter: updateFilter}, dispatch)
126 | }
127 |
128 |
129 | export default connect(mapStateToProps, mapDispatchToProps)(TopSearchBar);
130 |
--------------------------------------------------------------------------------
/client/src/components/user/top_search_bar.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import { connect } from 'react-redux';
3 | import { bindActionCreators } from 'redux';
4 | import { updateFilter } from '../../actions/filtered';
5 | import { CarsRef, timeRef } from '../admin/reference';
6 | import Searchresults from './searchresult';
7 |
8 |
9 | class TopSearchBar extends Component {
10 | state = {
11 | make: '',
12 | body: '',
13 | priceRange: ''
14 | }
15 | handleSubmit = (e) => {
16 | e.preventDefault();
17 |
18 |
19 | this.props.history.push(`/cars2/${this.state.make}`)
20 |
21 | }
22 |
23 |
24 |
25 |
26 |
27 | render(){
28 | let content = null;
29 |
30 | if (content !==null ) {
31 | 72 |
73 |
113 |
74 |
110 |
111 |
112 | h
37 | 38 | } 39 | 40 | let searchMake = ["Audi","Honda","Lamborghini","Maserati", "Subaru","Toyota"]; 41 | 42 | let cars = { 43 | Audi: [ {body: "Sedan"}, {body: "Coupe"}, {body: "SUV"} ], 44 | Honda: [ {body: "Sedan"}, {body: "Van"}, {body: "SUV"} ], 45 | Lamborghini: [ {body: "Coupe"} ], 46 | Maserati: [ {body: "Coupe"}, {body: "SUV"} ], 47 | Mercedes: [ {body: "Convertible"}, {body: "Coupe"} ], 48 | Subaru: [ {body: "Hatchback"} ], 49 | Toyota: [ {body: "SUV"}, {body: "Sedan"}, {body: "Truck"} ] 50 | } 51 | 52 | let makes = searchMake.map((make, i) => { 53 | return ( 54 | 57 | ) 58 | }) 59 | 60 | if(this.state.make) { 61 | var body = cars[this.state.make].map((make, i) => { 62 | return ( 63 | ) 66 | }) 67 | } 68 | 69 | return( 70 |
71 |
72 |
114 | );
115 | }
116 | }
117 |
118 | function mapStateToProps(state){
119 | return{
120 | filter: state.filter
121 | }
122 | }
123 |
124 | function mapDispatchToProps(dispatch){
125 | return bindActionCreators({updateFilter: updateFilter}, dispatch)
126 | }
127 |
128 |
129 | export default connect(mapStateToProps, mapDispatchToProps)(TopSearchBar);
130 |
--------------------------------------------------------------------------------
/client/src/components/user/navigation_bar.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import {
3 | Collapse,
4 | Navbar,
5 | NavbarToggler,
6 | NavbarBrand,
7 | Nav,
8 | Button,
9 | NavItem,
10 | NavLink,
11 | UncontrolledDropdown,
12 | DropdownToggle,
13 | DropdownMenu,
14 | DropdownItem } from 'reactstrap';import { withRouter } from "react-router";
15 | import Icon from 'react-icons-kit';
16 | import { car } from 'react-icons-kit/fa/car';
17 | import { Redirect,Link } from 'react-router-dom'
18 | import app from "../config/dev";
19 | export default class NavigatioBar extends React.Component {
20 |
21 |
22 | constructor(props) {
23 | super(props);
24 | this.state={
25 | authenticated: false,
26 | currentUser: null,
27 | redirect: false,
28 |
29 |
30 | isOpen: false
31 |
32 |
33 | }
34 | this.toggle = this.toggle.bind(this);
35 | this.signout = this.signout.bind(this);
36 |
37 | }
38 | toggle() {
39 | this.setState({
40 | isOpen: !this.state.isOpen
41 | });
42 | }
43 |
44 | signout(){
45 | app.auth().signOut().then((user) => {
46 | this.setState ({ redirect: true })
47 |
48 | })
49 |
50 | }
51 |
52 | componentWillMount() {
53 | app.auth().onAuthStateChanged((user) => {
54 |
55 |
56 | if (user) {
57 | this.setState({
58 | currentUser: user,
59 | authenticated: true
60 | })
61 | } else {
62 | this.setState({
63 | currentUser: null,
64 | authenticated: false
65 | })
66 | }
67 | });
68 | }
69 | render() {
70 | const { redirect } = this.state;
71 |
72 | if (redirect) {
73 | return 72 |
73 |
113 |
74 |
110 |
111 |
112 |
78 |
79 |
129 |
130 | );
131 | }
132 | }
--------------------------------------------------------------------------------
/client/src/components/admin/admin_cars.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import { Table, Row, Col } from 'reactstrap';
3 | import { connect } from 'react-redux';
4 | import { deleteCar } from '../../actions/cars';
5 | import Icon from 'react-icons-kit';
6 | import { bin } from 'react-icons-kit/icomoon';
7 | import { pencil } from 'react-icons-kit/icomoon';
8 | import { Link } from 'react-router-dom';
9 | import TotalMessage from './total_messages';
10 | import TotalInventory from './total_inventory';
11 | import Specials from './specials';
12 | import { CarsRef, timeRef } from './reference';
13 | class Cars extends Component {
14 | state = {
15 | Cars: [],
16 | Carsloading: true
17 | };
18 | handleDelete = (id) => {
19 | this.props.deleteCar(id);
20 | }
21 |
22 |
23 | componentWillMount() {
24 |
25 | CarsRef.on('value', snap => {
26 | const tasks = [];
27 | let Cars = []
28 | snap.forEach(shot => {
29 | Cars.push({ ...shot.val(), key: shot.key });
30 | });
31 | this.setState({ Cars: Cars, CarsLoading: false });
32 | });
33 | }
34 |
35 |
36 | render(){
37 |
38 | const { Cars, CarsLoading } = this.state;
39 | const orderedcars = Cars;
40 |
41 | let carList;
42 |
43 | if (CarsLoading) {
44 | carList =
80 |
81 |
82 | Direct Motor Group
83 |
85 |
126 |
127 |
128 | Loading...
;
45 |
46 | }
47 | else if (Cars.length) {
48 | carList = (
49 | -
50 | {Cars.map(car => (
51 |
52 |
53 |
88 |
89 |
90 |
92 |
93 |
98 |
99 |
100 |
101 |
126 | );
127 | }
128 |
129 |
130 |
131 | }
132 |
133 |
134 | function mapStateToProps(state, props){
135 | return{
136 | cars: state.cars,
137 | messages: state.messages
138 |
139 | }
140 | }
141 |
142 | export default connect(mapStateToProps, {deleteCar})(Cars);
143 |
--------------------------------------------------------------------------------
/client/src/components/user/contact.js:
--------------------------------------------------------------------------------
1 | //done
2 | import React, { Component } from 'react';
3 | import { Form, FormGroup, Input, Alert, Label } from 'reactstrap';
4 | import { bindActionCreators } from 'redux';
5 | import { connect } from 'react-redux';
6 | import { sendMessage } from '../../actions/message';
7 | import axios from 'axios';
8 | class ContactForm extends Component {
9 |
10 | state = {
11 | uname: '',
12 | uemail: '',
13 | uphone: '',
14 | msg:'',
15 |
16 | isHidden: true,
17 | uinterest: '',
18 | umessage: '',
19 | followup: false,
20 | read: false,
21 | alertMsg: false
22 | }
23 |
24 |
25 | alertMsgClose = () => {
26 | this.setState({ alertMsg: false });
27 | }
28 |
29 |
30 | handleSubmit = (e) => {
31 | e.preventDefault();
32 | const name = this.state.uname;
33 | const email = this.state.uemail;
34 | const message = this.state.umessage;
35 |
36 |
37 | console.log("Sending", this.state)
38 | axios({
39 | method: "POST",
40 | url:"/api/send",
41 | data: {
42 | name: name,
43 | email: email,
44 | message: message
45 | }
46 | }).then((response)=>{
47 | console.log(response.data)
48 | if (response.data.msg === 'success'){
49 |
50 | this.setState({
51 | isHidden: !this.state.isHidden
52 | })
53 |
54 | }else if(response.data.msg === 'fail'){
55 | alert("Message failed to send.")
56 | }
57 | })
58 | .catch(err => {
59 | console.log(err)
60 | })
61 | }
62 | alertMsgClose = () => {
63 | this.setState({ alertMsg: false });
64 | }
65 |
66 | render(){
67 | return(
68 | 89 |
101 |
102 |
125 | INVENTORY
103 |
104 |
105 |
106 |
123 |
124 | | ID | 108 |YEAR | 109 |MAKE | 110 |MODEL | 111 |BODY | 112 |COLOR | 113 |PRICE | 114 |STATUS | 115 |EDIT | 116 |DELETE | 117 |
|---|
69 |
122 | {!this.state.isHidden &&
124 | );
125 | }
126 | }
127 |
128 | function mapDispatchToProps(dispatch) {
129 | return {
130 | sendMessage: bindActionCreators(sendMessage, dispatch)
131 | }
132 | }
133 |
134 | export default connect(null, mapDispatchToProps)(ContactForm);
--------------------------------------------------------------------------------
/src/components/user/contact.js:
--------------------------------------------------------------------------------
1 | //done
2 | import React, { Component } from 'react';
3 | import { Form, FormGroup, Input, Alert, Label } from 'reactstrap';
4 | import { bindActionCreators } from 'redux';
5 | import { connect } from 'react-redux';
6 | import { sendMessage } from '../../actions/message';
7 | import axios from 'axios';
8 | class ContactForm extends Component {
9 |
10 | state = {
11 | uname: '',
12 | uemail: '',
13 | uphone: '',
14 | msg:'',
15 |
16 | isHidden: true,
17 | uinterest: '',
18 | umessage: '',
19 | followup: false,
20 | read: false,
21 | alertMsg: false
22 | }
23 |
24 |
25 | alertMsgClose = () => {
26 | this.setState({ alertMsg: false });
27 | }
28 |
29 |
30 | handleSubmit = (e) => {
31 | e.preventDefault();
32 | const name = this.state.uname;
33 | const email = this.state.uemail;
34 | const message = this.state.umessage;
35 |
36 |
37 | console.log("Sending", this.state)
38 | axios({
39 | method: "POST",
40 | url:"https://directmotorgroup.herokuapp.com/send",
41 | data: {
42 | name: name,
43 | email: email,
44 | message: message
45 | }
46 | }).then((response)=>{
47 | console.log(response.data)
48 | if (response.data.msg === 'success'){
49 |
50 | this.setState({
51 | isHidden: !this.state.isHidden
52 | })
53 |
54 | }else if(response.data.msg === 'fail'){
55 | alert("Message failed to send.")
56 | }
57 | })
58 | .catch(err => {
59 | console.log(err)
60 | })
61 | }
62 | alertMsgClose = () => {
63 | this.setState({ alertMsg: false });
64 | }
65 |
66 | render(){
67 | return(
68 | Message has been sent!
}
123 |
69 |
122 | {!this.state.isHidden &&
124 | );
125 | }
126 | }
127 |
128 | function mapDispatchToProps(dispatch) {
129 | return {
130 | sendMessage: bindActionCreators(sendMessage, dispatch)
131 | }
132 | }
133 |
134 | export default connect(null, mapDispatchToProps)(ContactForm);
--------------------------------------------------------------------------------
/client/src/App.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
3 | import { connect } from 'react-redux';
4 | import { bindActionCreators } from 'redux';
5 | import { getCars } from './actions/cars';
6 | import { getMessages } from './actions/message';
7 | import firebase from 'firebase';
8 | // User Components
9 | import NavigationBar from './components/user/navigation_bar';
10 | import TopSearchBar from './components/user/top_search_bar';
11 | import parts from './components/user/parts';
12 | import FooterTop from './components/user/footer_top';
13 | import FooterBottom from './components/user/footer_bottom';
14 | import UserHomePage from './components/user/home';
15 | import CarsList from './components/user/cars_list';
16 |
17 | import Searchresults from './components/user/searchresult';
18 | import OneCar from './components/user/one_car';
19 | import Service from './components/user/service';
20 | // Admin Components
21 | import AdminNavigatioBar from './components/admin/admin_top_navigation';
22 | import Cars from './components/admin/admin_cars';
23 | import NewCar from './components/admin/newcar';
24 | import Messages from './components/admin/messages';
25 | import EditCar from './components/admin/edit_car';
26 |
27 | import PrivateRoute from "./PrivateRoute";
28 | import Login from "./Login";
29 | import app from "./components/config/dev";
30 |
31 | import Home from "./components/user/home";
32 |
33 | import User from "./components/user/user";
34 | import SignUp from "./SignUp";
35 | import ContactForm from './components/user/contact';
36 | import SignOut from './components/user/SignOut';
37 | class App extends Component {
38 |
39 | componentDidMount(){
40 |
41 | this.props.getMessages();
42 | }
43 | state = { loading: true, authenticated: false, user: null };
44 |
45 | componentWillMount() {
46 | app.auth().onAuthStateChanged(user => {
47 | if (user) {
48 | this.setState({
49 | authenticated: true,
50 | currentUser: user,
51 | loading: false
52 | });
53 | } else {
54 | this.setState({
55 | authenticated: false,
56 | currentUser: null,
57 | loading: false
58 | });
59 | }
60 | });
61 | }
62 |
63 | render() {
64 |
65 | const { authenticated, loading } = this.state;
66 | if (loading) {
67 | return Message has been sent!
}
123 | Loading..
; 68 | } 69 | 70 | return ( 71 |
72 |
73 |
116 |
117 |
118 | );
119 | }
120 | }
121 |
122 | function mapDispatchToProps(dispatch){
123 | return{
124 | getMessages: bindActionCreators(getMessages, dispatch)
125 | }
126 | }
127 |
128 | export default connect(null, mapDispatchToProps) (App);
129 |
--------------------------------------------------------------------------------
/src/App.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
3 | import { connect } from 'react-redux';
4 | import { bindActionCreators } from 'redux';
5 | import { getCars } from './actions/cars';
6 | import { getMessages } from './actions/message';
7 | import firebase from 'firebase';
8 | // User Components
9 | import NavigationBar from './components/user/navigation_bar';
10 | import TopSearchBar from './components/user/top_search_bar';
11 | import parts from './components/user/parts';
12 | import FooterTop from './components/user/footer_top';
13 | import FooterBottom from './components/user/footer_bottom';
14 | import UserHomePage from './components/user/home';
15 | import CarsList from './components/user/cars_list';
16 |
17 | import Searchresults from './components/user/searchresult';
18 | import OneCar from './components/user/one_car';
19 | import Service from './components/user/service';
20 | // Admin Components
21 | import AdminNavigatioBar from './components/admin/admin_top_navigation';
22 | import Cars from './components/admin/admin_cars';
23 | import NewCar from './components/admin/newcar';
24 | import Messages from './components/admin/messages';
25 |
26 | import PrivateRoute from "./PrivateRoute";
27 | import Login from "./Login";
28 | import app from "./components/config/dev";
29 |
30 | import Home from "./components/user/home";
31 |
32 | import User from "./components/user/user";
33 | import SignUp from "./SignUp";
34 | import ContactForm from './components/user/contact';
35 | import SignOut from './components/user/SignOut';
36 | class App extends Component {
37 |
38 | componentDidMount(){
39 |
40 | this.props.getMessages();
41 | }
42 | state = { loading: true, authenticated: false, user: null };
43 |
44 | componentWillMount() {
45 | app.auth().onAuthStateChanged(user => {
46 | if (user) {
47 | this.setState({
48 | authenticated: true,
49 | currentUser: user,
50 | loading: false
51 | });
52 | } else {
53 | this.setState({
54 | authenticated: false,
55 | currentUser: null,
56 | loading: false
57 | });
58 | }
59 | });
60 | }
61 |
62 | render() {
63 |
64 | const { authenticated, loading } = this.state;
65 | if (loading) {
66 | return
74 |
75 | (
76 | (
88 |
114 |
115 |
77 |
78 |
85 | )} />
86 |
87 |
89 |
105 |
106 |
107 |
108 |
111 | )} />
112 |
113 | Loading..
; 67 | } 68 | 69 | return ( 70 |
71 |
72 |
118 |
119 |
120 | );
121 | }
122 | }
123 |
124 | function mapDispatchToProps(dispatch){
125 | return{
126 | getMessages: bindActionCreators(getMessages, dispatch)
127 | }
128 | }
129 |
130 | export default connect(null, mapDispatchToProps) (App);
131 |
--------------------------------------------------------------------------------
/src/components/user/navigation_bar.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import {
3 | Collapse,
4 | Navbar,
5 | NavbarToggler,
6 | NavbarBrand,
7 | Nav,
8 | Button,
9 | NavItem,
10 | NavLink,
11 | UncontrolledDropdown,
12 | DropdownToggle,
13 | DropdownMenu,
14 | DropdownItem } from 'reactstrap';import { withRouter } from "react-router";
15 | import Icon from 'react-icons-kit';
16 | import { car } from 'react-icons-kit/fa/car';
17 | import { Redirect,Link } from 'react-router-dom'
18 | import app from "../config/dev";
19 | export default class NavigatioBar extends React.Component {
20 |
21 |
22 | constructor(props) {
23 | super(props);
24 | this.state={
25 | authenticated: false,
26 | currentUser: null,
27 | redirect: false,
28 | email: '',
29 |
30 |
31 | isOpen: false
32 |
33 |
34 | }
35 | this.toggle = this.toggle.bind(this);
36 | this.signout = this.signout.bind(this);
37 |
38 | }
39 | toggle() {
40 | this.setState({
41 | isOpen: !this.state.isOpen
42 | });
43 | }
44 |
45 | signout(){
46 | app.auth().signOut().then((user) => {
47 | this.setState ({ redirect: true })
48 |
49 | })
50 |
51 | }
52 |
53 |
54 |
55 |
56 | componentWillMount() {
57 |
58 | app.auth().onAuthStateChanged((user) => {
59 |
60 |
61 |
62 |
63 | if (user) {
64 |
65 | this.setState({
66 | currentUser: user,
67 | email: user.email,
68 | authenticated: true
69 | })
70 | } else {
71 | this.setState({
72 | currentUser: null,
73 | authenticated: false
74 | })
75 | }
76 | });
77 | }
78 | render() {
79 | const { redirect } = this.state;
80 |
81 | if (redirect) {
82 | return
73 |
74 | (
75 | (
90 |
116 |
117 |
76 |
77 |
87 | )} />
88 |
89 |
91 |
107 |
108 |
109 |
110 |
113 | )} />
114 |
115 |
87 |
88 |
155 |
156 | );
157 | }
158 | }
159 |
--------------------------------------------------------------------------------
/src/components/admin/admin_cars.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import { Table, Row, Col } from 'reactstrap';
3 | import { connect } from 'react-redux';
4 | import { deleteCar } from '../../actions/cars';
5 | import Icon from 'react-icons-kit';
6 | import { bin } from 'react-icons-kit/icomoon';
7 | import { pencil } from 'react-icons-kit/icomoon';
8 | <<<<<<< HEAD
9 | import { Link } from 'react-router-dom';
10 | import TotalMessage from './total_messages';
11 | import TotalInventory from './total_inventory';
12 | import Specials from './specials';
13 |
14 | class Cars extends Component {
15 |
16 | handleDelete = (id) => {
17 | this.props.deleteCar(id);
18 | }
19 |
20 | render(){
21 | <<<<<<< HEAD
22 |
23 | const { Cars, CarsLoading } = this.state;
24 | const orderedcars = Cars;
25 |
26 | let carList;
27 |
28 | if (CarsLoading) {
29 | carList =
89 |
90 |
91 | Direct Motor Group
92 |
94 |
152 |
153 |
154 | Loading...
;
30 |
31 | }
32 | else if (Cars.length) {
33 | carList = (
34 | -
35 | {Cars.map(car => (
36 |
37 |
38 |
73 |
74 |
75 |
77 |
78 |
83 |
84 |
85 |
86 |
122 | {car.id}
123 | {car.year}
124 | {car.make}
125 | {car.model}
126 | {car.body_type}
127 | {car.int_color}
128 | {car.price}
129 | {car.status ? "Available" : "Sold"}
130 | <<<<<<< HEAD
131 |
132 |
133 |
136 | this.handleDelete(car.id)}
140 | />
146 | )
147 | }) : null;
148 |
149 | let totalInventory = this.props.cars ? this.props.cars : null;
150 | let totalMessages = this.props.messages ? this.props.messages : null;
151 | let specials = this.props.cars ? this.props.cars : null;
152 |
153 | return(
154 |
90 | 
91 |
93 | );
94 | });
95 |
96 | return (
97 |
195 | //
197 | // );
198 | // });
199 | //
200 | // return (
201 | //
90 |
91 |
93 | );
94 | });
95 |
96 | return (
97 |
195 | //
197 | // );
198 | // });
199 | //
200 | // return (
201 | //
74 |
86 |
87 |
110 | =======
111 | =======
112 |
113 | class Cars extends Component {
114 | render(){
115 |
116 | console.log('admin dashboard: ', this.props.cars);
117 |
118 | >>>>>>> parent of 0453b9b... working on edit car
119 | let inventory = this.props.cars ? this.props.cars.map(car => {
120 | return(
121 | INVENTORY
88 |
89 |
90 |
91 |
108 |
109 | | ID | 93 |YEAR | 94 |MAKE | 95 |MODEL | 96 |BODY | 97 |COLOR | 98 |PRICE | 99 |STATUS | 100 |EDIT | 101 |DELETE | 102 |
|---|
155 |
156 |
157 |
159 |
160 |
165 |
166 |
167 |
168 |
194 | );
195 | }
196 | }
197 |
198 | function mapStateToProps(state, props){
199 | return{
200 | cars: state.cars,
201 | messages: state.messages
202 |
203 | }
204 | }
205 |
206 | export default connect(mapStateToProps, {deleteCar})(Cars);
207 |
--------------------------------------------------------------------------------
/src/components/user/service.js:
--------------------------------------------------------------------------------
1 |
2 | import React, { Component } from 'react';
3 | import { Card, CardImg, CardBody,
4 | CardTitle, Button } from 'reactstrap';
5 | import { Link } from 'react-router-dom'
6 | export default class Service extends Component{
7 |
8 | render(){
9 | return(
10 |
11 |
12 | 156 |
168 |
169 |
193 | INVENTORY
170 |
171 |
172 |
173 |
190 | >>>>>>> parent of 67c49d0... ldld
191 |
192 | | ID | 175 |YEAR | 176 |MAKE | 177 |MODEL | 178 |BODY | 179 |COLOR | 180 |PRICE | 181 |STATUS | 182 |EDIT | 183 |DELETE | 184 |
|---|
13 | {/* Navigation */}
14 |
15 | {/* Masthead */}
16 |
17 |
18 |
19 |
39 | {/* Icons Grid */}
40 |
41 |
73 | {/* Image Showcases */}
74 |
75 |
99 | {/* Testimonials */}
100 |
101 |
102 |
103 | {/* Call to Action */}
104 |
105 |
106 |
126 |
127 |
128 |
129 |
130 | );
131 | }
132 | }
133 |
--------------------------------------------------------------------------------
/client/src/components/user/service.js:
--------------------------------------------------------------------------------
1 |
2 | import React, { Component } from 'react';
3 | import { Card, CardImg, CardBody,
4 | CardTitle, Button } from 'reactstrap';
5 | import { Link } from 'react-router-dom'
6 | export default class Service extends Component{
7 |
8 | render(){
9 | return(
10 |
11 |
12 | 17 |
20 |
38 |
21 |
37 |
22 |
24 | Our Services And Cars
23 |
25 |
35 |
36 |
42 |
72 |
43 |
71 |
44 |
52 |
45 |
51 |
46 |
47 |
48 | Super Customer service
49 |superior customer service, unmatched by any other company in the entire region.!!
50 |
53 |
61 |
54 |
60 |
55 |
56 |
57 | Skilled Technicians
58 |highly professional attention to your demands!
59 |
62 |
70 |
63 |
69 |
64 |
65 |
66 | Easy to Use
67 |Whatever your car needs, we can get the job done!
68 |
76 |
98 |
77 |
78 |
83 |
79 |
82 | Auto Body Repair
80 |Our technicians are certified and provide detailed, highly professional attention to your demands. We advocate on behalf of the insured, and we’ll pick up and deliver you car right from your home or office. You need your car back as soon as possible, and we make sure you’ll have it back and running in the timeliest manner possible.
81 |
84 |
85 |
90 |
86 |
89 | Anti Theft Protection!
87 |In the United States, two vehicles are stolen every minute. This innovative system protects your vehicle against theft and provides you benefits in the unlikely event it is stolen.
88 |
91 |
92 |
97 |
93 |
96 | Insurance
94 |Choosing the right auto insurance can be tough. Direct Motor Group makes it easy with a fast, accurate quote that helps you get car insurance discounts as you go.
95 |
107 |
125 |
108 |
124 |
109 |
111 | Ready to get started? Sign up now!
110 |
112 |
122 |
123 |
13 | {/* Navigation */}
14 |
15 | {/* Masthead */}
16 |
17 |
18 |
19 |
39 | {/* Icons Grid */}
40 |
41 |
73 | {/* Image Showcases */}
74 |
75 |
99 | {/* Testimonials */}
100 |
101 |
102 |
103 | {/* Call to Action */}
104 |
105 |
106 |
126 |
127 |
128 |
129 |
130 | );
131 | }
132 | }
133 |
--------------------------------------------------------------------------------
/src/components/user/jumbotron.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import {
3 | Carousel,
4 | CarouselItem,
5 | CarouselControl,
6 | CarouselIndicators,
7 | CarouselCaption
8 | } from 'reactstrap';
9 |
10 | var carouselImages = [];
11 |
12 | class JumboTron extends Component {
13 | constructor(props) {
14 | super(props);
15 | this.state = { activeIndex: 0 };
16 |
17 | if (this.props.images != null)
18 | {
19 | this.carouselImages = [];
20 | for (var i = 0; i < this.props.images.length; i++) {
21 | this.carouselImages.push({src: this.props.images[i],
22 | altText: null,
23 | caption: null
24 | });
25 | }
26 | }
27 | else
28 | {
29 | this.carouselImages = [
30 | {
31 | src: 'https://s3.amazonaws.com/cartool/background.jpg',
32 | altText: 'Audi A3',
33 | caption: 'Checkout Christmas Sale'
34 | },
35 | {
36 | src: 'https://s3.amazonaws.com/cartool/lam_bg.jpg',
37 | altText: 'Lamborghini',
38 | caption: 'Aventador SV Roadster'
39 | },
40 | {
41 | src: 'https://s3.amazonaws.com/cartool/camry_bg.jpg',
42 | altText: '',
43 | caption: '2018 Camry'
44 | }
45 | ];
46 | }
47 |
48 | this.next = this.next.bind(this);
49 | this.previous = this.previous.bind(this);
50 | this.goToIndex = this.goToIndex.bind(this);
51 | this.onExiting = this.onExiting.bind(this);
52 | this.onExited = this.onExited.bind(this);
53 | }
54 |
55 | onExiting() {
56 | this.animating = true;
57 | }
58 |
59 | onExited() {
60 | this.animating = false;
61 | }
62 |
63 | next() {
64 | if (this.animating) return;
65 | const nextIndex = this.state.activeIndex === this.carouselImages.length - 1 ? 0 : this.state.activeIndex + 1;
66 | this.setState({ activeIndex: nextIndex });
67 | }
68 |
69 | previous() {
70 | if (this.animating) return;
71 | const nextIndex = this.state.activeIndex === 0 ? this.carouselImages.length - 1 : this.state.activeIndex - 1;
72 | this.setState({ activeIndex: nextIndex });
73 | }
74 |
75 | goToIndex(newIndex) {
76 | if (this.animating) return;
77 | this.setState({ activeIndex: newIndex });
78 | }
79 |
80 | render() {
81 | const { activeIndex } = this.state;
82 |
83 | const slides = this.carouselImages.map((item) => {
84 | return (
85 | 17 |
20 |
38 |
21 |
37 |
22 |
24 | Our Services And Cars
23 |
25 |
35 |
36 |
42 |
72 |
43 |
71 |
44 |
52 |
45 |
51 |
46 |
47 |
48 | Super Customer service
49 |superior customer service, unmatched by any other company in the entire region.!!
50 |
53 |
61 |
54 |
60 |
55 |
56 |
57 | Skilled Technicians
58 |highly professional attention to your demands!
59 |
62 |
70 |
63 |
69 |
64 |
65 |
66 | Easy to Use
67 |Whatever your car needs, we can get the job done!
68 |
76 |
98 |
77 |
78 |
83 |
79 |
82 | Auto Body Repair
80 |Our technicians are certified and provide detailed, highly professional attention to your demands. We advocate on behalf of the insured, and we’ll pick up and deliver you car right from your home or office. You need your car back as soon as possible, and we make sure you’ll have it back and running in the timeliest manner possible.
81 |
84 |
85 |
90 |
86 |
89 | Anti Theft Protection!
87 |In the United States, two vehicles are stolen every minute. This innovative system protects your vehicle against theft and provides you benefits in the unlikely event it is stolen.
88 |
91 |
92 |
97 |
93 |
96 | Insurance
94 |Choosing the right auto insurance can be tough. Direct Motor Group makes it easy with a fast, accurate quote that helps you get car insurance discounts as you go.
95 |
107 |
125 |
108 |
124 |
109 |
111 | Ready to get started? Sign up now!
110 |
112 |
122 |
123 |
98 |
103 |
108 |
109 | );
110 | }
111 | }
112 |
113 |
114 | export default JumboTron;
115 |
116 |
117 |
118 |
119 |
120 | // import React, { Component } from 'react';
121 | // import {
122 | // Carousel,
123 | // CarouselItem,
124 | // CarouselControl,
125 | // CarouselIndicators,
126 | // CarouselCaption
127 | // } from 'reactstrap';
128 | //
129 | // const items = [
130 | // {
131 | // id: 'https://s3.amazonaws.com/cartool/white_lamborghini_2.jpg',
132 | // altText: 'Slide 1',
133 | // caption: 'Slide 1'
134 | // },
135 | // {
136 | // id: 'https://s3.amazonaws.com/cartool/background.jpg',
137 | // altText: 'Slide 2',
138 | // caption: 'Slide 2'
139 | // },
140 | // {
141 | // id: 3,
142 | // altText: 'Slide 3',
143 | // caption: 'Slide 3'
144 | // }
145 | // ];
146 | //
147 | // class JumboTron extends Component {
148 | // constructor(props) {
149 | // super(props);
150 | // this.state = { activeIndex: 0 };
151 | // this.next = this.next.bind(this);
152 | // this.previous = this.previous.bind(this);
153 | // this.goToIndex = this.goToIndex.bind(this);
154 | // this.onExiting = this.onExiting.bind(this);
155 | // this.onExited = this.onExited.bind(this);
156 | // }
157 | //
158 | // onExiting() {
159 | // this.animating = true;
160 | // }
161 | //
162 | // onExited() {
163 | // this.animating = false;
164 | // }
165 | //
166 | // next() {
167 | // if (this.animating) return;
168 | // const nextIndex = this.state.activeIndex === items.length - 1 ? 0 : this.state.activeIndex + 1;
169 | // this.setState({ activeIndex: nextIndex });
170 | // }
171 | //
172 | // previous() {
173 | // if (this.animating) return;
174 | // const nextIndex = this.state.activeIndex === 0 ? items.length - 1 : this.state.activeIndex - 1;
175 | // this.setState({ activeIndex: nextIndex });
176 | // }
177 | //
178 | // goToIndex(newIndex) {
179 | // if (this.animating) return;
180 | // this.setState({ activeIndex: newIndex });
181 | // }
182 | //
183 | // render() {
184 | // const { activeIndex } = this.state;
185 | //
186 | // const slides = items.map((item) => {
187 | // return (
188 | //
202 | //
213 | //
218 | //
223 | //
224 | // );
225 | // }
226 | // }
227 | //
228 | // export default JumboTron;
--------------------------------------------------------------------------------
/client/src/components/user/jumbotron.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import {
3 | Carousel,
4 | CarouselItem,
5 | CarouselControl,
6 | CarouselIndicators,
7 | CarouselCaption
8 | } from 'reactstrap';
9 |
10 | var carouselImages = [];
11 |
12 | class JumboTron extends Component {
13 | constructor(props) {
14 | super(props);
15 | this.state = { activeIndex: 0 };
16 |
17 | if (this.props.images != null)
18 | {
19 | this.carouselImages = [];
20 | for (var i = 0; i < this.props.images.length; i++) {
21 | this.carouselImages.push({src: this.props.images[i],
22 | altText: null,
23 | caption: null
24 | });
25 | }
26 | }
27 | else
28 | {
29 | this.carouselImages = [
30 | {
31 | src: 'https://s3.amazonaws.com/cartool/background.jpg',
32 | altText: 'Audi A3',
33 | caption: 'Checkout Christmas Sale'
34 | },
35 | {
36 | src: 'https://s3.amazonaws.com/cartool/lam_bg.jpg',
37 | altText: 'Lamborghini',
38 | caption: 'Aventador SV Roadster'
39 | },
40 | {
41 | src: 'https://s3.amazonaws.com/cartool/camry_bg.jpg',
42 | altText: '',
43 | caption: '2018 Camry'
44 | }
45 | ];
46 | }
47 |
48 | this.next = this.next.bind(this);
49 | this.previous = this.previous.bind(this);
50 | this.goToIndex = this.goToIndex.bind(this);
51 | this.onExiting = this.onExiting.bind(this);
52 | this.onExited = this.onExited.bind(this);
53 | }
54 |
55 | onExiting() {
56 | this.animating = true;
57 | }
58 |
59 | onExited() {
60 | this.animating = false;
61 | }
62 |
63 | next() {
64 | if (this.animating) return;
65 | const nextIndex = this.state.activeIndex === this.carouselImages.length - 1 ? 0 : this.state.activeIndex + 1;
66 | this.setState({ activeIndex: nextIndex });
67 | }
68 |
69 | previous() {
70 | if (this.animating) return;
71 | const nextIndex = this.state.activeIndex === 0 ? this.carouselImages.length - 1 : this.state.activeIndex - 1;
72 | this.setState({ activeIndex: nextIndex });
73 | }
74 |
75 | goToIndex(newIndex) {
76 | if (this.animating) return;
77 | this.setState({ activeIndex: newIndex });
78 | }
79 |
80 | render() {
81 | const { activeIndex } = this.state;
82 |
83 | const slides = this.carouselImages.map((item) => {
84 | return (
85 |
98 |
103 |
108 |
109 | );
110 | }
111 | }
112 |
113 |
114 | export default JumboTron;
115 |
116 |
117 |
118 |
119 |
120 | // import React, { Component } from 'react';
121 | // import {
122 | // Carousel,
123 | // CarouselItem,
124 | // CarouselControl,
125 | // CarouselIndicators,
126 | // CarouselCaption
127 | // } from 'reactstrap';
128 | //
129 | // const items = [
130 | // {
131 | // id: 'https://s3.amazonaws.com/cartool/white_lamborghini_2.jpg',
132 | // altText: 'Slide 1',
133 | // caption: 'Slide 1'
134 | // },
135 | // {
136 | // id: 'https://s3.amazonaws.com/cartool/background.jpg',
137 | // altText: 'Slide 2',
138 | // caption: 'Slide 2'
139 | // },
140 | // {
141 | // id: 3,
142 | // altText: 'Slide 3',
143 | // caption: 'Slide 3'
144 | // }
145 | // ];
146 | //
147 | // class JumboTron extends Component {
148 | // constructor(props) {
149 | // super(props);
150 | // this.state = { activeIndex: 0 };
151 | // this.next = this.next.bind(this);
152 | // this.previous = this.previous.bind(this);
153 | // this.goToIndex = this.goToIndex.bind(this);
154 | // this.onExiting = this.onExiting.bind(this);
155 | // this.onExited = this.onExited.bind(this);
156 | // }
157 | //
158 | // onExiting() {
159 | // this.animating = true;
160 | // }
161 | //
162 | // onExited() {
163 | // this.animating = false;
164 | // }
165 | //
166 | // next() {
167 | // if (this.animating) return;
168 | // const nextIndex = this.state.activeIndex === items.length - 1 ? 0 : this.state.activeIndex + 1;
169 | // this.setState({ activeIndex: nextIndex });
170 | // }
171 | //
172 | // previous() {
173 | // if (this.animating) return;
174 | // const nextIndex = this.state.activeIndex === 0 ? items.length - 1 : this.state.activeIndex - 1;
175 | // this.setState({ activeIndex: nextIndex });
176 | // }
177 | //
178 | // goToIndex(newIndex) {
179 | // if (this.animating) return;
180 | // this.setState({ activeIndex: newIndex });
181 | // }
182 | //
183 | // render() {
184 | // const { activeIndex } = this.state;
185 | //
186 | // const slides = items.map((item) => {
187 | // return (
188 | //
202 | //
213 | //
218 | //
223 | //
224 | // );
225 | // }
226 | // }
227 | //
228 | // export default JumboTron;
--------------------------------------------------------------------------------
/src/components/user/user.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import JumboTron from './jumbotron';
3 | import Services from './services';
4 | import firebase from 'firebase';
5 | import CarsList from './cars_list';
6 | import { CarssRef, timeRef } from '../admin/reference';
7 | import app from "../config/dev";
8 | import { CardImg, Button, Row, Col, Table } from 'reactstrap';
9 | import { Redirect,Link } from 'react-router-dom'
10 | class User extends Component {
11 |
12 | state = {
13 | Cars: [],
14 | Carsloading: true
15 | };
16 |
17 |
18 | componentDidMount() {
19 |
20 | app.auth().onAuthStateChanged((user) => {
21 |
22 | //this was the variable u were using and is undefined
23 | //this.props.location.state.car.id
24 | //alert("car has been saved!")
25 |
26 | const user_ID= user.uid;
27 |
28 |
29 |
30 | //Display all keys and id value of all cars
31 | CarssRef.orderByChild('userID') .equalTo(`${user_ID}`).on('value', (snap) => {
32 | let Cars = []
33 | snap.forEach((child) => {
34 | Cars.push({ ...child.val(), key: child.key });
35 | });
36 |
37 | console.log(Cars);
38 | this.setState({ Cars: Cars, CarsLoading: false });
39 | });
40 |
41 |
42 | });
43 |
44 | }
45 | render(){
46 |
47 | const { Cars, CarsLoading } = this.state;
48 | const orderedcars = Cars;
49 |
50 | let carList;
51 |
52 |
53 | if (CarsLoading) {
54 | carList = Loading...
;
55 | } else {
56 |
57 | carList = (
58 |
59 | -
60 |
My Saved Cars
61 | 62 | {Cars.map(car => ( 63 |
64 |
65 |
182 |
183 | ))}
184 |
67 |
180 |
181 |
68 |
74 | 69 | 70 | 71 | 72 |
73 |
75 |
76 |
87 |
88 |
118 |
119 |
121 |
122 |
176 |
177 |
178 |
179 | | Engine: | 90 |{car.engine} | 91 |
| Drive Type: | 94 |{car.drive_type} | 95 |
| Body: | 98 |{car.body_type} | 99 |
| Exterior Color: | 102 |{car.ext_color} | 103 |
| Interior Color: | 106 |{car.int_color} | 107 |
| Transmission: | 110 |{car.transmission} | 111 |
| VIN: | 114 |{car.vin} | 115 |
| 124 | MSRP: 125 | | 126 |127 | ${car.price} 128 | | 129 |
| 132 | Dealer Discount: 133 | | 134 |135 | {car.sale}% 136 | | 137 |
| 140 | Total: 141 | | 142 |143 | 144 | ${car.price - (car.price * car.sale) / 100} 145 | 146 | | 147 |
| 150 | Est. Lease: 151 | | 152 |153 | $230/m* 154 | | 155 |
| 158 | Est. Finance: 159 | | 160 |161 | $330/m* 162 | | 163 |
| 166 | | 167 | 168 | 171 | 172 | | 173 |
Loading...
;
55 | } else {
56 |
57 | carList = (
58 |
59 | -
60 |
My Saved Cars
61 | 62 | {Cars.map(car => ( 63 |
64 |
65 |
182 |
183 | ))}
184 |
67 |
180 |
181 |
68 |
74 | 69 | 70 | 71 | 72 |
73 |
75 |
76 |
87 |
88 |
118 |
119 |
121 |
122 |
176 |
177 |
178 |
179 | | Engine: | 90 |{car.engine} | 91 |
| Drive Type: | 94 |{car.drive_type} | 95 |
| Body: | 98 |{car.body_type} | 99 |
| Exterior Color: | 102 |{car.ext_color} | 103 |
| Interior Color: | 106 |{car.int_color} | 107 |
| Transmission: | 110 |{car.transmission} | 111 |
| VIN: | 114 |{car.vin} | 115 |
| 124 | MSRP: 125 | | 126 |127 | ${car.price} 128 | | 129 |
| 132 | Dealer Discount: 133 | | 134 |135 | {car.sale}% 136 | | 137 |
| 140 | Total: 141 | | 142 |143 | 144 | ${car.price - (car.price * car.sale) / 100} 145 | 146 | | 147 |
| 150 | Est. Lease: 151 | | 152 |153 | $230/m* 154 | | 155 |
| 158 | Est. Finance: 159 | | 160 |161 | $330/m* 162 | | 163 |
| 166 | | 167 | 168 | 171 | 172 | | 173 |
Loading...
;
56 | } else {
57 |
58 | carList = (
59 |
60 |
183 | );
184 | }
185 |
186 | return carList;
187 | }
188 | }
189 |
190 |
191 | export default Searchresults;
--------------------------------------------------------------------------------
61 | {Cars.map(car => (
62 |
182 |
63 |
180 | ))}
181 |
64 |
179 |
65 |
178 |
66 |
177 |
67 |
72 | 68 | 69 | 70 |
71 |
73 |
176 |
74 |
175 |
75 |
83 |
84 |
85 |
86 |
116 |
117 | | Engine: | 88 |{car.engine} | 89 |
| Drive Type: | 92 |{car.drive_type} | 93 |
| Body: | 96 |{car.body_type} | 97 |
| Exterior Color: | 100 |{car.ext_color} | 101 |
| Interior Color: | 104 |{car.int_color} | 105 |
| Transmission: | 108 |{car.transmission} | 109 |
| VIN: | 112 |{car.vin} | 113 |
118 |
119 |
120 |
173 |
174 | | 122 | MSRP: 123 | | 124 |125 | ${car.price} 126 | | 127 |
| 130 | Dealer Discount: 131 | | 132 |133 | {car.sale}% 134 | | 135 |
| 138 | Total: 139 | | 140 |141 | 142 | ${car.price - (car.price * car.sale) / 100} 143 | 144 | | 145 |
| 148 | Est. Lease: 149 | | 150 |151 | $230/m* 152 | | 153 |
| 156 | Est. Finance: 157 | | 158 |159 | $330/m* 160 | | 161 |
| 164 | 165 | 168 | 169 | | 170 ||