Description

A JSX component that stands in place of an empty orchard plot of land, with a button to purchase a tree.

HTML

The returning JSX from the component should include :

• [x] item container - to keep all items and trees the correct size
• [x] image or background image to signify there is a space for the tree to be planted
• [x] purchase button with an onClick attribute to handlePurchase function

JavaScript

• [x] imports
• [x] component function
• [x] handlePurchase function to handle the button onClick event
• [x] how does this placeholder know which orchard to add a tree to?
  • [x] should we use useParams and get the orchardId?
• [x] export component

Description

Let's make this first so we can get authorization implemented early also!

Requirements

It is done when

1. the user model has all the appropriate fields for a basic user.

   • [x] _id,
   • [x] username,
   • [x] email,
   • [x] password,
   • [x] appleCount,
   • [x] money,
   • [x] gemCount,
   • [x] TBD - inventory { [trees], [juicers], [ovens], [mashers] }

2. we can perform each a User object from the GraphQL sandbox explorer

   • [x] GET
   • [x] CREATE
   • [x] UPDATE
   • [ ] DELETE

Description

We need a marketplace / shop component that pops up when clicking on the shop icon within the header. For now we just need the placeholder elements with two spaces for purchasing gems (e.g., 5 gems for $5 & 30 gems for $25, etc.) and two spaces for exchanging gems for temporary speed boosts (e.g., sell all inventory, coming soon, etc.)

Description

Make react component functions for both the login and signup pages

Requirements

It's complete when there is a form with inputs and a button for each page

• Login: email, password, login button
• Signup: username, email, password, signup button

Description

When a user is logged in and navigates to /login the login page displays. When a user is NOT logged in and navigates to /home or any other page, the target page displays.

Description

A profile page should have the user's username and email, as well as a logout button with the functionality of terminating the user's current session.

Description

The orchard page should have html elements for all of the following (and possibly more)

HTML

• [x] header (import component)
• [x] back button to go back to dashboard
• [x] orchard container
• [x] rows of trees (for now just a list of trees )
  • [ ] future: add row containers
• [x] orchard title
  • [x] future: with edit button to change it to an input and back to a title
• [x] placeholder for unplanted tree location (imported component: needs to be made see issue #6

Orchard Page JS #8 view sister issue

Current:

• Login and Signup are separate pages (with some currently broken css)

Plan:

• [x] Create animated splash page
• [x] Combine login/signup to be a single page
• [x] Create login button that opens a login modal
• [x] Make a toggle to switch between login modal and signup modal
• [x] Mobile responsive coding

Description

A button on the profile page to handle setting all the users stats back to default.

This will require __ steps

1. Create the mutation

   identify whether a mutation exists to pass in all the necessary stat fields and if not make one

   1. check server/schemas/typeDefs.js for the mutation
   2. The stats that should be reset are
      • money, appleCount, trees, juicers, mashers, ovens
   3. The mutation should take in an objectId id and return a User

   EX:

   // server/schemas/typeDefs.js
   const typeDefs = gql`
     ...
     type Mutation {
       ...
       resetUserStats(): User
     }
   `;
   

2. Create the resolver to resetUserStats

   // server/schemas/resolvers.js
   const resolvers = {
     ...
     Mutation: {
       ...
       resetUserStats: async function( parent, args, context ) {
           // this should find a `User` using the `context.user._id`
           // then `$set` the new stats to the `args` passed in
   
           return user
       }
     }
   
   }
   

3. Test the functionality in Apollo Sandbox

   This mutation should be easy to import after testing using the Apollo Sandbox Explorer

   1. navigate to https://studio.apollographql.com/sandbox/explorer
   2. make sure the endpoint directs to http://localhost:3001/graphql

   Create a new tab at the top, then click on the Documentation button in the left inner sidebar. The icon looks like a piece of paper.

   If you have not created an account, signup because it will be quicker. Otherwise you have to type everything manually.

   Login first using the following Operation with a known user's email and password

   // Operation `login`
   mutation login($email: String!, $password: String!) {
     login(email: $email, password: $password) {
       token
       user {
         _id
         username
       }
     }
   }
   

   In the Variables pane at the bottom, add a user you have created.

   // Variables
   {
     "email": "[email protected]",
     "password": "pw123"
   }
   

   Then copy the token from the Response pane on the right.

   Add the token to the Headers

   | | | | | | --- | --- | --- | --- | | ☑ |Authorization| <token> | ✖ |

   If you are logged in, you can import the mutation easily by clicking on the mutation option in the Root Types (see Documentation tab in the left sidebar).

   From the list of mutations you shoul be able to se the resetUserStats mutation you just created and click the plus button to add it to the Operation pane.

   From here you can import all of that mutation's Arguments and Fields, making sure to add in the _id of any subdocuments (ie, juicers)

4. Copy that mutation into the client-side mutations.js

   If the test works, then open the client side mutations file and add a new exported constant to reset the user stats

   // client/src/utils/mutations.js
   ...
   export const RESET_USER_STATS = gql`
     // paste the working mutation here from the sandbox
   `;
   

5. Create the reset ALL stats button in the profile page.

   1. Make the button

      In the profile page make a new button element in the Stats container

      Style the button with a btn btn-shop className for now

   2. Add a button handler (eg, handleResetAllStats)

      also add an event handler to handle when the button is pressed.

   3. import the mutation from mutations.js

      // client/src/pages/Profile.js
      // import { RESET_USER_STATS } from '../utils/..
      // import useMutation
      
      function Profile() {
        ...
        // define the mutation function and set it equal to useMutation(RESET_USER_STATS, { variables: { pass in the variables here }})
      
        ...
      
        // define the event handler
      
        return (
          <div>
            ...
            {/* Add button near 'STATS' */}
          </div>
        )
      }
      
      

If we need to have these items in GlobalProvider (I don't think we do because we have the JWT?), they should come from the initial sign in or from the server....

• [x] Install react-transition-group from npm
• [ ] create CSS for smooth page transitions

Possibly:

• Check if I can add different transitions depending on the page

• [x] Add apple image as tab icon
• [x] Remove fonts not in use
• [x] Update react-router-dom to v6 -- Implement back navigation button
• [x] Shop CSS
• [x] Profile CSS
• [x] Fix CSS bugs -- Navigation buttons on mobile view
• [x] Clean up CSS files

This list will be edited to include more things