former title: flatiron school portfolio project 005 + bringing it all together

and…that’s a wrap. what a year and a bit it’s been. finally, i accomplished something that i’ve been thinking about doing for a long time (about 2 years?), jumped in, managing that with a full time job, life in a new country, precious life things outside of work. i had a hard time juggling everything, but i feel good about finishing the program.

coding notes along the way

How is the app organized? Here is the component hierarchy:

App
---LocationsContainer
------Locations
---------Location
------------RoutesContainer
---------------Routes
------------------Route

===================================================

What is the redux flow when an action gets initiated, for instance when you want to edit a route?

1. Route.js - reusing the LocationInput component to handleEdit function, accesses store to the actionCreator using this.props.editRoute (we have access to this.props.editRoute because it is passed down from RoutesContainer down to Routes in the store)
2. actions/routes.js - editRoute gets called, data gets passed
3. reducers/locationsReducer.js - the EDIT_ROUTE case in the reducer gets called and using the original state from the route finds the location, finds the route in the location, then updates the route values to the new values from the new state (the action.payload)

========================================

some quick notes about how to navigate around the structure of the app

rails new climbing-logbook-backend --api
	controllers
	db
	config/routes.rb

npx create-react-app climbing-logbook-frontend
Location has_many :climbs
:name - string, :coordinates - string

Route belongs_to :location
:location_id, :name - string, :grade - float, :type - string, :notes - string, :climb_date - timestamp

rails g resource Location
rails g resource Route --no-test-framework

models add relationships
models add validations
rake db:migrate
rake db:drop, delete schema
rake db:seed

rake db:drop | rake db:migrate | rake db:seed
rails c
Location.first, Location.All, Route.first

controllers /api/v1
routes.rb namespacing
controllers namespacing
rack-cors
initializers/cors.rb
routes fetch request cors accepts from a server frontend access to db

in db
Location.destroy_all
Route.destroy_all

==================================

rails c
Location.first.transactions
Route.first.location

rails g migration ChangeDefaultValuesToRoutes
rails g migration ChangeDefaultValuesToLocations 


route = Route.create
location = Location.first
location.update_climb_total(route)


see commits
rails s
npm start

http://localhost:3000/api/v1/locations/2/routes

http://localhost:3000/api/v1/routes

http://localhost:3000/api/v1/locations

will check serializer before check models to send to frontend

==================================

index.js

• store createStore
• Provider store > App store
• root

App.js

• App component
• render div and rest of components

reducers/managerestaurant.js

components/Restaurant.js

• Component, get props, state updates /RestaurantInput.js
• form events handlers, connect, mapstatetoprops mapdispatchtoprops actions/action.js
• action function switch

We are provided with 4 lifecycle methods to help us handle updates:static getDerivedStateFromProps(), shouldComponentUpdate, getSnapshotBeforeUpdate and componentDidUpdate.

These methods always get called in the same order and the render() method which renders the React component into the DOM will be called just before componentDidUpdate, so the actual order of lifecycle methods being called is:

• static getDerivedStateFromProps(props, state)`
• shouldComponentUpdate(nextProps, nextState)
• render() (can access props and state via this.props and this.state - previous props are no longer available)
• getSnapshotBeforeUpdate(prevProps, prevState)
• componentDidUpdate(prevProps, prevState, snapshot) (can still access current props and state via this.props and this.state and this is the last time previous props and state will be available).

lifecycle methods to know

• mounting - constructor, getderivedstatefrompropops, render, reactDOM, componentdidmount
• updating - getderivedstatefrompropops, shouldcomponentupdate, render, getsnapshotbeforeudpdate, reactDOM, componentdidmount
• unmounting - componentwillunmount

props vs state

• props - “props” (short for “properties”) is an object of arbitrary inputs a React component accepts as the first argument. One limit to props is that you’re not allowed to change them.
• state - “state” is data that changes over the lifetime of a specific instance of a React component.