Permalink
Browse files

created react app and some components for showing some cars

  • Loading branch information...
Lunatic2420 committed Nov 9, 2019
1 parent 4c79d55 commit 03e4d3d1a04b3f901baa6fd7b1f7efeab0d0ac9a
@@ -7,6 +7,7 @@ def index

# GET /cars/1
def show
@dealership = Dealership.find(params[:dealership_id])
@cars = Car.find(params[:id])
render json: @car, include: :dealerships, status: :ok
end
@@ -41,8 +42,4 @@ def destroy
@car = Car.find(params[:id])
@car.destroy
end

private


end
@@ -1,16 +1,58 @@
import React from 'react';
import React, { Component } from 'react';
import { BrowserRouter as Router, Link, Switch, Route } from 'react-router-dom'
import axios from 'axios'
import Doc from './components/Doc'
import AllCars from './components/AllCars'
import CarsForm from './components/CarsForm'
import './App.css';

function App() {
class App extends Component {

constructor(props){
super()
this.state = {
cars: [],
dealerships: [],
carsInDealership: [],
carsLoaded: false
}
}
getAllCars = () => {
axios("http://localhost:3000/cars/").then(jsonRes => {
console.log(jsonRes.data)
this.setState({
cars: jsonRes.data.cars,
carsLoaded:true
})
})
}
setCars = (cars) => {
this.setState({
cars: cars
})
}
render(){

return (
<div className="App">
<DOC />
<Route>

</Route>
<div className = 'title'>
<Doc />

<Router>
<Link exact ="true" to ='/'>Cars</Link>
<div className ="App">
<Switch>
<Route exact path ="/cars/new"
render ={(props) => <CarsForm{...props}setCar ={this.setCar}/>}></Route>
<Route exact path ='/' render ={()=> (
<AllCars getAllcars= {this.getAllCars} cars ={this.state.cars} carsLoaded = {this.state.carsLoaded} setCars = { this.setCar }
/>
)}
/>
</Switch>
</div>
</Router>
</div>
);
}
}

export default App;
@@ -0,0 +1,22 @@
import React, { Component } from 'react'
import { Link } from 'react-router-dom'

class AllCars extends Component{

componentDidMount(){
if(!this.props.carsLoaded) {
this.props.getAllCars()
}
}

render() {
return this.props.cars.map(car => (
<div key = {car.id}>
<Link to = {`/cars/$[cars.id]`} onClick={() => this.props.setCar(car)}>Show Car</Link>
<img alt ={car.name} src ={car.img}/>
<br/>
</div>
))
}
}
export default AllCars;
@@ -0,0 +1,8 @@
import React, { Component } from 'react'

class CarsForm extends Component{


}

export default CarsForm;
@@ -3,7 +3,7 @@ import React,{ Component } from 'react'

class Doc extends Component {
componentDidMount(){
document.title = 'Car R us'
document.title = 'Cars R us'
}
render(){
return(
@@ -1,5 +1,6 @@
Rails.application.routes.draw do
resources :dealerships
resources :cars
resources :dealerships

# For details on the DSL available within this file, see https://guides.rubyonrails.org/routing.html
end
Oops, something went wrong.

0 comments on commit 03e4d3d

Please sign in to comment.