<file_sep>import React, { Component } from "react"
import { Link, Route, withRouter } from "react-router-dom"
import axios from "axios"
import { verifyUser, singleSpots, putSpot, deleteSpot, commentDaSpot, getComments } from "../services/apiHelper"

class SingleSpot extends Component {
  constructor(props) {
    super(props)

    this.state = {
      show: false,
      comments: [],
      commentData: {
        text: '',
        name: localStorage.getItem('name')
      },
      spot_Id: null,
      userId: null,
      currentUser: null,
      spot: null,
      spotUp: {
        name: null,
        boro: null,
        address: null,
        trains: null,
        obstacles: null,
        description: null,
        noteworthy: null,
        photo_main: null,
        photo2: null,
        photo3: null,
        phto4: null,
        photo5: null
      }

    }
  }

  showComments = async () => {
    const comments = await getComments(this.props.spotId);
    this.setState({
      comments: [...this.state.comments, ...comments]
    })
  }

  oneSpot = async () => {
    const spot = await singleSpots(this.props.spotId);
    console.log(spot)
    this.setState({ spot })
    this.setState({ spot_Id: spot.id })
    this.setState({ userId: spot.user_id })
    this.setState({
      spotUp: {
        name: spot.name,
        boro: spot.boro,
        address: spot.address,
        trains: spot.trains,
        obstacles: spot.obstacles,
        description: spot.description,
        noteworthy: spot.notworthy,
        photo_main: spot.photo_main,
        photo2: spot.photo2,
        photo3: spot.photo3,
        phto4: spot.photo4,
        photo5: spot.photo5
      }
    })
  }

  componentDidMount = async () => {

    verifyUser();
    this.oneSpot();
    this.showComments();
  }

  //   componentDidMount = async () => {
  //     verifyUser();
  //     const resp = await axios(`localhost:3000/spot/${this.props.spotId}`)
  //     this.setState({
  //       currentSpot: resp
  //     })

  // }

  handleChange = (e) => {
    const { name, value } = e.target;
    let spotUp = { ...this.state.spotUp };
    spotUp[name] = value;
    this.setState({
      spotUp
    })
    this.setState({ commentData: { text: value, name: localStorage.getItem('name') } })
  }

  handleUpdate = async (e, event) => {
    e.preventDefault()
    verifyUser();
    putSpot(this.props.spotId, event)
    console.log(putSpot(this.props.spotId, event))
  }

  handleDelete = async (e) => {
    e.preventDefault();
    deleteSpot(this.state.spot_Id)
    this.props.history.push("/spot")
  }

  postComment = async (e, comment) => {
    e.preventDefault();
    verifyUser();
    commentDaSpot(this.props.spotId, comment);
    this.setState({
      comments: [...this.state.comments, comment]
    })
  

  }

  showupdate = async (e) => {
    
    
    this.setState ({
      show: true
    })
  }

  hideUpdate = async (e) => {
    this.setState({
      show: false
    })
  }


  render() {

    console.log(this.state.show)

    console.log(this.state.userId);
    // console.log(this.state.spotUp)
    // console.log(this.state.comments)
    return (
      <div>
        window.scrollTo(0,0);
        {this.state.spot &&
          <div className="single">
          
          <div className="locinfo">
          
              <img src={this.state.spot.photo_main} />
              {/* <div className="locinfo"> */}
              <div className="wtf">
              <h2 className="mainsingle">{this.state.spot.name}</h2>
                <h3>{this.state.spot.boro}</h3>
                <h3>{this.state.spot.address}</h3>
                <h4>{this.state.spot.trains}</h4>
              </div>
            </div>
            <br />
            <div className="info">
              <h4>{this.state.spot.obstacles}</h4>
              <p>{this.state.spot.description}</p>
              <p>{this.state.spot.noteworthy}</p>
            </div>
            <div className="singlespotpics">
              <img src={this.state.spot.photo2} />
              <img src={this.state.spot.photo3} />
              <img src={this.state.spot.phto4} />
              <img src={this.state.spot.photo5} />
            </div>

          </div>
        }

        { this.state.show === false ?
          <button onClick={(e) => this.showupdate()}> Show Update Form</button>
            :
          <button onClick={(e) => this.hideUpdate()}>Hide</button>}

        {localStorage.getItem('id') == this.state.userId && localStorage.getItem('name') && localStorage.getItem('id') !== null && (this.state.show === true) &&
           <div className="submitform">
          <form onSubmit={(e) => this.handleUpdate(e, this.state.spotUp)}>
           

              <input
                type="text"
                name="name"
                value={this.state.spotUp.name}
                placeholder="Name Of Spot"
                onChange={e => this.handleChange(e)}
              />
              <input
                type="text"
                name="boro"
                value={this.state.spotUp.boro}
                placeholder="Boro"
                onChange={e => this.handleChange(e)}
              />

              <input
                type="text"
                name="address"
                value={this.state.spotUp.address}
                placeholder="Address"
                onChange={e => this.handleChange(e)}
              />
              <input
                type="text"
                name="trains"
                value={this.state.spotUp.trains}
                placeholder="Trains"
                onChange={e => this.handleChange(e)}
              />
              <input
                type="text"
                name="obstacles"
                value={this.state.spotUp.obstacles}
                placeholder="Stuffs to skate..."
                onChange={e => this.handleChange(e)}
              />
              <input
                type="text"
                name="description"
                value={this.state.spotUp.description}
                placeholder="Spot description"
                onChange={e => this.handleChange(e)}
              />
              <input
                type="text"
                name="noteworthy"
                value={this.state.spotUp.noteworthy}
                placeholder="Noteworthy"
                onChange={e => this.handleChange(e)}
              />

              <input
                type="text"
                name="photo_main"
                value={this.state.spotUp.photo_main}
                placeholder="Noteworthy"
                onChange={e => this.handleChange(e)}
              />

              <input
                type="text"
                name="photo2"
                value={this.state.spotUp.photo2}
                placeholder="Photo 2"
                onChange={e => this.handleChange(e)}
              />

              <input
                type="text"
                name="photo3"
                value={this.state.spotUp.photo3}
                placeholder="Photo 3"
                onChange={e => this.handleChange(e)}
              />

              <input
                type="text"
                name="phto4"
                value={this.state.spotUp.phto4}
                placeholder="Photo 4"
                onChange={e => this.handleChange(e)}
              />

              <input
                type="text"
                name="photo5"
                value={this.state.spotUp.photo5}
                placeholder="Photo 5"
                onChange={e => this.handleChange(e)}
              />



              <input className="subbutt" type="submit" />



           
            <button onClick={this.handleDelete}>DELETE</button>
          </form>
          </div>

        }

        <br/>

        <h1 className="comintro">Survey says. . .</h1>
        <br />
        {this.state.comments && this.state.comments.map((comment, index) =>
          <div key={index} className="comments">
             <p>{comment.text}</p>  <h5>Yours truly, {comment.name}</h5> 
          </div>
        )}

        {localStorage.getItem('name') &&
          <form className="cominput" onSubmit={(e) => this.postComment(e, this.state.commentData)}>
            <input

              type="text"
              name="text"
              value={this.state.commentData.text}
              onChange={e => this.handleChange(e)}
            />
            <button >Tell us your thoughts..</button>
          </form>
        }

      </div>


    )

  }

}

export default withRouter(SingleSpot);<file_sep>import axios from 'axios';

const api = axios.create({
  baseURL: "https://immense-forest-21610.herokuapp.com/"
})

export const loginUser = async (loginData) => {
  const resp = await api.post('/auth/login', loginData);
  console.log(resp.data.user.id);
  api.defaults.headers.common.authorization = `Bearer ${resp.data.auth_token}`;
  localStorage.setItem('authToken', resp.data.auth_token);
  localStorage.setItem('name', resp.data.user.name);
  localStorage.setItem('email', resp.data.user.email);
  localStorage.setItem('id', resp.data.user.id)
  console.log(resp.data.user.id)
  return resp.data.user;
}


export const registerUser = async (registerData) => {
  try {
    const resp = await api.post('/signup', registerData);
    api.defaults.headers.common.authorization = `Bearer ${resp.data.auth_token}`;
    localStorage.setItem('authToken', resp.data.auth_token);
    localStorage.setItem('name', resp.data.user.name);
    localStorage.setItem('email', resp.data.user.email);
    localStorage.setItem('id', resp.data.user.id)
    return resp.data.user;
  } catch (e) {
    console.log(e.response);
    if (e.response.status === 422) {
      return { errorMessage: "Email is already associated with a user, please login to continue" }
    }
  }
}

export const indexSpots = async () => {
  const resp = await api.get('/spot');
  console.log(resp)
  return resp.data
}

export const singleSpots = async (id) => {
  const resp = await api.get(`/spot/${id}`);
  console.log(resp)
  return resp.data
}

export const verifyUser = () => {
  const token = localStorage.getItem('authToken');
  if (token) {
    api.defaults.headers.common.authorization = `Bearer ${token}`;
  }
}

export const postSpot = async (spotInfo) => {
  const resp = await api.post('/spot', spotInfo)
  return resp.data
}

export const putSpot = async (id, postData) => {
  const resp = await api.put(`/spot/${id}`, postData);
  console.log(resp.data)
  const todo = { id: id, name: resp.data.data }
  console.log(todo)
  // return todo
}

export const deleteSpot = async (spotToDeleteId) => {
  await api.delete(`/spot/${spotToDeleteId}`);
}

export const commentDaSpot = async (id, comment) => {
  console.log(comment)
  const resp = await api.post(`/spot/${id}/comment`, comment)
  console.log(resp)
  return resp.data
}

export const getComments = async (id) => {
  const resp = await api.get(`/spot/${id}/comment`)
  console.log(resp)
  return resp.data
}

export const brooklynSpots = async () => {
  const resp = await api.get('/brooklyn');
  console.log(resp)
  return resp.data
}


export const manSpots = async () => {
  const resp = await api.get('/manhattan');
  console.log(resp)
  return resp.data
}

export const queenSpots = async () => {
  const resp = await api.get("/queens")
  console.log(resp)
  return resp.data
}

export const bxSpots = async () => {
  const resp = await api.get("/bronx")
  console.log(resp)
  return resp.data
}

export const statSpots = async () => {
  const resp = await api.get("/staten")
  return resp.data
}<file_sep>Rails.application.routes.draw do
  # For details on the DSL available within this file, see https://guides.rubyonrails.org/routing.html
  post 'auth/login', to: 'authentication#authenticate'
  post 'signup', to: 'user#create'
  get 'manhattan', to: 'spot#manhattan'
  get 'brooklyn', to: 'spot#brooklyn'
  get 'queens', to: 'spot#queens'
  get 'bronx', to: 'spot#bronx'
  get 'staten', to: 'spot#staten'

  resources :user

  resources :spot do
    resources :comment
  end
end
<file_sep>class SpotController < ApplicationController
  before_action :set_spot, only: [:show, :update, :destroy]

  def index 
    #@spots = current_user.spots
    @spots = Spot.all
    json_response(@spots)
  end
  
  def create
    @spot = current_user.spots.create!(spot_params)
    json_response(@spot, :created)
  end

  def manhattan
    @spotM = Spot.where( boro: "manhattan")
    json_response(@spotM)
  end

  def queens
    @spotQ = Spot.where( boro: "queens")
    json_response(@spotQ)
  end

  def brooklyn
    @spotB = Spot.where( boro: "brooklyn")
    json_response(@spotB)
  end

  def bronx
    @spotBx = Spot.where( boro: "bronx")
    json_response(@spotBx)
  end

  def staten
    @spotStat = Spot.where( boro: "staten island")
    json_response(@spotStat)
  end



  def show
  json_response(@spot)
  end
  
  def update 
    @spot.update(spot_params)
    json_response(status: 'Updated!', message: 'Updated!')
  end
  
  def destroy
    @spot.destroy
    json_response(status: 'Deleted!', message: 'Deaded!')
  end
  
  private
  
  def spot_params
    params.permit(:name, :address, :boro, :trains, :obstacles, :rating, :bust_factor, :description, :noteworthy, :photo_main, :photo2, :photo3, :phto4, :photo5)
  end
  
  def set_spot
    @spot = Spot.find(params[:id])
  
  end
end
<file_sep>import React, { Component } from 'react';
import { Link, Route, withRouter } from "react-router-dom"
import './App.css';
import Header from "./components/header"
import Login from "./components/Login"
import { loginUser, verifyUser, registerUser, indexSpots } from './services/apiHelper';
import AllSpots from "./components/spotsContainer"
import Register from "./components/register"
import MakeSpot from "./components/makeSpot"
import SingleSpot from "./components/singleSpot"
import SpotsContainer from "./components/spotsContainer";
import Footer from "./components/footer"
import ManSpots from "./components/manhattanSpots"
import BrookSpots from "./components/brookSpots"
import Qspots from "./components/queenSpot"
import BronxSpots from "./components/bronxSpots"
import StatenSpots from "./components/statenSpots"
import { thisTypeAnnotation } from '@babel/types';


class App extends Component {
  constructor(props) {
    super(props);

    this.state = {
      name: "",
      email: "",
      password: "",
      currentUser: null,
      errorText: "",
      spots: []
    }
  }

  handleLogin = async (e, loginData) => {
    e.preventDefault();
    const currentUser = await loginUser(loginData)
    this.setState({ currentUser });
    localStorage.getItem('name') 
    const resp = indexSpots();
    this.setState({
      spots: resp
    })
    // indexSpots();
    this.props.history.push("/spot")

  }

  componentDidMount() {
    verifyUser();
    if (localStorage.getItem('authToken')) {
      const name = localStorage.getItem('name');
      const email = localStorage.getItem('email');
      const id = localStorage.getItem('id')
      console.log(id)
      const user = { name, email, id };
      user && this.setState({
        currentUser: user
      })
    }
    const elmt = document.querySelector("#show");
    elmt.scrollIntoView();
    const resp = indexSpots();
    this.setState({
      spots: resp
    })

    

  }

  handleLogout = () => {
    this.setState({
      currentUser: null
    })
    localStorage.removeItem('authToken');
    localStorage.removeItem('name');
    localStorage.removeItem('email')
    localStorage.removeItem('id');
  }

  handleRegister = async (e, registerData) => {
    e.preventDefault();
    const currentUser = await registerUser(registerData);
    if (!currentUser.errorMessage) {
      this.setState({ currentUser });

    } else {
      this.setState({ errorText: currentUser.errorMessage })
    }
    this.props.history.push("/spot");
  }


  render() {
    console.log(this.state.currentUser)
    return (
      <div className="App">

        <Header handleLogin={this.handleLogin} handleLogout={this.handleLogout} />
        {/* <Login handleLogin={this.handleLogin} handleLogout={this.handleLogout} /> */}

        <div id="show" className="pic">
          <br />
          {this.state.currentUser &&
            <h1 className="intro">Sup {this.state.currentUser.name} ?</h1>}
        </div>
        
        <nav className="navbar">
          <Link className="golden hov" to="/spot">See All Spots</Link>
          <Link className="golden hov" to="/signup">Register</Link>
          <Link className="golden hov" to="/spot/new">Make a Spot</Link>
          <div className="dropdown">
            <a className="golden">Spots by Boro</a>
            <div className="dropdownmenu">
          <Link className="golden" to="/manhattan">Manhattan Spots</Link>
          <Link className="golden" to="/brooklyn">Brooklyn Spots</Link>
          <Link className="golden" to="/queens">Queens Spots</Link>
          <Link className="golden" to="/bronx">Bronx Spots</Link>
          <Link className="golden" to="/staten">Staten Island Spots</Link>
          </div>
          </div>

        </nav>
        <Route  exact path="/spot/new" render={() => <MakeSpot />} />
        <Route exact path="/spot" render={() => <SpotsContainer />} />
        <Route path="/signup" render={() => <Register handleRegister={this.handleRegister} />} />
        <Route exact path path="/spot/:id" render={(props) => (
          <SingleSpot spotId={props.match.params.id} user={this.state.currentUser} />
        )} />
        <Route exact path="/manhattan" render={() => <ManSpots />} />
        <Route path="/brooklyn" render={() => <BrookSpots />} />
        <Route path="/queens" render={() => <Qspots />} />
        <Route path="/bronx" render={() => <BronxSpots />} />
        <Route path="/staten" render={() => <StatenSpots />} />

        <Footer />

      </div>
    );
  }
}

export default withRouter(App);
<file_sep>Title: Skate Spot Finder

Overview: An application that allows users to pinpoint skate spots on a map. The spots are user sourced and will require an address/description, as well as other information, such as obstacles to skate, if you will get kicked out, and a place to list tricks done/maybe links to the tricks. Users can comment on skate spots so that other users can see whether or not the information provided by initial user is accurate, etc. This app I plan on being NYC centric so the locations will be divided up by boro/train stop.


Features: - Create User/Log in
          - Only registered users may upload spots/comment
          - Users can click on individual spots for more information on them
          - Users can comment on spots
          - Spots may be updated by user incase they are no longer vialbe to skate, or the recently become a place you get kicked out of
          - Ideally would like to implement a rating system


Goals: My goal is to have full functionality on this website for the map aspect. 

Challenges: I think the biggest hurdle for me is going to be implementing the map system to actually update when users makes new spots. I am at the moment totally unsure of how to work this into my project easily.


MVP: Create/Log in for users. Post Skate Spots. Post Comments. 


Client: Mid-fi wireframes, component heirarchy, component breakdown, and timeframe estimates.^^

![homepage](./homepage.png)
![singespot](./singlespot.png)
![singleuser](./singleuser.png)
![map](./map.png)
![erd](./erd.png)

components
- header/nav - 30 mins
- map - i have no idea - SO LONG
- single-spot - two hours
- single user - one hour
- spots designated by borough
- all spots - three hours for carousel 
- log in/register - two hours
- footer - 30 mins

CSS - A TON OF TIME

Server: 
Dependencies: React, Link/router, GoogleMapReact
Post-MVP: I would like to implement a feature for users to mark themsevles as "skating here" to let their friends know where they are skating that day, also would like to turn it into an actual social network site in this way. Where people can interact with each other. Also would like to implement a feature that has non skate spots to check out nearby. Mainly just like where to get food in the area or a good bar to stop for a drink.# SkateSpots
<file_sep>class Spot < ApplicationRecord
  belongs_to :user
  has_many :comments
  validates_presence_of :name, :address, :boro, :trains
end
<file_sep>class CreateSpots < ActiveRecord::Migration[6.0]
  def change
    create_table :spots do |t|
      t.string :name
      t.string :address
      t.string :boro
      t.string :trains
      t.string :obstacles
      t.integer :rating
      t.text :description
      t.text :directions
      t.string :bust_factor
      t.text :noteworthy
      t.string :photo_main
      t.string :photo2
      t.string :photo3
      t.string :phto4
      t.string :photo5
      t.references :user, null: false, foreign_key: true

      t.timestamps
    end
  end
end
<file_sep>import React, { Component } from "react"

class Register extends Component {
  constructor(props) {
    super(props)

    this.state = {
      name: "",
      location: "",
      description: "",
      favorite_spot: "",
      current_skate: "",
      best_vids: "",
      photo: "",
      email: ""
    }
  }

  componentDidMount = () => {
    const elmt = document.querySelector("#reg");
    elmt.scrollIntoView();
  }

  handleChange = (e) => {
    const { name, value } = e.target;
    this.setState({ [name]: value })
  }


  render() {
    return (
      <div className="skatingback">

        <form id="reg" className="register" onSubmit={(e) => this.props.handleRegister(e, this.state)}>
          <h2>Sign da fuck up!</h2>
          <label htmlFor="name"> Name (required)</label>
          <input
            type="text"
            name="name"
            value={this.state.name}
            onChange={this.handleChange}
          />
          <label htmlFor="email">E-mail (required)</label>
          <input
            type="text"
            name="email"
            value={this.state.email}
            onChange={this.handleChange}
          />
          <label htmlFor="password">Password (required)</label>
          <input
            type="password"
            name="password"
            value={this.state.password}
            onChange={this.handleChange}
          />

          <label htmlFor="location">Location</label>
          <input
            type="text"
            name="location"
            value={this.state.location}
            onChange={this.handleChange}
          />
          <label htmlFor="description">About yoself...</label>
          <input
            type="text"
            name="description"
            value={this.state.description}
            onChange={this.handleChange}
          />
          <label htmlFor="current_skate">Skating?</label>
          <input
            type="text"
            name="current_skate"
            value={this.state.current_skate}
            onChange={this.handleChange}
          />

          <label htmlFor="best_vids">Name your favorite skate videos..</label>
          <input
            type="text"
            name="best_vids"
            value={this.state.best_vids}
            onChange={this.handleChange}
          />
          <label htmlFor="photo">Upload a picture! Has to be an image address unfortunetly..</label>
          <input
            type="text"
            name="photo"
            value={this.state.photo}
            onChange={this.handleChange}
          />

          <button className="submitbutt">Submit!</button>
        </form>




      </div>
    )
  }


}

export default Register;<file_sep>import React, { Component } from "react"
import { postSpot } from "../services/apiHelper";
import { withRouter } from "react-router-dom"

class MakeSpot extends Component {
  constructor(props) {
    super(props);


    this.state = {
      name: "",
      address: "",
      boro: "",
      obstacles: "",
      rating: "",
      description: "",
      directions: "",
      bust_factor: "",
      noteworthy: "",
      photo_main: "",
      photo2: "",
      photo3: "",
      phto4: "",
      photo5: "",
      spots: []
    }
  }

  handleChange = (e) => {
    const { name, value } = e.target
    this.setState({ [name]: value })
}

  createSpot = async (e, spotInfo) => {
    e.preventDefault();
    const newSpot = await postSpot(spotInfo)
   
    return newSpot
    
    
  }


  render() {
   
    return(
      <div className="makeform">

        <form className="register" id="theseguys" onSubmit={(e) => this.createSpot(e, this.state)}>
          <h2>Add a spot</h2>
          <label htmlFor="name">Name (required)</label>
          <input
            type="text"
            name="name"
            value={this.state.name}
            onChange={this.handleChange}
          />
          <label htmlFor="address">address (required)</label>
          <input
            type="text"
            name="address"
            value={this.state.address}
            onChange={this.handleChange}
          />

          <label htmlFor="boro">Which boro?(required) </label>
          <input
            type="text"
            name="boro"
            value={this.state.boro.toLowerCase()}
            onChange={this.handleChange}
          />

      <label htmlFor="trains">Closest Train? (required)</label>
          <input
            type="text"
            name="trains"
            value={this.state.trains}
            onChange={this.handleChange}
          />

         <label htmlFor="obstacles">What's there to skate?</label>

          <input
                type="text"
                name="obstacles"
                value={this.state.obstacles}
                placeholder="Stuffs to skate..."
                onChange={e => this.handleChange(e)}
          />
          
          <label htmlFor="description">Spot Inforomation/Description</label>

              <input
                type="text"
                name="description"
                value={this.state.description}
                placeholder="Spot description"
                onChange={e => this.handleChange(e)}
          />
          
          <label htmlFor="noteworthy">Noteworthy tricks that have been done there?</label>

              <input
                type="text"
                name="noteworthy"
                value={this.state.noteworthy}
                placeholder="Noteworthy"
                onChange={e => this.handleChange(e)}
          />
          
          <label htmlFor="photo_main">Upload main photo here</label>

              <input
                type="text"
                name="photo_main"
                value={this.state.photo_main}
                placeholder="Main Photo"
                onChange={e => this.handleChange(e)}
          />

<label htmlFor="photo2">Upload 2nd Photo</label>
           <input
                type="text"
                name="photo2"
                value={this.state.photo2}
                placeholder="Photo2"
                onChange={e => this.handleChange(e)}
          />
          
          <label htmlFor="photo3">Upload 3rd Photo</label>

          <input
                type="text"
                name="photo3"
                value={this.state.photo3}
                placeholder="Photo3"
                onChange={e => this.handleChange(e)}
          />

<label htmlFor="phto4">Upload 4th photo here</label>
          
          <input
                type="text"
                name="phto4"
                value={this.state.phto4}
                placeholder="Photo 4"
                onChange={e => this.handleChange(e)}
          />
          <label htmlFor="photo5">Upload 5th photo here</label>
          
          <input
                type="text"
                name="photo5"
                value={this.state.photo5}
                placeholder="Photo5"
                onChange={e => this.handleChange(e)}
              />

          
          <button>Share thine knowledge with the world</button>



          </form>
    </div>
  )
}

}

export default withRouter(MakeSpot);<file_sep>class CommentController < ApplicationController
  before_action :set_spot
  before_action :set_spot_comment, only: [:show, :update, :destroy]

  # GET /spot/:todo_id/items
  def index
    json_response(@spot.comments)
  end

  # GET /todos/:todo_id/items/:id
  def show
    json_response(@comment)
  end

  # POST /spot/:spot_id/comment
  def create
    puts comment_params
    @spot = current_user.comments.create!(comment_params)
    json_response(@spot, :created)
  end

  # PUT /todos/:todo_id/items/:id
  def update
    @comment.update(comment_params)
    json_response(status: 'SUCCESS', message: 'Did you regret what you said? Or make a bad typo')
  end

  # DELETE /todos/:todo_id/items/:id
  def destroy
    @comment.destroy
    json_response(status: 'SUCCESS', message: 'Should have stood your ground')
  end

  private

  def comment_params
    params.permit(:text, :spot_id, :name)
  end

  def set_spot
    @spot = Spot.find(params[:spot_id])
    puts @spot.name
  end

  def set_spot_comment
    @comment = @spot.comments.find_by!(id: params[:id]) if @spot
  end

end
<file_sep>class UserController < ApplicationController
  skip_before_action :authorize_request, only: :create

  def create
    user = User.create!(user_params)
    auth_token = AuthenticateUser.new(user.email, params[:password]).call
    response = { message: Message.account_created, auth_token: auth_token, user: user_params }
    json_response(response, :created)
  end

  def login 
    @user = User.find_by_email(params[:email])
    if @user.authenticate(params[:password])
      token = endcode(id: @user.id, name: @user.name)
      response = {auth_token: token, message: "fuck ruby", user: @user}
      json_response(response)
    else 
      response = {message: "Unauthorized!"}
      json_response(response)
    end
  end


  def index
    @users = User.all
    json_response(@users)
  end

  

def show
  @user = User.find(params[:id])
  json_response(@user)
end


  private

  def user_params
    params.permit(
        :name,
        :email,
        :password,
        :description,
        :favorite_spot,
        :current_skate,
        :best_vids,
        :photo

    )
  end

  

end
<file_sep>import React, { Component } from "react"
import { Link } from 'react-router-dom';

class AllSpots extends Component {
  constructor(props) {
    super(props);

    this.state = {
      spots: []
    }
  }

  componentDidMount = () => {
    const elmt = document.querySelector("#show");
    elmt.scrollIntoView();
  }

  render() {
    console.log(this.props);
    return (

      
          < div id="show" className="showcase" >
          { localStorage.getItem('name') &&
            this.props.spots.map((spot, index) => (
              <div key={index} className="indyshowcase">
                <Link to={`/spot/${spot.id}`}>
                  {(spot.photo_main) ?
                    <img src={spot.photo_main} />
                    :
                    <img className="altpic" src="https://lh3.googleusercontent.com/proxy/M10GxwnqpB1UaZh5iNCYjYcVDKJTMvq5vpViOprua-yNqEyITuC9gleIte7kcYMr-0XZgAoi5btdg21Jb4r4cZKiuhi5pnR2gbHp_C3mYpAncrjd4j8sq53qtiXF9TL5zQ97K-RIrZDJhO9q30OtP0gT" />
                  }
                  <div className="skate">
                    <h2 className="goaway">{spot.name}</h2>

                    <h4 className="goaway">{spot.address}</h4>
                    <h4 className="goaway goaway2">{spot.boro}</h4>
                  </div>
                </Link>

              </div>

            ))
          }
      </div>
    )
  }

}

export default AllSpots;


<file_sep>import React from "react"
import  Login  from "./Login"
import { checkPropTypes } from "prop-types"


function Header(props) {

  

  return (
    <div className="header" >
      <div className="loginmobile">
      <h1 className="head">spotted.</h1>
      
      <Login handleLogin={props.handleLogin} handleLogout={props.handleLogout}  />
      </div>
    </div>
  )
}

export default Header;<file_sep>class Comment < ApplicationRecord
  belongs_to :user
  belongs_to :spot
  validates_presence_of :text
end
<file_sep>import React, { Component } from "react"
import { Link, Route } from "react-router-dom"
import { statSpots, verifyUser} from "../services/apiHelper"

class StatenSpots extends Component {
  constructor(props) {
    super(props);

    this.state = {
      statenSpots: []
    }
  }

  readStatenSpots = async () => {
    const statenSpots = await statSpots();
    console.log(statenSpots)
    this.setState({ statenSpots })
  }

  componentDidMount = async () => {
    verifyUser();
    this.readStatenSpots();
  }


  render() {
    console.log(this.state);
    return (
      <div className="showcase">
        {this.state.statenSpots.map((spot, index) => (
          <div key={index} className="indyshowcase">
            <Link to={`/spot/${spot.id}`}>
              {(spot.photo_main) ?
                <img src={spot.photo_main} />
                :
                <img className="altpic" src="https://lh3.googleusercontent.com/proxy/M10GxwnqpB1UaZh5iNCYjYcVDKJTMvq5vpViOprua-yNqEyITuC9gleIte7kcYMr-0XZgAoi5btdg21Jb4r4cZKiuhi5pnR2gbHp_C3mYpAncrjd4j8sq53qtiXF9TL5zQ97K-RIrZDJhO9q30OtP0gT" />
              }
              <div className="skate">
                <h2 className="goaway">{spot.name}</h2>

                <h4 className="goaway">{spot.address}</h4>
                <h4 className="goaway">{spot.boro}</h4>
              </div>
            </Link>

          </div>

        ))}
      </div>
    )
  }

}

export default StatenSpots;