odd-box 0.1.10

a dead simple reverse proxy server and web server
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103

import { BackendSheet } from "@/components/sheet/backend_sheet/backend_sheet";
import {
  Table,
  TableBody,
  TableCell,
  TableFooter,
  TableRow,
} from "@/components/table/table";
import { Backend, RemoteSiteConfig } from "@/generated-api";
import useSiteMutations from "@/hooks/use-site-mutations";
import { DiamondPlus } from "lucide-react";
import { useState } from "react";

type BackendModalState = {
    show: boolean;
    backend: Backend | undefined;
    listIndex: number;
  };

export const BackendsTable = ({
  site,
}: {
  site:RemoteSiteConfig
}) => {
    const { updateRemoteSite } = useSiteMutations();

    const [backendModalState, setBackendModalState] = useState<BackendModalState>(
        {
          backend: undefined,
          show: false,
          listIndex: -1,
        }
      );
  const newBackendClicked = async () => {
    await updateRemoteSite.mutateAsync({
        hostname: site.host_name,
        siteSettings: {
          ...site,
          backends: [
            ...site.backends,
            {
              address: "NEW_BACKEND",
              port: 8080,
              hints: [],
              https: false,
            },
          ],
        },
      });
  };

  const footerClassNames = ["hover:cursor-pointer"];

  if (site.backends?.length === 0) {
    footerClassNames.push("border-0");
  }

  return (
    <>
      <Table>
        <TableBody>
          {site.backends?.map((backend,listIndex) => (
            <TableRow
              key={JSON.stringify({backend,listIndex})}
              className="hover:cursor-pointer"
              onClick={() => {
                setBackendModalState({
                    backend,
                    show: true,
                    listIndex,
                  });
              }}
            >
              <TableCell className="font-medium">{backend.address}:{backend.port}</TableCell>
            </TableRow>
          ))}
        </TableBody>
        <TableFooter className={footerClassNames.join(" ")}>
          <TableRow onClick={newBackendClicked}>
            <TableCell className="bg-transparent" colSpan={3}>
              <div className="flex items-center gap-2 justify-center">
                <DiamondPlus />
                <span>Add new backend</span>
              </div>
            </TableCell>
          </TableRow>
        </TableFooter>
      </Table>
      <BackendSheet
        listIndex={backendModalState.listIndex}
        key={JSON.stringify(backendModalState)}
        site={site}
        show={backendModalState.show}
        onClose={() =>
          setBackendModalState((old) => ({
            ...old,
            show: false,
          }))
        }
      />
    </>
  );
};