Comp.tsx

"use client";
import React, { useState, useEffect } from "react";

const Comp = ({
  existingDataPromise,
  moveItemSideEffect,
}: {
  existingDataPromise: Promise<string[]>;
  moveItemSideEffect: () => void;
}) => {
  const [dataList, setDataList] = useState<string[]>([]);

  useEffect(() => {
    existingDataPromise.then((data) => {
      setDataList(data);
    });
  }, [existingDataPromise]);

  const moveItem = (index: number, direction: "up" | "down") => {
    setDataList((prevList) => {
      const newList = [...prevList];
      const element = newList.splice(index, 1)[0];
      const newIndex = direction === "up" ? index - 1 : index + 1;
      newList.splice(newIndex, 0, element);
      return newList;
    });
    moveItemSideEffect();
  };

  return (
    <div className="flex flex-col">
      {dataList.map((item, index) => (
        <div key={index} className="flex flex-row gap-2">
          {item}
          <button
            onClick={() => moveItem(index, "up")}
            disabled={index === 0}
            className="bg-red-500"
          >
            Up
          </button>
          <button
            onClick={() => moveItem(index, "down")}
            disabled={index === dataList.length - 1}
            className="bg-green-500"
          >
            Down
          </button>
        </div>
      ))}
    </div>
  );
};

export default Comp;

page.tsx

import Comp from "./Comp";
import { revalidatePath } from "next/cache";

export default function Home() {
  const getData = async () => {
    const resp = await fetch("https://api.sampleapis.com/wines/reds");
    const json = await resp.json();
    return json
      .map((item: { wine: string }) => item.wine)
      .slice(0, 5)
      .sort((a: string, b: string) => a.length - b.length);
  };

  const moveItemSideEffect = async () => {
    "use server";
    revalidatePath("/");
  };

  return (
    <main>
      <Comp
        existingDataPromise={getData()}
        moveItemSideEffect={moveItemSideEffect}
      />
    </main>
  );
}