notshadowm / spacex Goto Github PK

When the data's pagination settings are changed, the UI should resend for the new data from the backend, use the limit and offset methods provided by the API to achieve this. This goes for both launches and missions.

A cleaner approach to specify fields' handlers, is to eliminate custom implementation where applicable.
Example:
Instead of

function Selection({ e, index, formData }) {
  return (
    <Select key={index} value={formData[e.state] || e.name} style={e.style} allowClear onChange={(value) => e.setData(value)}>
      {e.contents.map((x, ind) => <Option key={ind} value={x.value}>{x.text}</Option>)}
    </Select>
  );
}
.
.
.
    state: 'launch_year', setData: (value) => { setFormData({ launch_year: value }); }, name: 'Year', style: { width: 80, marginLeft: 20 }, contents: years.map((e) => ({ value: e, text: e })),

You can do:

function Selection({ field, form, onChange }) {
  return (
    <Select key={index} value={form[field.name]} style={e.style} allowClear onChange={(value) => onChange({ name, value })}>
      {field.options.map((x, ind) => <Option key={ind} value={x.value}>{x.text}</Option>)}
    </Select>
  );
}
.
.
.
    name: 'launch_year', label: 'Year', style: { width: 80, marginLeft: 20 }, contents: years.map((e) => ({ value: e, text: e })),

This way, you don't need to create a custom onChange for every input in your system

General components like Loading, ModalRow and Selection are not exclusive to RecentLaunches and should be exported elsewhere.

Do not map any array on rerender, memoize any mappings and update their contents only when necessary.

In these sections, options and labels are hard coded, it's a much better practice to store the schema of your forms in one place "Like a JSON object", which will contain the labels and general options, and then use that JSON object in your components, rather than hardcoding the values into JSX.

Remove all unused variables, commented code, and unreadable comments.

When a piece of code seems to be written over and over again, it's better to separate that piece of code into its own component, and then reuse that piece of code in the rest of the project.

All of these fields are part of the same form, changing any of the fields will result in that "Form" updating the table, create a single state for all the form fields, and a generic "handleChange" function that can be passed to any of the inputs.

Remove all unused files in the repository

Everything similar to API URLs or code or keys should be declared only in one place in the project and then used from there. The idea is to not need to traverse the entire project if we needed to change that portion.

You shouldn't use Template literals to define your graphql variables, use the documentation to correctly generate a query.

Variable names should be descriptive, and never abbreviated.

Every seemingly different functionality in a component (e.g. Store, API calls, Gql queries/mutations, translations, ...etc) should exist in a different location than the component.

Instead of having separate states for every variable, combine all the states into one pagination state.

https://ant.design/components/menu/

Use this component for navigation.