Refactor FormComponent

[Quaquaro]

Value proposition

As a developer I need to have clean code for my forms to be able to maintain, test and understand the code more easily

Acceptance Criteria

• [ ] Identify and reduce redundant code.
• [ ] Higher performance
• [ ] Improved validation
• [ ] Improved user notifications

Tasks

• [ ] Use useFormsHook to reduce code.
• [ ] Fetching more Game Data using "skip" in url
• [ ] Add additional Validation
• [ ] Revise the PropTypes of button and input component with default values Work
• [ ] Destructuring where possible
• [ ] Adding react.lazy see also comments below
• [ ] Remove function from jsx
• [ ] Use object state if you have to update multiple states together.
• [ ] Improve styled components.

[Quaquaro]

const useFetch = (input, { auto, ...init }) => {
  const [result, setResult] = useState([null, null, true]);

  const fetcher = useCallback(
    (query, config) =>
      fetch(query, config)
        .then((res) => res.json())
        .then((data) => setResult([null, data, false]))
        .catch((err) => setResult([err, null, false])),
    [input, init]
  );

  useEffect(() => {
    if (auto) fetcher(input, init);
  }, []); // if you want to fetch data only once, do this.

  return [...result, fetcher];
  //fetcher(refetch) function or can be used for post api call
};

[Quaquaro]

Inside the component

const Users = () => {
  const [err, users, loading, refetch] = useFetch(`/api/users`, {auto:true});

  const onClick = () => refetch(...);

  return (
    <div>
      {users.map((user) => <User key={user.id} user={user} />)}
    </div>
  );
}

[Quaquaro]

const Home = React.lazy(() => import('./Home'));
const About = React.lazy(() => import('./About'));
function MyComponent() {
  return (
    <Suspense fallback={<div>Loading...</div>}>
      <Route path="/home" component={Home} />
      <Route path="/about" component={About} />
    </Suspense>
  );
}

[Quaquaro]

const [state, setState] = useState({
  count: 0,
  name: "",
});

const onClick = () => {
  setTimeout(() => {
    setState((prevState) => ({
      ...prevState,
      name: "John",
      count: prevState.count + 1,
    }));
  }, 1000);
};

[Quaquaro]

const getPrimaryColor = ({ theme }) => theme.colors.primary;
const getDefaultColor = ({ theme }) => theme.colors.secondary;

const Button = styled.button`
  background-color: ${getPrimaryColor};
  color: ${getDefaultColor};
`;

[Quaquaro]

return (
  <>
    {list.map((item) => (
      <React.Fragment key={item.id}>
        <SomeComponent />
        <SomeAnotherComponent />
      </React.Fragment>
    ))}
  </>
);