Having Trouble Updating

[Sphilippe7]

I cannot edit my photo name and category. When I click the edit button I get a "Put" request. Also, I'm not sure how I should have the form to change the attributes. I do not think I can do it the same way I did for listr-list for my photos.

[raq929]

Yeah, ember likes to do put requests. You can tell your backend to accept them.

I'm not sure what you mean when you say you're not sure how you should have the form change the attributes.

[raq929]

Also, please post the relevant code.

[Sphilippe7]

@raq929 Ok so my component is this:

import Ember from 'ember';

export default Ember.Component.extend({
  newPhoto: {
    url: null,
    name: null,
    category: null
  },
  actions: {

    deletePhoto(photo) {
      console.log('photo is photo', photo);
      this.sendAction('deletePhoto', this.get('photo'));
    },
    createPhoto(newPhoto) {
      console.log('photo is photo', newPhoto);
      this.sendAction('createPhoto', this.get('newPhoto'));
    },
    editPhoto(photo) {
      console.log('photo is photo', photo);
      this.sendAction('editPhoto', this.get('photo'));
    }
  }
});

template:

<img src='{{photo.url}}' height=150px width=200>

<button class="btn btn-xs btn-danger" {{action 'deletePhoto'}}>
  Delete
</button>

  <button class="btn btn-xs btn-info" {{action 'editPhoto'}}>
    Edit
  </button>

<form {{action 'createPhoto' on='submit'}}>
  {{input placeholder='Photo url' value=newPhoto.url}}
  {{input placeholder='name' value=newPhoto.name}}
  {{input placeholder='category' value=newPhoto.category}}
  <button class='btn btn-xs btn-success' type='submit'>Post a Photo!</button>
</form>

Now the routes:

import Ember from 'ember';

export default Ember.Route.extend({

  model() {
    return this.get('store').findAll('photo');
  },

  actions: {
    deletePhoto(photo) {
      console.log('photo is photo', photo);
      photo.destroyRecord();
    },
    createPhoto(newPhoto) {
      console.log('photo is photo', newPhoto);
      let photo = this.get('store').createRecord('photo', newPhoto);
      photo.save();
    },
    editPhoto(photo) {
      console.log('photo is photo', photo);
      photo.save();
    }
  }
});

template:

All of your art!

{{#each model as |photo|}}
  {{your-photo photo=photo
               deletePhoto='deletePhoto'
               createPhoto='createPhoto'
               editPhoto='editPhoto'}}
{{/each}}

[raq929]

Cool. That looks good to me. What happens when the PUT request is made? Did you update your rails router to deal with that?

[Sphilippe7]

Yes I put "put" in the backend. @raq929 And now this is the error:

[raq929]

OK. Can you do the PUT with a curl request? If not, it's probably a backend issue.

[Sphilippe7]

I received a "404 not found" when I looked at the back end server. But it started the 'PUT' request so I'm not sure what went wrong. @raq929 @payne-chris-r

[payne-chris-r]

Ok. Then the issue is with rails. What does a PUT to /photos/3 route to? How would you find out?

[Sphilippe7]

Ok I'm reviewing my app now

[Sphilippe7]

Still not seeing my error @raq929 @payne-chris-r

[raq929]

What does the your console say when you make the PUT request with curl?

[raq929]

Please post the curl request you're making with your answer.

[Sphilippe7]

API="http://localhost:4741"
URL_PATH="/photos"
ID=3
NAME="Stanley"
CATEGORY="Portrait"
TOKEN="BAhJIiU3ODc1OGUxNDYxNmZlMzUzZGE0YmZmNjY4Njk2YThjZgY6BkVG--ab2d13577e1fdddf1169720e67f094e99a132567"
URL="http://i.imgur.com/8G9PX6J.jpg"

curl "${API}${URL_PATH}/${ID}" \
  --include \
  --request PUT \
  --header "Authorization: Token token=${TOKEN}" \
  --header "Content-Type: application/json" \
  --data '{
    "photo": {
      "name": "'"${NAME}"'",
      "category": "'"${CATEGORY}"'",
      "url": "'"${URL}"'"
    }
  }'

[Sphilippe7]

it gives me a 404 error

[payne-chris-r]

What does the error say? Something along the lines of Cannot find route for PUT to /photos?

[raq929]

Can you post your routes file?

[Sphilippe7]

@payne-chris-r

[Sphilippe7]

# frozen_string_literal: true
Rails.application.routes.draw do
  resources :examples, except: [:new, :edit]
  post '/sign-up' => 'users#signup'
  post '/sign-in' => 'users#signin'
  delete '/sign-out/:id' => 'users#signout'
  patch '/change-password/:id' => 'users#changepw'
  resources :users, only: [:index, :show]
  get '/photos', to: 'photos#index'
  post '/photos', to: 'photos#create'
  get '/photos/:id', to: 'photos#show'
  put '/photos/:id', to: 'photos#update'
  delete '/photos/:id', to: 'photos#destroy'
end

@raq929

[raq929]

Ah. It looks like something is wrong with your photos serializer. It seems like it's going fine and then it says ActiveModel::Serializer::Null. Your serializer should not be null. Can you post it, and tell us what the file name for it is? It may be a pluralization issue.

[Sphilippe7]

My photo serializer is :

class PhotoSerializer < ActiveModel::Serializer
  attributes :id, :name, :category, :url, :user_id
end

The filename is photo_serializer.rb

[raq929]

Can you post the photos controller?

[Sphilippe7]

@raq929

class PhotosController < ProtectedController
  before_action :set_photo, only: [:show, :update, :destroy]
  def index
    @photos = Photo.all

    render json: @photos
  end

  def show
    render json: Photo.find(params[:id])
  end

  def set_photo
    @photo = current_user.photos.find(params[:id])
  end

  def photo_params
    params.require(:photo).permit(:name, :category, :url, :user_id)
  end

  def create
    photo_params = params.require(:photo)
                         .permit(:name, :category, :url)
                         .merge(user_id: current_user.id)
    @photo = Photo.new(photo_params)
    if @photo.save
      render json: @photo, status: :created
    else
      render json: @photo.errors, status: :unprocessable_entity
    end
  end

  def update
    if @photo.update(photo_params)
      head :no_content
    else
      render json: @photo.errors, status: :unprocessable_entity
    end
  end

  def destroy
    @photo.destroy

    head :no_content
  end

  private :set_photo, :photo_params
end

[Sphilippe7]

I tried to change the order in which to edit photos and I think I broke something. Now I'm getting an error that says "Uncaught Natives disabled". 👎

[gaand]

Where do you get that error?

[Sphilippe7]

the console in chrome @gaand

[Sphilippe7]

I deleted every edit-photo using the command + shift + F (command) and now it is back to normal but I'm back at the beginning with no working 'Edit' function

[Sphilippe7]

I'm wondering if I need the edit button. As of now, when you click on the option to rate Photos, none of them display a name, category or the url. So like @raq929 said to me earlier, I'm trying to edit a photo as if it has those attributes when it does not. Ember is assuming I'm making changes to the actual photo. So is it needed? Can I just have the delete button?

[raq929]

Well, you need full CRUD to meet requirements. But the edit button shouldn't do the edit there, it needs to take you to a different view, where the user can fill out an edit form.

[raq929]

What's your status here? Remember to take things one step at a time. Create your edit route. Don't add the form yet, just put some text in the template so you're sure it's displaying. Link to it using the edit button. Make sure the link works. Create your form component. Call the form component from the edit route. Make sure you can see the form. Make the model on the route.
Pass the model to the form. Make the edit action. Pass it to the form.

Etc. One thing at a time, check that each thing is working before you move on.

[Sphilippe7]

I'm going through the steps and the repo but still getting an error

[Sphilippe7]

So I followed your steps and created an update routes and an 'update-photo' component. When I wrote this in the update routes, it broke my page. When I comment out the model hook it shows what is on that page.

import Ember from 'ember';

export default Ember.Route.extend({
  model(params) {
    return this.get('store').findRecord('photo', params.photo_id);
  },
  actions: {
    editPhoto (photo) {
      console.log('photo is photo', photo);
      photo.save();
    },
  },
});

[payne-chris-r]

What is the URL that takes you to this route? Is photo_id defined? Add this line to your model hook:

model(params) {
  console.log('inside model hook, params is: ', params);
  return this.get('store'...

[Sphilippe7]

I've decided that my update shall be the rating system with the stars.