Makking/app/routes/index.jsx

import { getSession } from "~/sessions";
import { getMe } from "~/utils";
import { useLoaderData } from "@remix-run/react";
import { prisma } from "~/db.server";
import { Form } from "@remix-run/react";

const countys = [
  "Ahvenanmaa",
  "Etelä-Karjala",
  "Etelä-Pohjanmaa",
  "Kainuu",
  "Kanta-Häme",
  "Keski-Pohjanmaa",
  "Keski-Suomi",
  "Kymenlaakso",
  "Lappi",
  "Pirkanmaa",
  "Pohjanmaa",
  "Pohjois-Karjala",
  "Pohjois-Pohjanmaa",
  "Pohjois-Savo",
  "Päijat-Häme",
  "Satakunta",
  "Uusimaa",
  "Varsinais-Suomi",
];

export async function action({ request }) {
  const formData = await request.formData();
  const county = formData.get("county");

  if (!county || typeof county !== "string" || !countys.includes(county))
    throw new Error("bad county");

  const session = await getSession(request.headers.get("Cookie"));
  if (!session.has("userId"))
    throw new Error("OAuth token not found in cookie");

  const me = await getMe(session.get("userId"));

  const countySubmit = prisma.county.create({
    data: {
      name: county,
      players: {
        create: {
          playerName: me.username,
          rank: parseInt(me.statistics.global_rank),
        },
      },
    },
  });

  return countySubmit
    ? countySubmit
    : new Error("Something went wrong with creating the user");
}

export async function loader({ request }) {
  const countyData = await prisma.county.findMany({
    include: {
      players: true,
    },
  });
  const session = await getSession(request.headers.get("Cookie"));
  if (!session.has("userId")) return { countyData };

  const me = await getMe(session.get("userId"));

  const selfData = await prisma.player.findUnique({
    where: {
      playerName: me.username,
    },
  });
  console.log(selfData);
  return { me, countyData, selfData };
}

export default function Index() {
  const data = useLoaderData();

  return (
    <div className="container mx-auto">
      <header className="flex w-full items-center justify-between border-b p-4">
        <h1 className="text-2xl tracking-tighter">Maakunta ranking</h1>
        {data.me ? (
          <div className="flex flex-col items-center justify-center">
            <img
              className="w-10 rounded-full outline"
              src={data.me.avatar_url}
              alt=""
            />
            <h1>{data.me.username}</h1>
          </div>
        ) : (
          <a
            href="https://osu.ppy.sh/oauth/authorize?client_id=20031&redirect_uri=http://localhost:3000/auth&response_type=code"
            referrerPolicy="noreferrer"
            className="rounded-full border bg-red-300 px-4 py-2 font-semibold shadow-lg hover:bg-red-400"
          >
            Authenticate with OSU account
          </a>
        )}
      </header>
      {data?.me?.username ? (
        data.selfData ? (
          <h1 className="p-4 text-center font-bold">
            Kiitos, että osallistuit maakunta rankingiin!
          </h1>
        ) : (
          <Form
            className="flex flex-col items-center justify-center space-y-4 p-4 text-center"
            method="post"
          >
            <label>
              <details>
                <summary className="cursor-pointer text-2xl font-semibold tracking-wide">
                  Valitse sinun tämän hetkinen maakunta
                </summary>
                <p className="text-sm">
                  Jos laitat vahingos väärän tai jotai nii pingaa juunas hyväs
                  mieles nii voin vaihtaa joo
                </p>
              </details>
            </label>
            <select
              className="rounded bg-white p-2 shadow"
              name="county"
              id="county"
            >
              {countys.map((county, index) => (
                <option key={index} value={`${county}`}>
                  {county}
                </option>
              ))}
            </select>
            <button
              className="rounded-full px-4 py-2 shadow hover:shadow-xl"
              type="submit"
            >
              Submit
            </button>
          </Form>
        )
      ) : (
        ""
      )}
      {data.countyData.length > 0 ? (
        <ul className="flex items-center justify-center p-4">
          {data.countyData.map((county) => (
            <li
              className="m-4 flex w-full max-w-md flex-col space-y-2 rounded border p-4 text-black shadow-lg"
              key={county.id}
            >
              <h1 className="text-center text-4xl tracking-tighter">
                {county.name}
              </h1>
              <table className="w-full text-left">
                <thead>
                  <tr className="border-b">
                    <th className="p-2">Player</th>
                    <th className="p-2">Rank</th>
                  </tr>
                </thead>
                <tbody>
                  {county.players.map((player) => (
                    <tr
                      key={player.id}
                      className="border-b odd:bg-slate-50 even:bg-white"
                    >
                      <td className="p-2">{player.playerName}</td>
                      <td className="p-2">#{player.rank}</td>
                    </tr>
                  ))}
                </tbody>
              </table>
            </li>
          ))}
        </ul>
      ) : (
        <h1 className="p-6 text-center text-4xl">No data yet</h1>
      )}
    </div>
  );
}