gardenbuilder-app/gardenbuilder-frontend

Front end gardening application designed to run in the browser. Design, manage, and take notes about your garden.

Gardenbuilder

A tool to design and plan a vegetable garden

Basic Features

This app will allow users to:

• Document, manage, and retrieve data about on or more gardens.
• Document, manage, and retrieve data about beds in each garden.
• Enter dimensions of each bed.
• Beds are envisioned as a grid, with plants or a plant in each section of the grid.
• Manage and document what plant is planted in each section.
• Retrieve data in aggregate and individually for current and future sections, beds, gardens, and users.

Getting started

Starting this project

git pull https://github.com/capndave/gardenbuilder-frontend.git
cd gardenbuilder-frontend
npm start

Default (Public) API

The quickest way to get up and running is to start the project as above. Any data called by the app will be from the public-facing GraphQL API. You can explore the queries and mutations available through the API by clicking the Docs button on the top right corner of that page.

Local API

It's also possible to run a copy of the API locally, following instructions at gardenbuilder-backend. If you do so, you'll also need to make a .env file in the gardenbuilder-frontend directory and type the following in it(assuming you're running the gardenbuilder-api locally):

REACT_APP_GRAPHQL_SERVER="http://localhost:8000/graphql/

We welcome changes to the (local) API, which you can then submit pull requests for.

Contributing

We would love some help, especially for Hacktoberfest!

Design Help

We would love help coming up with wireframes and designs for the pages in this app. If interested, please reach out to Dave at [email protected]

General Code Contributions

There are a number of issues that we would love your help with. Many of them are fairly easy and are tagged as good first issue. Most are things that I (capndave), just haven't gotten around to yet. Feel free to fork, work on, and submit a pull request for anything you see an issue for.

For more detail, please see our contribution guidelines.

Code of Conduct

Please remember to read and adhere our code of conduct - we think it's very important to foster open, respectful community amongst developers!

Further Involvement

If you are interested in ok-ing pull requests, co-managing this repo or anything else beyond occasional contributions, please email me at [email protected]. I'd love your help!

Contact

Questions? Feel free to contact Dave at [email protected].

gardenbuilder-frontend's Issues

Fix error message in Login.js

Remove initial usestate("error") declaration and ensure that error message appears and works correctly

Troubleshoot CREATE_GARDEN_MUTATION

Need

Please:

• Look at AddGarden.js and make sure that the results of the CREATE_GARDEN_MUTATION are pushed to the Apollo cache appropriately.
• Ideally, they will be pushed to the same object in the cache that is saved after running the GET_USER_GARDENS query in GardenList.js.
• Please ensure that the GardenList view also updates after the CREATE_GARDEN_MUTATION.

Notes

#26 needs to be completed before starting this

Extra Credit

If you'd like to test that the GardenList updates with the newly-created garden that would be awesome!

Save/Update bed dimensions on change in Bedbuilder.js or BedGrid.js

Type

New Feature

Problem or To-Do

Save/Update bed dimensions on change in Bedbuilder.js or BedGrid.js

Fill out Garden component

Type

Feature request

Problem or To-Do

Fill out Garden.js with features that mirror that of Gardens.js. It should include:

• A list of beds that the user owns, similar to GardenList.js
• A component that allows one to add a bed, similar to AddGarden.js
• A call to the createBed mutation, if somone adds a bed
• A call to the bedsForUser query (which may be renamed to beds shortly).
• Query results should appear in the list of beds.

Additional Info

If you see a good opportunity to make GardenList or AddGarden into a reusible component that can be used for both Gardens and Beds that would be awesome.
Feel free to break this into multiple pull requests, if you like.

Fix another test in Login.test.js

Issue

Please troubleshoot the test on line 73 of Login.test.js. You can replace the .skip snippet at the beginning of the text declaration to .only, and run the test using npm run test Login.

Test should ensure that clicking on the "Sign Up" button makes the text of the same button change to "Sign In". I'm not sure why it isn't working! Please take a look and see if you can figure it out.

Additional Resources

You may find it helpful to read the docs on testing Apollo/GraphQL.

Set up CI to run tests on PR to main

Type

Enhancement

Problem or To-Do

Set up CI to run tests on PR to main

Change CURRENT_USER_QUERY to work with Typescript API

Type

Feature request

Problem or To-Do

Alter CURRENT_USER_QUERY to use the Typescript API. The API currently runs locally only.

Additional Information

Please make pull requests to the develop branch rather than main

Beautify Form in Landing page.

Type

Enhancement

Problem or To-Do

• Border in the form part.

• Proper padding in the input fields.

• Applying Box shadow for the Form.

HTML type for input tag

Hello everyone,

I noticed in the project that all inputs have the same type "text", so I added the props type for InputSection that go down to Input, then we can manage the type of input, I'll open an pull request with my solution for a review. It's my first contribution in a open source project, so i don't know if is the best way to do it

Ensure that header element isn't pushed to the right

Header element is pushed to the right or has an incorrect margin on desktop view, please fix!

Ensure that results of GET_USER_GARDENS query updates the GardenList appropriately

Query currently runs on load and doesn't update the view when it completes. Please update to populate the view with query results asyncronously

Limit Button component to a width of no more than 264px, padding included

Add a width property to the StyledButton declaration at line 5 of Button.js. Ensure that the rendered button is no more wide than 264px, including padding.

Make a module or functional component that logs out users, from click on logout in header

Make Navbar visible only if user is validated

Make navbar (not the whole header, just the nav links) visible only if user is validated

Figure out why Bed disappears from cache

Type

Bed disappears from cache.

Problem or To-Do

When running locally, go to the Garden page. Note that a Bed will appear in the cache. Click on a garden. That bed is gone from the cache. We need the bed to stay in cache so that we can use its info in the Bed component.

Additional Information

n/a

Connect <Bed /> to backend

Type

Feature

Problem or To-Do

We need to update the <Bed /> component to properly display data coming from the backend, and subsequently update that data. This is dependent on a backend update to the Bed data model to include attributes such as 'height', 'width', and 'unit of measurement'.

When complete the Bed page should display:

• the Bed's name
• dropdown menus populated with the Bed's height, width, and unit of measurement
• a BedGrid matching those measurements
• the ability to adjust the values in the dropdown, and save the new dimensions to data

This will require a SINGLE_BED_QUERY and an UPDATE_BED_MUTATION to accomplish.

Update Login page to work with new graphql schema from Typescript API

Type

Feature request

Problem or To-Do

Alter src/pages/Login/Login.js to work with the new schema from the Typescript API. The API currently runs locally only.

Please also update tests.
Can be done alongside #58 , #59

Additional Information

Please make pull requests to the develop branch rather than main

Make a basic Bed component

Type

Feature request

Problem or To-Do

Make a basic bed component. It should include:

• Three select elements that allow you to set the width, height, and measuring units (feet or cm) of a bed, in feet.
• A grid view (using css grid) that renders the correct number of squares according to the dimensions above. If a bed is 3'x5', for example, the grid should have 3 columns and 5 rows.
• If cm are selected, please ensure that each cell of the grid represents 30cm.

Additional Information

Later we will include functionality to populate each cell of the grid with fruits or vegetables. It will be something a bit similar to the Gardeners Supply Company tool. Don't worry about adding that functionality now.

Update AddGarden Component

Please update the AddGarden component in the following way:

• Remove the submit button
• On a mobile view, the plus icons should appear to the right of the input element and act as the submit button (it shouldn't toggle the view)
• On a desktop view the submit button should be used. Please place it to the right of the input element.
• At the top of the html/jsx, there should be either a subcomponent or a declaration of the following:
  a. An arrow icon (see c, below) FaChevronDown icon and text saying "Add Garden". You can add the icon(s) using import { FaChevronDown } from "react-icons/fa
  b. On click, it should toggle formVisible.
  c. When formVisible is true, the component should display the FaChevronRight. If formVisible is false, show FaChevronDown.

Extra Credit

If you want to be extra awesome, feel free to add some tests for the component. You can do those in a separate pull request if you prefer.

Change CREATE_GARDEN_MUTATION to work with Typescript API

Type

Feature request

Problem or To-Do

Alter CREATE_GARDEN_MUTATION to use the Typescript API. The API currently runs locally only.

Additional Information

Please make pull requests to the develop branch rather than main

Change GET_USER_GARDENS to work with Typescript API

Type

Feature request

Problem or To-Do

Alter GET_USER_GARDENS query to use the gardens query from the Typescript API. The API currently runs locally only.

Additional Information

Please make pull requests to the develop branch rather than main

Make Beds list update when a bed is added to a garden

Type

Feature

Problem or To-Do

Make Beds list update when a bed is added to a garden

Remove orange from style in BedBuilder component

Problem or To-Do

Remove orange from style in BedBuilder component

Fix test in Login.js

Problem

Please troubleshoot the test on line 91 of Login.test.js. You can replace the .skip snippet at the beginning of the text declaration to .only, and run the test using npm run test Login Test should ensure that signing up makes the app reroute to the gardens page. I'm not sure why it isn't working! Please take a look and see if you can figure it out.

Additional Resources

You may find it helpful to read the docs on testing Apollo/GraphQL.

Move Graphql calls in Gardens page up (to Gardens.ts)

Type

Enhancement

Problem or To-Do

An error message needs to be available somewhere in the Gardens component to provide feedback to users.
Please add pass-through functions to Gardens.ts to facilitate this

Write a hook to accept a parameter and return value for that key from url parameter

Please help write a hook to accept a parameter and return value for that key from url parameter. This will be useful in the Garden component, for example, so that we can grab a garden id from a param in the url, query the graphql server, and return info on a particular garden.

Update tests for Garden.js

Type

Bug report

Problem or To-Do

Update tests for Garden.js, ensure they pass

Docs Add: Code_of_conduct and Contributor Guidelines

Type

support request

Problem or To-Do

Add code of conduct, contributor guidelines and license file to align with Github's recommended community standards

Environment

N/A (not applicable)

Additional Information

screenshot

I'd be delighted to take up this issue if needed

Fix useMutation in Garden.js to update cache appropriately, ensure garden gets added to Bedlist

Type

Bug Fix

Problem or To-Do

Fix useMutation in Garden.js to update cache appropriately, ensure garden gets added to Bedlist

Set up Github Actions with linting and unit tests

Set up Github Actions with linting and unit tests. Linting ideally matches react-recommended.

Change SIGNIN_MUTATION to work with typescript API

Type

Feature request

Problem or To-Do

Migrate SIGNIN_MUTATION to use the authenticateUser mutation from the Typescript API. The API currently runs locally only.

Additional Information

Please make pull requests to the develop branch rather than main

Add a key to the list item in MobileHeader.js

Problem or To-Do

Please add a key to the list item in MobileHeader.js. This should fix the following error:

index.js:1 Warning: Each child in a list should have a unique "key" prop.

Check the render method of `MobileHeader`. See https://fb.me/react-warning-keys for more information.
    in li (at MobileHeader.js:35)
    in MobileHeader (at Header.js:17)
    in header (created by styled.header)
    in styled.header (at Header.js:19)
    in Header (at Layout.js:18)
    in div (created by styled.div)
    in styled.div (at Layout.js:17)
    in Layout (at src/index.js:51)
    in ApolloProvider (at src/index.js:50)
    in StrictMode (at src/index.js:49)
    in Router (created by BrowserRouter)
    in BrowserRouter (at src/index.js:48)

Switching default branch to 'main'

Type

Changing terminology to respect inclusivity

Problem or To-Do

In response to concerns from the Black community, it seems to be good practice to change the default branch of a project to 'main' rather than 'master'. I think in line with our principles we should make the move! I've created a 'main' branch which is currently even with 'master'.

Fix tests in AddThing component

Fix tests in AddThing component

Change SIGNUP_MUTATION to work with Typescript API

Type

Feature request

Problem or To-Do

Alter SIGNUP_MUTATION to use the createUser mutation from the Typescript API. The API currently runs locally only.

Additional Information

Please make pull requests to the develop branch rather than main

Remove compile time warnings.

Type

Enhancement

Problem or To-Do

There are many compile-time warnings. I want to remove the warnings without affecting the flow of the application.

Effects of the problem

The application could become slow based on the warnings, as more and more waring keeps on accumulating.

Build Loading Spinner

I could use help building a loading spinner to run while waiting on graphql calls to load. For example, the Gardens component runs a graphql query when initialized, but there is no spinner or anything to show that you're waiting.