craig5117 / critter Goto Github PK

Set up basic structure of each component

Put some styles and color on the petCard.

Users can sign up and log in.

Figure out a way to store images that a user uploads, either in the cloud or in Mongo. Cloud is probably preferable since it won't overwhelm our DB with large files.

Consider the following approaches:

• multer + AWS S3
• multer + Mongo
• Cloudinary

Here is the initial list of Mutations we are defining in typeDefs

• login
• addPet
• addPost
• addComment
• addFriend
• addProfileImage(imageUrl: String!): User

For login-addFriend, refer to the logic we used with Deep Thoughts. If you want to add or change anything, just let me know. I am definitely open to anything that would make us stand out from Deep Thoughts more.

The one that is going to be different is the addProfileImage. It is going to be an update mutation that will find a specific user and update their profile image. Use "addFriend" as a reference. It will accept imageUrl as a parameter (taking the place of friendId in the addFriend resolver). It will be using the _id from the context just like addFriend. In place of the addToSet code, we will want something like: { image: imageUrl} (I think). New should be true.

Comment Form
Comment List
Footer
Friends List
Header
Nav
Pet Card
Post Form
Post List
Profile Image
React Bootstrap Login Form for Login.js and Signup.js

Single Tail page is going to need some styling.

• Single Tail page needs to display one tail with the associated comments.
• It also needs to make use of the comment form.

Add some color and styles to the TailList.

• Configure indexed db
• Make sure download feature works properly on deploy.

We need forms to input Tails and Comments

• The "me" user data needs to populate their profile page.
• User data needs to populate other user's pages as well.

Profile page needs styling.

• Text needs some style.
• Needs some padding/margins.
• Needs some color.

• Tail form should appear on profile page
• Tails should be added to the db on submission

PET

• petSchema
• username {String, required, unique, trim}
• email {String, required, unique, match}
• password {String, required, minlength: 8}
• petType {String, required, trim}
• image {String}
• age {Number}
• sex {String, required}
• bio {string, required}
• adoptable {boolean}
• posts [{ref Post}]
• friends [{ ref Pet}]
• include a virtual for friendCount see logic at the bottom of user in Deep-Thoughts
• see the logic in Deep-Thoughts for the password encryption logic

POST

• postText {String, required, minlength 1, maxlength 10000}
• createdAt {Date, default, get}
• petUsername {String, required}
• comments [commentSchema]
• getters true

COMMENT

• commentText {String, required, maxlength 3000}
• petUsername {String, required}
• createdAt {Date, default, get}
• getters true

We need a cool logo!

• Set up JWT on back-end (auth, server.js logic)
• Set up JWT auth.js on Front-end

Below is a list of TypeDefs that we need set up on the back end. Type Query is already done, it just needs to be uncommented in typeDefs.js. Likewise, the addProfileImage mutation is already done. For the rest of them, I just left a comment to mark what we want to return with our typeDefs. You will have to add the datatype (String, Int, etc.) Refer to the models if you are unsure what datatype to use. Feel free to reach out with questions.

type PET

• _id
• username
• email
• petType
• image
• age
• sex
• bio
• humanStatus
• tails
• friends
• friendCount

type TAIL

• _id
• tailText
• createdAt
• petUsername
• comments
• commentCount

type COMMENT

• _id
• commentText
• createdAt
• petUsername

type Auth

• token
• pet

Type Query just needs to be uncommented

type Query {
me: Pet
pets: [Pet]
pet(petUsername: String!): Pet
tails(petUsername: String): [Tail]
tail(_id: ID!): Tail
}

type Mutation

• login
• addPet
• addTail
• addComment
• addFriend
• addProfileImage(imageUrl: String!): User (add image is already done, it just needs to be uncommented)

Add some styles to Login and Signup.

Set up Queries and Mutations.

We need the header and nav styled.

Use the purple color as the header background.

Behavior:

When you use the addTail mutation, the tail is added to the db, but the postedBy field only returns the userID and it does not populate the username and image fields. This causes the existing TailList on the Profile page to lose its reference to the username and image, and it prevents the Apollo cache from being updated.

Expected Outcome

• postedBy should be populated by _id, username, and image

Actual Outcome

• postedBy only contains the _id, and the username and image fields are returned null.