brawlset/app/app/admin/bsets/page.tsx

'use client'

import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from "@/components/ui/table"
import {
  Dialog,
  DialogContent,
  DialogHeader,
  DialogFooter,
  DialogClose,
  DialogTitle,
  DialogTrigger,
} from "@/components/ui/dialog"
import {
  Command,
  CommandEmpty,
  CommandGroup,
  CommandInput,
  CommandItem,
  CommandList,
} from "@/components/ui/command"
import { Badge } from "@/components/ui/badge"
import { Input } from "@/components/ui/input"
import { Button } from "@/components/ui/button"
import { useState, useEffect, useRef } from "react"
import { getCookie } from "@/lib/utils"
import type { set, bset } from "@prisma/client";

interface bsetExtended extends bset {
  sets:       set[]
}

export default function Home() {
  const [setList, setSetList] = useState<set[]>([])
  const [bsetList, setBsetList] = useState<bsetExtended[]>([])
  const [selectedSets, setSelectedSets] = useState<set[]>([])
  const BSetNameInput = useRef<HTMLInputElement>(null)
  const token = getCookie('JWT')

  useEffect(() => {
    fetch('http://localhost:3000/api/admin/sets', {
      method: "GET",
      headers: {Authorization: 'Bearer ' + token}
    }).then((res) => {
      console.log(res.status)
      if(res.status == 200) {
        res.json().then((setsData) => {
          setSetList(setsData.data)
        })
      }
    })
    fetch('http://localhost:3000/api/admin/bsets', {
      method: "GET",
      headers: {Authorization: 'Bearer ' + token}
    }).then((res) => {
      console.log(res.status)
      if(res.status == 200) {
        res.json().then((bsetsData) => {
          setBsetList(bsetsData.data)
        })
      }
    })
  }, [])

  function addSetToBSet(currentValue: string) {
    const selected = setList.filter((set: set) => set.name_en == currentValue)[0]
    const isAlreadyIn = selectedSets.filter((set: set) => set.name_en == currentValue).length != 0
    if(!isAlreadyIn){
      setSelectedSets(old => [...old, selected])
    }
  }

  function removeSetToBSet(currentValue: string) {
    setSelectedSets(old => old.filter((set: set) => set.name_en != currentValue))
  }

  function createBSet(){
    const bset_name = BSetNameInput.current!.value

    const data : { bset_name: string, selected_sets: string[] } = { bset_name , selected_sets: [] }
    selectedSets.forEach((set: set) => data.selected_sets.push(set.id))

    BSetNameInput.current!.value = ""

    fetch('http://localhost:3000/api/admin/bsets/create', {
      method: "POST",
      headers: {Authorization: 'Bearer ' + token},
      body: JSON.stringify(data)
    }).then((res) => {
      if(res.status == 200) {
        res.json().then((apiData) => {
          const addedBset : bsetExtended = { sanitized_name: bset_name.replace(/[^a-zA-Z0-9]/gim,"-").toLowerCase() ,id: apiData.data, name: bset_name, sets: selectedSets } 
          setBsetList(old => [...old, addedBset])
          setSelectedSets([])
        })
      }
    })
  }

  function deleteBSet(id: string){
    fetch('http://localhost:3000/api/admin/bsets/delete', {
      method: "DELETE",
      headers: {Authorization: 'Bearer ' + token},
      body: JSON.stringify({ id })
    }).then((res) => {
      if(res.status == 200) {
        setBsetList(old => old.filter((bset) => bset.id != id))
      }
    })
  }

  return (
      <div className="flex flex-col w-full items-center mt-32">
        <div className="max-w-3xl w-full flex flex-col items-center gap-8">
          <Dialog>
            <DialogTrigger asChild><Button>Créer un nouveau BSet</Button></DialogTrigger>
            <DialogContent>
              <DialogHeader>
                <DialogTitle>Créer un nouveau BSet</DialogTitle>
              </DialogHeader>
              <div className="flex flex-col gap-4">
                <Input ref={BSetNameInput} placeholder="Nom du BSet" />
                <div className="flex flex-row flex-wrap gap-4">
                  {selectedSets.map((set) => (
                    <Badge onClick={() => {removeSetToBSet(set.name_en)}} className="flex flex-row gap-2 cursor-pointer" key={set.id}><span>{set.name_en}</span><span>x</span></Badge>
                  ))}
                </div>
                <Command>
                  <CommandInput placeholder="Rechercher une extension..." />
                  <CommandList>
                    <CommandEmpty>Pas d’extension trouvée...</CommandEmpty>
                    <CommandGroup>
                      {setList.map((set) => (
                        <CommandItem
                          key={set.id}
                          value={set.name_en}
                          onSelect={addSetToBSet}
                        >
                          <img src={set.icon_svg_uri} loading="lazy" className="w-8 h-8" />
                          {set.name_en}
                        </CommandItem>
                      ))}
                    </CommandGroup>
                  </CommandList>
                </Command>
              </div>
              <DialogFooter className="sm:justify-start">
                <DialogClose asChild>
                  <Button type="button" variant="secondary">
                    Close
                  </Button>
                </DialogClose>
                <DialogClose asChild>
                  <Button onClick={createBSet} type="button" variant="secondary">
                    Save
                  </Button>
                </DialogClose>
              </DialogFooter>
            </DialogContent>
          </Dialog>
          <Table className="max-w-3xl">
            <TableHeader>
              <TableRow>
                <TableHead>Name</TableHead>
                <TableHead>Extensions</TableHead>
                <TableHead>Actions</TableHead>
              </TableRow>
            </TableHeader>
            <TableBody>
              { bsetList.map((bset) => (
                <TableRow key={bset.id}>
                  <TableCell>{bset.name}</TableCell>
                  <TableCell className="flex flex-row gap-4 items-center mt-2 flex-wrap">
                    { bset.sets.map((set) => (
                      <Badge key={set.id}>{set.name_en}</Badge>
                    ))}
                  </TableCell>
                  <TableCell><Button onClick={() => {deleteBSet(bset.id)}} variant="destructive">Supprimer</Button></TableCell>
                </TableRow>
              ))}
            </TableBody>
          </Table>
        </div>
      </div>
  );
}