eddielee394 / react-my-eats Goto Github PK

• Add the ability for users to "like" a recipe

• add the ability for users to create a favorite's list.

• add the capability for users to search for a recipe

Search Params

• name
• ingredients
• user

custom wrapper component to handle loading indicators for optimistic ui rendering & React.Suspense defaults for component lazy loading.

• add the ability for users to comment on a recipe

• Create a list view which includes all the recipes
• Create a recipe detail view to display each recipe

layout ui design, & styling

Ingredients with a matching ingredientId listed in the specials response should also show the special title, type and text under the ingredient name

Fix logo and header components for small screens
Fix issue where widget containers are displaying in sidebar if child element is hidden

• need to resolve the issue where paths aren't being routed to the correct base url when deployed to github.io

When data is returned from a response, currently I'm using an inline loop to handle validating any data contained within arrays deeply nested in the response object.

Ideally I'd like to avoid inline logic within the validation schema & instead abstract that logic into a separate method validateApiResponse(). This would check if the response object contains any nested arrays & if so, then map over them comparing each iteration to the parent object schema.

Approaches taken so far

• Using a for in loop and hasOwnProperty(), I'm able to do a shallow mapping that checks if there are multiple top level objects in the response and validate those individually, but it doesn't handle nested arrays within the top level objects.

      let data = {};
      for (let key in response.data) {
        if (response.data.hasOwnProperty(key)) {
          data[key] = convertData(response.data[key]);
        }
      }

• Inline map() over any known nested arrays. The trade-off with this approach is that it requires us to know whether the incoming response object contains any arrays before hand, in order to loop over them in the validation schema.

    const convertData = data => {
      return {
        uuid: data.uuid,
        title: data.title,
        //...
        directions: data.directions.map(d => {
          return {
            instructions: d.instructions,
            optional: d.optional
          };
        })
      };
    };

	//...
    const rawData = response.data;
    const data = rawData.map(d => convertData(d));

Possible Solutions

• Recursively apply the validation method to any deeply nested enumerable objects (i.e. arrays).
• Check if a nested object in the response is an array, then somehow loop over and apply the appropriate validation.

Initial project planning and codebase setup.

Create a view to add and update recipes or specials. Image upload not required. Both endpoints support GET, POST and PATCH.