[FEATURE REQ] Add ability to modify order of questions in question overview

[Rllyyy]

No description provided.

[Rllyyy]

I tried to use drag and drop. But i seems most libraries can't deal with large (nested) lists. The list starts to lag when loading/changing modules with a lot of questions. This only gets worse when switching to mobile. The reason is probably the very nested questions state. It might be better to create a new questions object that just contains the id and the title. This would be easier to manage for framer motion or dndkit. The problem then becomes on how to update the localStorage

With framer motion:

export const QuestionList = () => {
  //State
  const [questions, setQuestions] = useState<IModule["questions"]>([]);

  ...

   return (
    <div className='question-table' style={{ position: "relative" }}>
      <Reorder.Group onReorder={setQuestions} values={questions} ref={constraintsRef}>
        {questions?.map((question) => {
          return (
            <ListItem
              key={`question-${question.id}`}
              question={question}
              constraintsRef={constraintsRef}
              moduleID={moduleID}
            />
          );
        })}
      </Reorder.Group>
    </div>
  );
};

interface IListItem {
  question: IQuestion;
  constraintsRef: any; //! Fix this
  moduleID: IParams["moduleID"];
}

const ListItem: React.FC<IListItem> = memo(({ question, constraintsRef, moduleID }) => {
  const dragControls = useDragControls();

  const iRef = useRef<SVGSVGElement | null>(null);

  // Reorder trigger does not work on mobile
  // Issue is described here: https://github.com/framer/motion/issues/1597
  useEffect(() => {
    const touchHandler: React.TouchEventHandler<HTMLElement> = (e) => e.preventDefault();

    const iTag = iRef.current;

    //@ts-ignore
    iTag?.addEventListener("touchstart", touchHandler, { passive: false });
    if (iTag) {
      return () => {};
    }
    return () => {
      //@ts-ignore
      iTag.removeEventListener("touchstart", touchHandler, {
        passive: false,
      });
    };
  }, [iRef]);

  return (
    <Reorder.Item
      value={question}
      id={question.id}
      dragListener={false}
      dragControls={dragControls}
      dragConstraints={constraintsRef}
      className='question'
      style={{ position: "relative" }}
    >
      <ReorderIcon dragControls={dragControls} ref={iRef} />
      <span className='title'>{question.title}</span>
      <span className='id'>{question.id}</span>
      <span className='results'>
        <div className='rectangle'></div>
        <div className='rectangle'></div>
      </span>
      <Link
        className='link-to-question'
        to={{
          pathname: `/module/${moduleID}/question/${question.id}`,
          search: `?mode=practice&order=chronological`,
        }}
      >
        <IoIosArrowForward />
      </Link>
    </Reorder.Item>
  );
});

interface Props {
  dragControls: DragControls;
}

/* dragControls */
export const ReorderIcon = forwardRef<SVGSVGElement, Props>(({ dragControls }, ref) => {
  return (
    <svg
      xmlns='http://www.w3.org/2000/svg'
      viewBox='0 0 39 39'
      width='39'
      height='39'
      ref={ref}
      onPointerDown={(event) => {
        dragControls.start(event);
        event.preventDefault();
      }}
      style={{ cursor: "grab", userSelect: "none" }}
    >
    </svg>
  );
});

dndkit

https://codesandbox.io/s/beautiful-rgb-hpvndu?file=/src/App.tsx
Original Source: https://codesandbox.io/s/dnd-kit-sortable-starter-template-22x1ix?file=/src/App.tsx:310-322