kathytbui / crate Goto Github PK

Setup and got everyone’s repo running with Postico, Postgres, Conveyor Belt
Setup our project board-- added cards for rubric, track, DTR, structure of files + data

As a user
When I visit /user/profile
I can see a button to change the next delivery date of a crate
Once I click that button
There is a popup with a calendar
Once I select a date on the calendar
And click the checkbox
The new delivery date I set is now listed

Feature:
As a user, it’s frustrating to go to my profile page and see little about myself other than my subscriptions. To give the user more control, I’d love to upload my own image, set a personal description, edit my email address and shipping address, and see a history of products that have been delivered to me and what I have kept. I should also see when my next delivery is coming and adjust the date for when I am available.

Extensions:

• As a trendsetter who values fashion, I would also like to be able to share this as a public URL (don’t have to have an account or be signed in) so that users can see my subscriptions and items that I have chosen to purchase as well. This page should include my profile picture, but keep info including my email address/shipping address, order history, and delivery times private.
• As a user, I should be able to tweet which clothes I have purchased. (actually integrate it with the Twitter API)

User story implementation in progress

LIst of all user stories:

• [ ]

• Possibly resolve with environment variables (using .env file)
• resolves the merging differences

As a user
When I visit my profile
I see a list of products that have been delivered to me
There are a total of 10 of the most recently delivered products in a 2x5 grid
Each product should have a picture and its slug
Next to each product picture and slug there should be a return button

*** Question: what is the difference between a product that has been delivered and kept?

• Individual Review
• End Huddle
• Pair FE/BE
• Whole Team Huddle

Step in the setup instructions where this issue occurred:

Modify /api/src/config/database.json for database credentials

What to do:

1. Run psql in your terminal to access the postrgres command line interface (CLI)
2. Check your available postgres users by running \du in the postgres CLI. Your available users are listed under “Role name.” - Use this user as your username in the database.json file

• Add postgre as the dialect in database.json file

1. In psql, create your database with the command CREATE DATABASE crate;

When I visit /user/profile
I can see a button to change the next delivery date of a crate
Once I click that button
There is a popup with a calendar
Once I select a date on the calendar
And click the check box
The new delivery date I set is now listed
EDIT:
Changed to drop down select menu and user can choose 2 dates (1st and 15th)

belongs to user #35
Currently, there is no relationship between user and products
We will have to build that relationship in the model
Update migrations
A userProducts query method needs to be created

Add tests for new and existing code, focusing on areas of the code that relate directly to the features in your track

Rubric requires 2 tests to score a 4, Travis requires all tests to pass to deploy.
Turing Lesson

• Actions/Reducers
  • SET_USER action
    • When users submit profile update form, set the updated information to store
  • get / PRODUCTS_GET_REQUEST
    • To show users their ordered items
• React components for re-use:
  • product/Item
• Design components for re-use:
  • Form
    • Input.js
    • Button.js
    • Grid / GridCell
  • Inputs
    • File: user upload image
    • Input type='email': update email
    • Input type='text': update address
    • Input type='date': update delivery dates
    • Textarea: for longer descriptions

Figure out the files we touch through the dataflow (what files are being "hit" at each point of the data flow)

• Demo of features that have been created
• Add tests for new and existing code, focusing on areas of the code that relate directly to the features in your track
• User story implementation in progress
• Optional extension - implement CI/CD (continuous integration and deployment) and deploy to Heroku.

As a user
When I visit my profile
I see a list of products that I have kept
There are a total of 10 of the most recently kept products in a 2x5 grid
Each product should have a picture and its slug

• README template
• PR template

#31 - User Story 2: User update information can be successful

1. userUpdate mutation (can reuse productUpdate code)

2. update type.js and add:

• shipping address - break it down into components (add 1, add 2, city, state, zip)
• email
• description

1. update model.js

• adddress & it's components as STRING
• description - TEXT
• email STRING

1. migration

• need to add shipping address components to user table and description

1. resolver.js

• need to create update function (take from product update in resolver)

1. testing

• completed && at 100%
• Some setup instructions for Jest/Supertest here

Data flow feedback:

• Figure out the files we touch through the dataflow (what files are being "hit" at each point of the data flow)
• There are 2 apps interacting with each other, there isn't exactly a correlation to rail's MVC

Wireframes:

• Wire frames are good. Just depends on how we want to move forward with it - be able to explain our choices

User Stories:

• Have a main user story that is broken down into more user stories that can be delegated out to do for each person/pair/group

#33 - User Story 4: User can select next delivery date

1. update type.js and add:

• add delivery date to user - enum 1 or 2 for 1st or 15th (reuse code from

1. update model.js

• deliveryDate datatype = Integer

1. migration

• add deliveryDate to migration (try to reuse code there)

1. params.json (in config folder)
   This is where the enum relations are made

• need to add deliveryDate to this matching the json format mappin out 1 to 1st and 2 to 15th

1. resolver.js

• reuse getType method in Product Types & call it getDeliveryDate this will be used in updateUser mutation

1. userUpdate mutation (can reuse productUpdate code)

• use getDeliveryDate to this method

Map out data flow through the app as it applies to the specific features you are working on

• As a group, have a diagram ready that shows the movement of data through the app

Map of data flow

When I visit my profile
I see a list of products that have been delivered to me
There are a total of 10 of the most recently delivered products in a 2x5 grid
Each product should have a picture and its slug
Next to each product picture and slug there should be a return button

• Set up component
• Write query/action for products
• Add functionality for keeping/returning products

#32 - User Story 3: User can upload a photo

1. userUpdate mutation (can reuse productUpdate code)

2. update type.js and add:

• image needs to be added as a field to usertype

1. update model.js

• image is STRING

1. migration

• need to add image column to user table

1. resolver.js

• need to add to update function (take from product update in resolver)

Each teammember creates a branch called:
code-annotations-firstnamelastname
More information can be found here

• Leigh
• AJ
• Jake
• Carly
• Dan
• Kathy

Code annotations are due at Monday Oct 12's Check In here

Expect end annotations to be similar.
Be useful.
Can we reuse / repurpose any code?
Write as few lines of code.
Only for track.
Annotate for both ends.
Requires lot of communication.

• Code annotations for the code specific to your track.
• Map out data flow through the app as it applies to the specific features you are working on
  One diagram for the group. Lots of collab. Digital white board makes most sense since it's a living doc.
• Create wireframes for user-facing portions of features associated with your track
  FE-driven, BE encouraged.
• Create detailed user stories and chores defining implementation details for the functionality you will add
  Break out track info into multiple, granular cards.

Belongs to #36

We need to update the products migration to include a kept column
This column will default to true - need to update the product model & type
We will need to make a userProductsKept query method

Feature:
Before adding a monthly subscription I would like to choose my style preferences to ensure that I get clothes that better match my personal style. When I visit /crates, the first time I click on + subscribe I am taken to a style preferences page /style-preferences. I am presented with a style survey that consists of a series of categories such as tops, bottoms, dresses, shoes, accessories, etc. For each category I am given several images to choose from with instructions to choose the images that best reflects my style. After I have chosen the images from each category I am given a summary of my style such as ‘classic but edgy’.

Extensions:

• When I visit my profile page, I can see a button to view my style survey. When I click on the button, I am taken to /style-prefences and can edit my style preferences to update my style at any time.

• I would like to fill out a style survey for different categories of my wardrobe i.e. work, casual, date night. For each category I am presented with the same categories of choices i.e. tops, bottoms, dresses, shoes, accessories, etc.

As a user
When I visit /user/profile
I can click the button to edit my email, shipping address, or personal description (the button looks like a pencil)
It pops up a window where I can add/edit my information
I can then click on the checkmark
Once I do my information is edited and I can see that change on my profile

State is not updating after uploading a picture, again
The branch is fix-image-2

• Discuss check-in and next steps

File Structure

• Move strategy doc elements to proj board cards
• Add labels for check ins / sprints

Made our first team rebase
Got our redux store setup w/ Dev Tools
Completed our first solo spike looking at the code
BE/FE breakout to look through the code
Visualization of current schema
General annotations of what most of the files are
Added notes to packages / installs / imports
Made notes on usability / flow of the site
Made general notes of how we would implement the desired features on our track

belongs to #36

A mutation needs to be created to allow users to return items

As a user
After I have already updated my information
And I visit /user/profile
My information is pre-filled with the information I had submitted previously

As a user
When I visit /user/profile
I can see a button to upload a photo avatar
I can click that button and browse through my local photos to upload
Once I upload a photo
My avatar is now the photo I uploaded

Every team is expected to adhere to a code freeze 24 hours prior to their scheduled evaluation time. Once the code freeze is in effect, any new code pertaining to feature development, refactoring, or other chores can no longer be merged into master. Teams should instead focus their attention on manually testing their completed features, fixing any lingering bugs related to those features and preparing for their presentation.

For your evaluation, your team is expected to come prepared with a 15 min demo walking through:

the features developed
the git workflow utilized
the process used to analyze the code base

Rubric -- Interview Readiness

• 4: Student is able to pull experiences from this project and clearly articulate challenges and lessons learned utilizing specific examples as it relates to one or more of the following areas: working with team members, agile project planning, git workflow and working through difficult technical challenges.
• 3: Student is able to clearly articulate experiences from this project in one or more of the above areas, however they are not able to reference specific and concise examples.
• 2: Student is able to pull experiences from the above areas, but does not clearly articulate challenges and lessons learned or use specific and concise examples.
• 1: Student is not able to pull experiences from this project in the above areas or does not demonstrate any meaningful reflections around challenges and lessons learned from the project.

Watch this video

• Leigh
• AJ
• Jake
• Carly
• Dan
• Kathy

Create wireframes for user-facing portions of features associated with your track

• wireframes created in miro for front end
• back end schema (how the current schema needs so change to accommodate new information needed by track features)

Wireframe

Connects issues #30, #31, #33, #34
First decision:

• Add form to Profile component
  or
• Create new component

Basic styling / state change

• When user clicks on 'edit' button, button changes to orange and renders 'save' text, and input form replaces p

• The state key is changed based on handleChange

• When user clicks 'save' button, button changes to purple and input changes back to p to reflect the value of the updated state for that key

• Connect back end

• Can reuse a ton of components for this

• Testing

  • Unit test form
  • Integration test form

• Install redux-devtools-extension (https://www.npmjs.com/package/redux-devtools-extension)
• Update imports to include composeWithDevTools
• Update compose to composeWithDevTools in setup/store.js

Terminal error:

ERROR: Please install pg package manually

Step in setup where this issue occurred:

API: Install packages and database setup (migrations and seed) cd api and npm run setup

What to do:

1. cd api
2. run npm install pg --save prior to running npm run setup
3. npm run setup

• Setup Reflection

• Setup Instructions from Crate README

• Turing Crate Setup Instructions

• kathy

• aj

• carly

• dan

• leigh

• jake

• image mutation
• profile data mutation
• user product history query

• Finish looking up code on the ends
• Come up with and questions we have for the PM
• FE meets w fellow FE groups on same track at 5-530

At 6:

• Break up into pairs - be able to speak to the general functioning behind your side of the app.
• Be able to describe generally what each file does, and what are the important ones to know. You don’t have to talk about any specific code unless you found something to be important.
• Give a walkthrough of the website, what you’ve noticed, how all the tools we downloaded are used
• Try to connect the pieces together!

When I visit my profile
I see a list of products that have been delivered to me
There are a total of 10 of the most recently delivered products in a 2x5 grid
Each product should have a picture and its slug
Next to each product picture and slug there should be a return button

Make presentation slide for evaluation

As a newly registered user
When visiting my profile page
I see several form entries to update my information
That includes:
Upload my photo
Add/edit Email
Add/edit Shipping address
Add/edit Personal description
Edit my next delivery date

10/8: Checkin #1 (Strategy Due)

Questions for PM:

1. “So, deployment is like, actually optional, right?”
   Yes-- but “very interesting”

2. “Testing -- how do we test the backend??”-
   model testing, api endpoint testing makes sure that the correct response is rendered -- happy/sad path testing?

3. Test integral track, happy paths.
   No given test suite, must research. Don’t have to backfill tests - only test what we write. Okay to use 2 diff test suites. FE Redux testing, BE GraphQL testing lessons next week.

4. Ask about work flow so far and ask if it’s optimal
   Need to refactor cards, see project board

5. Where do these uploaded images “live”? Is that up to us to figure out a package or use s3?

6. What is meant by “a version of Redux”? What sort of differences should we be looking for (beyond file structure/vocabulary) between this codebase & how we used Redux last mod/as stretch tech?

7. Setup question: in config/database.json, what if some folks don’t have postgres as a username? .ENV file for this?
   Change postgres username

Terminal error:

gyp: No Xcode or CLT version detected! gyp ERR! configure error

Step in setup where this error occurred:

Webapp: Install packages cd web and npm install

What to do:

1. Run the command xcode-select --print-path. This command should show you if you already have code installed by returning the following /Library/Developer/CommandLineTools
2. If xcode is installed on your machine, run sudo rm -r -f /Library/Developer/CommandLineTools to uninstall the tool
3. xcode-select --print-path to check that code has been uninstalled
4. xcode-select --install to reinstall. If this command does not work you will have to manually install tool.

• Use this link to install xcode

Useful resources:

• https://medium.com/flawless-app-stories/gyp-no-xcode-or-clt-version-detected-macos-catalina-anansewaa-38b536389e8d
• https://medium.com/@mrjohnkilonzi/how-to-resolve-no-xcode-or-clt-version-detected-d0cf2b10a750

Create detailed user stories and chores defining implementation details for the functionality you will add.

The breakdown below may need multiple user stories per checkpoint.

Track Breakdown
As a user:

• upload my own image
• set a personal description
• edit my email address
• shipping address
• see a history of products that have been delivered to me
• see a history of products that I have kept
• see when the next delivery is coming and adjust the date for when I am available

Draft of user stories