this is my app.py file

!/usr/bin/env python3

import os BASE_DIR = os.path.abspath(os.path.dirname(file)) DATABASE = os.environ.get("DB_URI", f"sqlite:///{os.path.join(BASE_DIR, 'instance/app.db')}")

from flask import Flask, request from flask_migrate import Migrate

from models import db, Activity, Signup, Camper

app = Flask(name) app.config['SQLALCHEMY_DATABASE_URI'] = DATABASE app.config['SQLALCHEMY_TRACK_MODIFICATIONS'] = False app.json.compact = False

migrate = Migrate(app, db)

db.init_app(app)

@app.route('/') def home(): return ''

@app.route('/campers', methods=['GET', 'POST']) def campers(): if request.method == 'GET': return [camper.to_dict(rules=('-activities', '-signups')) for camper in Camper.query.all()] elif request.method == 'POST': fields = request.get_json() try: camper = Camper( name=fields.get('name'), age=fields.get('age') ) db.session.add(camper) db.session.commit() return camper.to_dict() except ValueError: return {'error': '400: Validation error'}, 400

@app.route('/campers/', methods=['GET']) def camper_by_id(id): camper = Camper.query.filter(Camper.id == id).one_or_none() if camper: return camper.to_dict() return {'error': '404: Camper not found'}, 404

@app.route('/activities', methods=['GET']) def activities(): return [activity.to_dict(rules=('-campers', '-signups')) for activity in Activity.query.all()]

@app.route('/activities/', methods=['DELETE']) def activity_by_id(id): activity = Activity.query.filter(Activity.id == id).one_or_none() if activity: db.session.delete(activity) db.session.commit() return {}, 204 return {'error': '404: Activity not found'}, 404

@app.route('/signups', methods=['POST']) def signups(): fields = request.get_json() try: signup = Signup( time=fields.get('time'), camper_id=fields.get('camper_id'), activity_id=fields.get('activity_id') ) db.session.add(signup) db.session.commit() return signup.to_dict() except ValueError: return {'error': '400: Validation error'}, 400

if name == 'main': app.run(port=5555, debug=True)

// my models.py file

from flask_sqlalchemy import SQLAlchemy from sqlalchemy import MetaData from sqlalchemy.orm import validates from sqlalchemy.ext.associationproxy import association_proxy from sqlalchemy_serializer import SerializerMixin

convention = { "ix": "ix_%(column_0_label)s", "uq": "uq_%(table_name)s_%(column_0_name)s", "ck": "ck_%(table_name)s_%(constraint_name)s", "fk": "fk_%(table_name)s_%(column_0_name)s_%(referred_table_name)s", "pk": "pk_%(table_name)s" }

metadata = MetaData(naming_convention=convention)

db = SQLAlchemy(metadata=metadata)

class Activity(db.Model, SerializerMixin): tablename = 'activities'serialize_rules = ('-campers.activities', '-signups.activity') id = db.Column(db.Integer, primary_key=True) name = db.Column(db.String) difficulty = db.Column(db.Integer) signups = db.relationship('Signup', backref='activity') campers = association_proxy('signups', 'camper', creator=lambda cmp: Signup(camper=cmp))

class Signup(db.Model, SerializerMixin): tablename = 'signups'serialize_rules = ('-activity.signups', '-camper.signups') id = db.Column(db.Integer, primary_key=True) time= db.Column(db.Integer) camper_id = db.Column(db.Integer, db.ForeignKey('campers.id')) activity_id = db.Column(db.Integer, db.ForeignKey('activities.id')) @validates('time') def validate_time(self, key, time): if 0 <= time <= 23: return time raise ValueError('Time must be integer between 0 and 23.')

Forms in react don't have to be so tricky...

Here is a snippet from a code challenge I took in my software engineering bootcamp:

import React, { useState } from "react";

function NewPostForm({onPostSubmit}) {

const [title, setTitle] = useState("")

const [author, setAuthor] = useState("")

const [blog, setBlog] = useState("")

function handleSubmit(e){

e.preventDefault()

const newPost = {

title: title,

author: author,

article: blog,

isRead: false,

}

fetch("http://localhost:3000/blogs", {

method: 'POST',

headers: {

"content-type" : "Application/json",

},

body: JSON.stringify(newPost),

})

.then(response => response.json())

.then(data => onPostSubmit(data))

}

return (

<div className="form">

<form onSubmit={handleSubmit}>

<input

onChange={(e) => setTitle(e.target.value)}

type="text"

placeholder="Title"

value={title}></input>

<input

onChange={(e) => setAuthor(e.target.value)}

type="text"

placeholder="Author"

value={author}></input>

<textarea

onChange={(e) => setBlog(e.target.value)}

rows="10"

cols="60"

placeholder="Write your post"

value={blog}></textarea>

<input

className="submit-button"

style={{ paddingBottom: "25px" }}

type="submit"

></input>

</form>

</div>

);

}

export default NewPostForm;

A few things to note:

the newPost represents a the blueprints of a new post object that we will be posting to our db.json file via the post request. we need to represent each piece of information from the newPost in the corresponding input field that exists in the form. title should take an input of the title of the blog post, author should represent the author field, and so on. (the only reason isRead is not in the form is because that information is determined later, once the post already exists and the user decides to mark it as read. otherwise, logically you wouldn't see that field take input in the form because when you write a blog, you don't know who has read it yet. HOWEVER, this key/value pair still needs to exist in the newPost blueprints, because you need to leave room for that functionality)...this also means we need to add a value property to each field and reference it with the corresponding information. ex.

first make sure you create the event handler.

you will need a "handle submit event" function to call on to attach to your form:

<form onSubmit={handleSubmit}>

in that handle submit, you prevent the default, you create the blueprints for a newPost, and you write your post request. then you return the form. the form has multiple inputs for multiple fields of information:

<input

onChange={(e) => setAuthor(e.target.value)} ** with the useStates we created at the top, we effectively are saying here, on change (on the condition of user input) set the information for author to be what is inputted here

type="text"

placeholder="Author"

value={author}></input> *** reference the specific value based on the newPost object key "author"

and then you do this for each input.

the onPostSubmit function we pass in at the very top in the component, we will need to reference that function. usually after we write our original fetch/GET request, which is likely in another file:

function onPostSubmit(newPost){

setPosts([...posts, newPost])

}

this function exists in my header.js where i made my original fetch/get request. it tells the app to take the newPost you created in the newPostForm component with your post request, and tack it onto the end of your original set of posts

const url = "http://localhost:3000/" fetch(URL)

.then(response => response.json()).

featuredObject = {}

*your FETCH will go here, and your function to render the data as well*

now you need to write that same function below and write out that function and explain what it is doing for you to even call it above, obviously. but you also want to make another function after it to handle the task of filling the data you need. the first function you need to think about will be to fill in the details you need, and the next will be to render the data, and you can include your forEach in that particular function. i recommend just writing out the first function to fill the details after you write you render your data function to keep it cleaner. do it like so:

data will refer to the plural version/all of the objects, dataObject will refer to each object

1. --- > function to render data:

function renderData(data){

fillDetails(dataObject = data[0])    <---- this will make sure the first index item appears when loading, and fillDetails will be the function you are calling (but writing after due to your ability to hoist functions)

data.forEach((dataObject) => {       

create your elements here, add event listeners if needed, like so:

       element.addEventListener('click', () => {            

fillDetails(dataObject)            

featuredObject = dataObject        });    

});

};

2. ---> function to fill details:

function fillDetails(datObject) {            

fill in your details and call them above

how to add an input to an existing quantity, such as adding a number you type in to a cart, :

form.addEventListener('submit', (e) => {    

e.preventDefault()    

// set your new input to a variable to make it easier like so...

let input = parseInt(e.target["userInput"].value)    

let newTotal = input + ITEM.existing*Quantity  

in your submit, target the input values as follows. here’s a formula:

form.addEventListener(”submit”, (e) => {

e.preventDefault() 

let newObject = {        

"OBJECT KEY WRITTEN JUST AS YOUR DATA" : e.target["userInput"].value,        

"OBJECT KEY" : e.target["userInput"].value,        

et.,

};    ***renderSAMEFUNCTIONFROMFETCH/FOR EACH***([newObject])