Function HostedOptions

app/src/components/ShareDialog.tsx:450–511

()

}

function HostedOptions() {
  const id = useDocDetails("id");
  if (typeof id !== "number") throw new Error("id is not a number");

  const isPublic = useDocDetails("isPublic");
  const publicId = useDocDetails("publicId");

  const makePublic = useMutation(
    "makeChartPublic",
    async (isPublic: boolean) => makeChartPublic(id, isPublic),
    {
      onSuccess: (result) => {
        if (!result) return;
        useDoc.setState(
          (state) => {
            return produce(state, (draft) => {
              draft.details.isPublic = result.isPublic;
              if (result.publicId) draft.details.publicId = result.publicId;
            });
          },
          false,
          "HostedOptions/makePublic"
        );
      },
    }
  );
  return (
    <Column>
      <Title>
        <Trans>Public</Trans>
      </Title>
      <Box flow="column" content="normal start" items="center stretch" gap={2}>
        <label htmlFor="isPublic" className="text-sm">
          <Trans>Make publicly accessible</Trans>
        </label>
        <input
          type="checkbox"
          name="isPublic"
          id="isPublic"
          defaultChecked={isPublic}
          data-session-activity="Toggle Make Public"
          onChange={(e) => {
            makePublic.mutate(e.target.checked);
          }}
        />
        {makePublic.isLoading && (
          <Spinner r={6} s={2} c="var(--color-highlightColor)" />
        )}
      </Box>
      {isPublic && (
        <Box>
          <LinkCopy
            value={`${window.location.origin}/p/${publicId}`}
            title={t`Public`}
            rawTitle="Public"
            ariaLabel="Copy Public Link"
          />
        </Box>