- Server
- ✔️ Set Up Middlewares
- ✔️
express.static
- ✔️
express.json
- ✔️
cookie.session
- ✔️
csurf will be set up later
- ✔️
- ✔️ Set up redirects to /welcome when user is logged out
- ✔️ Create database & create db.js for queries
- ✔️
POST /registration
- ✔️ Can mostly be copied from petition
- ✔️ However no redirects or renderings. Communication of success/failure done with either json or status codes
- ✔️ Set Up Middlewares
- Client
start.js
- ✔️ delete
HelloWorld
- ✔️ add logic to determine what to pass to
ReactDOM.render
- ✔️ if url is
/welcome
, renderWelcome
component. - ✔️ if not, render small
Logo
- ✔️ if url is
- ✔️
Welcome
component- ✔️ Can be a function component
- Spits o ut a welcome message, a big
Logo
- ✔️
Registration
component- ✔️ uses state - should be a class
- ✔️ renders
- ✔️ four input fields
- ✔️ one button
- ✔️ error message conditionally based on
this.state.error
- ✔️ event handlers
- ✔️ four form fields
- ✔️ Puts form values into state
- ✔️ click handler for button
- ✔️ makes
POST
request and submits the values of the form fields - ✔️ on failure, sets state to show error message
- ✔️ on success, redirects to
/
to show smallLogo
- ✔️ makes
- ✔️ four form fields
- Varia
- find logo
- ✔️ add css to
index.html
- ✔️ delete
-
Reset Password
- accessible through a Link rendered by
Login
- component of 3rd route in
HashRouter
- Displays
- form field with email input & button to advance to next step
- button makes
POST
request - confirm that ther is a user with that email
- generate secret code & store in db for later
- put code into an email message and send it to the user
- button makes
- Upon success rerender
ResetPassword
with new form containing 2 inputs one for code & one for new Password.- on submit -
POST
request w/ email, code and new password - find stored code for given email
- confirm that the code matches the stored one in db.
- hash password & replace the old one with it.
- on submit -
- Upon success rerender
ResetPassword
to show a link to the login page.
- form field with email input & button to advance to next step
- accessible through a Link rendered by
-
Creating secret code
const cryptoRandomString = require('crypto-random-string'); const secretCode = cryptoRandomString({ length: 6 });
-
Storing the Code
-
App
- ✔️ Main container component for the entire logged in experience It is the keeper of information about the logged in user.
- ✔️ It fetches this info when it mounts and keeps user info in its state
- ✔️ Renders a
Logo
,ProfilePic
andUploader
- Passes functions to
ProfilePic
andUploader
for making changes to its state - ✔️ MUST be a
class
since it needs both state and lifecycle methods
-
✔️ ProfilePic
- ✔️ Its job is to display a profile pic (can use first and last name for the
alt
tag of the image) - ✔️ Is passed down props that tell it the first and last name of the urser and the url of the image.
- ✔️ Is also passed down a prop that is a function that it must call when the image is clicked. When user clicks the pic, the uploader needs to become visible.
- ✔️ props --
toggleUploader
,name
,url
- ✔️ props --
- ✔️ Can be a
function
or aclass
.
- ✔️ Its job is to display a profile pic (can use first and last name for the
-
Uploader
- ✔️ needs to be a
class
based component as it will have state - ✔️ you need to conditionally render
Uploader
. It starts off as hidden but when you click on theprofilePic
, you will make it visible. The conditional rendering ofUploader
depends on the current state. Make it look like a modal. - ✔️ When visible, it needs to render a file input to make image upload possible
- ✔️ handles the change event on the file input and uploads the selected file
- ✔️ when the upload is done, you should know the url of the uploaded file and you must pass the url to a function in App for image upload, refer to what you did in IB. (formData, multer, s3, etc)
- ✔️ The function we pass the url to will update the state in APP when there is a new image and will also close the modal afterwards.
- ✔️ Maybe
Uploader
has a button or x for closing. This too must call a function that was passed down as a prop to make theUploader
disappear. - ✔️ You'll need to add a new column to your user's table for teh imageUrl - make it text
- ✔️ Make sure you do an UPDATE for the image in the users table rather than an insert
- ✔️ needs to be a
-
✔️ Profile
- ✔️ Child of app
- ✔️ Function or class component
- ✔️ Receives many props from App
- ✔️ Renders users' name,
- ✔️ larger Profile Pic
- ✔️ Bio
-
✔️ BioEditor
- ✔️ Child of Profile
- ✔️ Class component
- ✔️ Keeps bioDraft (unsaved user input) in own state
- ✔️ needs change handler
- ✔️ Determines which ui to display based on bio prop passed
- ✔️ No Bio (prop from profile is undefined)
- ✔️ render clickable element "Add Bio"
- ✔️ No text area visible
- ✔️ User has bio
- ✔️ render bio with clickable element "Edit Bio"
- ✔️ Display text area
- ✔️ No Bio (prop from profile is undefined)
- ✔️ Updating bio on submit
- ✔️ method called
setBio
- takesnewBio
as argument and stores inApp
state - ✔️
setBio
needs tp be passed down fromApp
- ✔️ click handler on save button makes POST request to save bio in db.
- ✔️ send
newBio
as part of the request (no fromData) - ✔️ on success call
setBio
and pass it the newly set bio. - ✔️ when function is called, the new bio will flow back down to
BioEditor
fromApp
- ✔️ send
- ✔️ method called
-
✔️ Server
- ✔️ add
bio
column to users table - ✔️ create new
POST
route for updating the bio column in db - ✔️ Return stored bio back to
App
- ✔️ add
-
OtherProfile
- Shows profile of other users
- not editable (profilePic, bio, etc...)
- on mount, kames ajax call to get profile data.
- data is set to state to be displayed
-
BrowserRouter
- New Table in DB
-
CREATE TABLE friendships( id SERIAL PRIMARY KEY, sender_id INT REFERENCES users(id) NOT NULL, recipient_id INT REFERENCES users(id) NOT NULL, accepted BOOLEAN DEFAULT false);
-
- Server Routes
- dynamic
GET
route that gets the friendship status between viewer oder viewee (cookie id, userr pofile)- gets initial status between logged user and profile id of page
- dynamic