el.xwx.moe/pages/admin.tsx

import DeleteUserModal from "@/components/ModalContent/DeleteUserModal";
import NewUserModal from "@/components/ModalContent/NewUserModal";
import useUserStore from "@/store/admin/users";
import { User as U } from "@prisma/client";
import Link from "next/link";
import { useEffect, useState } from "react";
import { useTranslation } from "next-i18next";
import { GetServerSideProps } from "next";
import { serverSideTranslations } from "next-i18next/serverSideTranslations";
import { useRouter } from "next/router";
import { i18n } from "next-i18next.config";

interface User extends U {
  subscriptions: {
    active: boolean;
  };
}

type UserModal = {
  isOpen: boolean;
  userId: number | null;
};

export default function Admin() {
  const { t } = useTranslation();

  const router = useRouter();

  const { users, setUsers } = useUserStore();

  const [searchQuery, setSearchQuery] = useState("");
  const [filteredUsers, setFilteredUsers] = useState<User[]>();

  const [deleteUserModal, setDeleteUserModal] = useState<UserModal>({
    isOpen: false,
    userId: null,
  });

  const [newUserModal, setNewUserModal] = useState(false);

  useEffect(() => {
    console.log(router);
    setUsers();
  }, []);

  return (
    <div className="max-w-6xl mx-auto p-5">
      <div className="flex sm:flex-row flex-col justify-between gap-2">
        <div className="gap-2 inline-flex items-center">
          <Link
            href="/dashboard"
            className="text-neutral btn btn-square btn-sm btn-ghost"
          >
            <i className="bi-chevron-left text-xl"></i>
          </Link>
          <p className="capitalize text-3xl font-thin inline">
            {t("user_administration")}
          </p>
        </div>

        <div className="flex items-center relative justify-between gap-2">
          <div>
            <label
              htmlFor="search-box"
              className="inline-flex items-center w-fit absolute left-1 pointer-events-none rounded-md p-1 text-primary"
            >
              <i className="bi-search"></i>
            </label>

            <input
              id="search-box"
              type="text"
              placeholder={"Search for Users"}
              value={searchQuery}
              onChange={(e) => {
                setSearchQuery(e.target.value);

                if (users) {
                  setFilteredUsers(
                    users.filter((user) =>
                      JSON.stringify(user)
                        .toLowerCase()
                        .includes(e.target.value.toLowerCase())
                    )
                  );
                }
              }}
              className="border border-neutral-content bg-base-200 focus:border-primary py-1 rounded-md pl-9 pr-2 w-full max-w-[15rem] md:w-[15rem] md:max-w-full duration-200 outline-none"
            />
          </div>

          <div
            onClick={() => setNewUserModal(true)}
            className="flex items-center btn btn-accent dark:border-violet-400 text-white btn-sm px-2 aspect-square relative"
          >
            <i className="bi-plus text-3xl absolute"></i>
          </div>
        </div>
      </div>

      <div className="divider my-3"></div>

      {filteredUsers && filteredUsers.length > 0 && searchQuery !== "" ? (
        UserListing(filteredUsers, deleteUserModal, setDeleteUserModal)
      ) : searchQuery !== "" ? (
        <p>No users found with the given search query.</p>
      ) : users && users.length > 0 ? (
        UserListing(users, deleteUserModal, setDeleteUserModal)
      ) : (
        <p>No users found.</p>
      )}

      {newUserModal ? (
        <NewUserModal onClose={() => setNewUserModal(false)} />
      ) : null}
    </div>
  );
}

const UserListing = (
  users: User[],
  deleteUserModal: UserModal,
  setDeleteUserModal: Function
) => {
  return (
    <div className="overflow-x-auto whitespace-nowrap w-full">
      <table className="table w-full">
        <thead>
          <tr>
            <th></th>
            <th>Username</th>
            {process.env.NEXT_PUBLIC_EMAIL_PROVIDER === "true" && (
              <th>Email</th>
            )}
            {process.env.NEXT_PUBLIC_STRIPE === "true" && <th>Subscribed</th>}
            <th>Created At</th>
            <th></th>
          </tr>
        </thead>
        <tbody>
          {users.map((user, index) => (
            <tr
              key={index}
              className="group hover:bg-neutral-content hover:bg-opacity-30 duration-100"
            >
              <td className="text-primary">{index + 1}</td>
              <td>{user.username ? user.username : <b>N/A</b>}</td>
              {process.env.NEXT_PUBLIC_EMAIL_PROVIDER === "true" && (
                <td>{user.email}</td>
              )}
              {process.env.NEXT_PUBLIC_STRIPE === "true" && (
                <td>
                  {user.subscriptions?.active ? (
                    JSON.stringify(user.subscriptions?.active)
                  ) : (
                    <b>N/A</b>
                  )}
                </td>
              )}
              <td>{new Date(user.createdAt).toLocaleString()}</td>
              <td className="relative">
                <button
                  className="btn btn-sm btn-ghost duration-100 hidden group-hover:block absolute z-20 right-[0.35rem] top-[0.35rem]"
                  onClick={() =>
                    setDeleteUserModal({ isOpen: true, userId: user.id })
                  }
                >
                  <i className="bi bi-trash"></i>
                </button>
              </td>
            </tr>
          ))}
        </tbody>
      </table>

      {deleteUserModal.isOpen && deleteUserModal.userId ? (
        <DeleteUserModal
          onClose={() => setDeleteUserModal({ isOpen: false, userId: null })}
          userId={deleteUserModal.userId}
        />
      ) : null}
    </div>
  );
};

// Take this into a separate file, it's for logged out users
// For logged in users, we'll use their preferred language from the database (default: en)
export const getServerSideProps: GetServerSideProps = async (ctx) => {
  console.log("CONTEXT", ctx);

  const acceptLanguageHeader = ctx.req.headers["accept-language"];
  const availableLanguages = i18n.locales;

  console.log("ACCEPT LANGUAGE", acceptLanguageHeader);
  console.log("AVAILABLE LANGUAGES", availableLanguages);

  // Parse the accept-language header to get an array of languages
  const acceptedLanguages = acceptLanguageHeader
    ?.split(",")
    .map((lang) => lang.split(";")[0]);

  console.log(acceptedLanguages);

  // Find the best match between the accepted languages and available languages
  let bestMatch = acceptedLanguages?.find((lang) =>
    availableLanguages.includes(lang)
  );

  console.log(bestMatch);

  // If no direct match, find the best partial match
  if (!bestMatch) {
    acceptedLanguages?.some((acceptedLang) => {
      const partialMatch = availableLanguages.find((lang) =>
        lang.startsWith(acceptedLang)
      );
      if (partialMatch) {
        bestMatch = partialMatch;
        return true;
      }
      return false;
    });
  }

  console.log("BEST MATCH", bestMatch);

  return {
    props: {
      ...(await serverSideTranslations(bestMatch ?? "en", ["common"])),
    },
  };
};