Skip to content

Commit

Permalink
first commit
Browse files Browse the repository at this point in the history
  • Loading branch information
@SaravananAnbu
SaravananAnbu committed Jan 21, 2019
0 parents commit 0fa0ed5
Show file tree
Hide file tree
Showing 15 changed files with 6,539 additions and 0 deletions.
6 changes: 6 additions & 0 deletions .babelrc
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
{
"presets": [
"@babel/preset-react",
"@babel/preset-env"
]
}
2 changes: 2 additions & 0 deletions .gitignore
Original file line number Diff line number Diff line change
@@ -0,0 +1,2 @@
node_modules/
.vscode/
14 changes: 14 additions & 0 deletions dist/index.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
<!DOCTYPE html>
<html>
<head>
<title>Finding Falcone</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
</head>
<body>
<div id="app"></div>
<script src="./bundle.js" ></script>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
</body>
</html>
6,141 changes: 6,141 additions & 0 deletions package-lock.json

Large diffs are not rendered by default.

34 changes: 34 additions & 0 deletions package.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,34 @@
{
"name": "finding_falcone",
"version": "1.0.0",
"description": "Frontend Coding Challenge in Geektrust.in",
"main": "index.js",
"scripts": {
"dev": "webpack-dev-server --config ./webpack.config.js --mode development",
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "Saravanan.K",
"license": "ISC",
"dependencies": {
"axios": "^0.18.0",
"history": "^4.7.2",
"lodash": "^4.17.11",
"react": "^16.7.0",
"react-dom": "^16.7.0",
"react-redux": "^6.0.0",
"react-router-dom": "^4.3.1",
"react-router-redux": "^4.0.8",
"redux": "^4.0.1",
"redux-thunk": "^2.3.0",
"webpack": "^4.28.4",
"webpack-cli": "^3.2.1",
"webpack-dev-server": "^3.1.14"
},
"devDependencies": {
"@babel/core": "^7.2.2",
"@babel/preset-env": "^7.2.3",
"@babel/preset-react": "^7.0.0",
"babel-loader": "^8.0.5",
"react-hot-loader": "^4.6.3"
}
}
60 changes: 60 additions & 0 deletions src/actions.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,60 @@
import axios from 'axios';

const headers = {
'Accept': 'application/json',
'Content-Type' : 'application/json'
}

export const fetchPlanets = (planets) => {
return {
type: 'FETCH_PLANET_LIST',
planets
}
}

export const fetchVehicles = (vehicles) => {
return {
type: 'FETCH_VEHICLES_LIST',
vehicles
}
}

export const fetchToken = (token) => {
return {
type: 'FETCH_TOKEN',
token
}
}

export function fetchPlanetList() {
return (dispatch) => {
return axios.get('https://findfalcone.herokuapp.com/planets').then(
(res) => {
console.log(res.data)
dispatch(fetchPlanets(res.data))
}
)
}
}

export function fetchVehicleList() {
return (dispatch) => {
return axios.get('https://findfalcone.herokuapp.com/vehicles').then(
(res) => {
console.log(res.data)
dispatch(fetchVehicles(res.data))
}
)
}
}

export function getToken() {
return (dispatch) => {
return axios.post('https://findfalcone.herokuapp.com/token',{}, {headers: headers}).then(
(res) => {
console.log(res.data)
dispatch(fetchToken(res.data.token))
}
)
}
}
14 changes: 14 additions & 0 deletions src/components/app.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
import React, { Component } from 'react';
import Home from '../containers/home'

class App extends Component {
render() {
return (
<div>
{this.props.children}
</div>
);
}
}

export default App;
107 changes: 107 additions & 0 deletions src/components/home.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,107 @@
import React from 'react';
import isEmpty from 'lodash/isEmpty';

class Home extends React.Component {
constructor(props) {
super(props);
this.state = {
planets: [],
vehicles: [],
planet_names: [],
vehicle_names: [],
Destination1: "",
Destination2: "",
Destination3: "",
Destination4: "",
token: ""
}
this.handleChange = this.handleChange.bind(this)
}
handleChange(e) {
this.setState({ [e.target.name] : e.target.value })
}
componentWillMount() {
this.props.fetchPlanetList();
this.props.fetchVehicleList();
this.props.getToken();
}
componentDidUpdate(prevProps) {
if(prevProps.planets !== this.props.planets) {
this.setState({ planets: this.props.planets })
}
if(prevProps.vehicles !== this.props.vehicles) {
this.setState({ vehicles: this.props.vehicles })
}
if(prevProps.token !== this.props.token) {
this.setState({ token: this.props.token })
}
}
render() {
return (
<div className="container-fluid text-center">
<div className="row p-5">
<div className="col-12 m-3">
<h1>Finding Falcone </h1>
<h5 className="text-secondary">Select a Planet you want to Search in</h5>
</div>
<div className="col-3">
<div className="form-group">
<label>Destination 1</label>
<select className="form-control" value={this.state.Destination1} name="Destination1" onChange={this.handleChange}>
<option>Select Destination</option>
{ !isEmpty(this.state.planets) &&
this.state.planets.map((each, i) =>
<option key={i} value={each.distance}>{each.name}</option>
)
}
</select>
</div>
</div>
<div className="col-3">
<div className="form-group">
<label>Destination 2</label>
<select className="form-control" value={this.state.Destination2} name="Destination2" onChange={this.handleChange}>
<option>Select Destination</option>
{ !isEmpty(this.state.planets) &&
this.state.planets.map((each, i) =>
<option key={i} value={each.distance}>{each.name}</option>
)
}
</select>
</div>
</div>
<div className="col-3">
<div className="form-group">
<label>Destination 3</label>
<select className="form-control" value={this.state.Destination3} name="Destination3" onChange={this.handleChange}>
<option>Select Destination</option>
{ !isEmpty(this.state.planets) &&
this.state.planets.map((each, i) =>
<option key={i} value={each.distance}>{each.name}</option>
)
}
</select>
</div>
</div>
<div className="col-3">
<div className="form-group">
<label>Destination 4</label>
<select className="form-control" value={this.state.Destination4} name="Destination4" onChange={this.handleChange}>
<option>Select Destination</option>
{ !isEmpty(this.state.planets) &&
this.state.planets.map((each, i) =>
<option key={i} value={each.distance}>{each.name}</option>
)
}
</select>
</div>
</div>
</div>
</div>
);
}
}



export default Home;
26 changes: 26 additions & 0 deletions src/containers/home.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,26 @@
import { connect } from 'react-redux';
import HomeComponent from '../components/home';
import { fetchPlanetList, fetchVehicleList, getToken } from '../actions';


const mapStateToProps = (state) => {
return {
planets: state.FetchReducer.planets,
vehicles: state.FetchReducer.vehicles,
token: state.FetchReducer.token
}
}
const mapDispatchToProps = (dispatch) => {
return {
fetchPlanetList: () => dispatch(fetchPlanetList()),
fetchVehicleList: () => dispatch(fetchVehicleList()),
getToken: () => dispatch(getToken()),
}
}

const Home = connect(
mapStateToProps,
mapDispatchToProps
) (HomeComponent)

export default Home;
5 changes: 5 additions & 0 deletions src/history.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
import createHistory from 'history/createBrowserHistory';

const history = createHistory();

export default history;
21 changes: 21 additions & 0 deletions src/index.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import { createStore, compose, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import App from './components/app';
import configureStore from './store';
import { AppContainer } from 'react-hot-loader';
import Root from './routes';
import history from './history';

export const store = configureStore();

ReactDOM.render(
(<Provider store={store}>
<AppContainer>
<Root history={history}/>
</AppContainer>
</Provider>),
document.getElementById('app')
);
30 changes: 30 additions & 0 deletions src/reducers/fetchReducer.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,30 @@
const initialState = {
planets: [],
vehicles: [],
token: ""
};


const FetchReducer = (state = initialState, action) => {
switch (action.type) {
case 'FETCH_PLANET_LIST':
return Object.assign({}, state, {
planets: action.planets,
});

case 'FETCH_VEHICLES_LIST':
return Object.assign({}, state, {
vehicles: action.vehicles
});

case 'FETCH_TOKEN':
return Object.assign({}, state, {
token: action.token
});

default:
return state;
}
};

export default FetchReducer;
19 changes: 19 additions & 0 deletions src/routes.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
import React, { Component } from 'react';
import { Router, Route, Switch } from 'react-router-dom';
import App from './components/app';
import Home from './containers/home';
import history from './history';

export default class Root extends Component {
render() {
return (
<Router history={history}>
<Switch>
<App>
<Route path="/" component={Home}/>
</App>
</Switch>
</Router>
);
}
}
31 changes: 31 additions & 0 deletions src/store.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,31 @@
import { createStore, combineReducers, applyMiddleware, compose } from 'redux';
import thunk from 'redux-thunk';
import history from './history';
import { routerMiddleware, routerReducer } from 'react-router-redux';
import FetchReducer from './reducers/fetchReducer';

const middleware = routerMiddleware(history);

export default function configureStore(preloadedState) {
let store = null;

if (module.hot) {
let actionCreators = {};
store = createStore(combineReducers({
FetchReducer,
router: routerReducer
}), compose(applyMiddleware(thunk, middleware),
window.devToolsExtension ? window.devToolsExtension({actionCreators}) : f => f
));
}
else {
store = createStore(
combineReducers({
FetchReducer,
router: routerReducer
}), applyMiddleware(thunk, middleware));
}

return store
}

Loading

0 comments on commit 0fa0ed5

Please sign in to comment.