feat: add reordering custom hook and component

[6ri4n]

Resolves issue #8

This custom hook and component allows a user to hold and drag one item over another item to swap item positions.

A request will be sent to the backend once the user no longer reorders anything for 3 seconds.

Payload:

{
    data: [...] // updated array
}

Usage Example:

import React, { useState } from "react";
import Reorder from "./Reorder/Reorder";
import useReorder from "./Reorder/useReorder";

function Demo() {
  const [items, setItems] = useState([
    "item-1",
    "item-2",
    "item-3",
    "item-4",
    "item-5",
  ]);

  const { response, error, reorderObj } = useReorder(
    items,
    setItems,
    "education"
  );

  return (
    <>
      {items.map((element, index) => (
        <Reorder key={index} index={index} reorderObj={reorderObj}>
          <div key={index}>{element}</div>
        </Reorder>
      ))}
    </>
  );
}

export default Demo;

You must import the useReorder hook and Reorder component.

The useReorder hook requires 3 arguments, items must be an array, setItems must be the array setter, and sectionType must be a string that identifies the resume section (e.g. "education", "experience", and "skills"). The useReorder hook returns an object containing response, error, and reorderObj.

The Reorder component requires 3 props: key and index should be assigned an index from the items array, and reorderObj which takes in reorderObj from the useReorder hook. The Reorder component should wrap the section item component.

[6ri4n]

@yashika51

[yashika51]

@yashika51

can you include fix for failing test as well?

[6ri4n]

@yashika51

can you include fix for failing test as well?

the test cases are unrelated to my PR