GitFOSS

// 1st-party
import type { ReactIsland } from "@ethicdevs/react-monolith";
// 3rd-party
import React, { useCallback, useEffect, useState } from "react";
// generated via script[generate:prisma]
import type { Organization, ResourceVisibility } from "@prisma/client";
// app
import { Button } from "../components/Button.styled";
import { Grid } from "../components/Grid";
import { slugify } from "../utils/shared";

export interface RepositoryForkFormProps {
  disabled?: boolean;
  availableParentOrgs: Organization[];
  editMode?: boolean;
  initialValues?: {
    target_org_slug: string;
    target_repo_display_name: string;
    target_repo_slug: string;
    target_repo_visibility: ResourceVisibility;
  };
}

const RepositoryForkForm: ReactIsland<RepositoryForkFormProps> = ({
  availableParentOrgs,
  disabled = false,
  editMode = false,
  initialValues = undefined,
}) => {
  const [displayName, setDisplayName] = useState<string>(
    initialValues?.target_repo_display_name || ""
  );
  const [slug, setSlug] = useState<string>(
    initialValues?.target_repo_slug ||
      slugify(initialValues?.target_repo_display_name || "")
  );
  const [slugInputDirty, setSlugInputDirty] = useState<boolean>(false);

  editMode;

  const onDisplayNameInputChange = useCallback(
    (ev: React.ChangeEvent<HTMLInputElement>) => {
      if (ev == null || ev.target == null || ev.target.value == null) {
        return undefined;
      }
      setDisplayName(ev.target.value);
      return undefined;
    },
    [setDisplayName]
  );

  const onSlugInputChange = useCallback(
    (ev: React.ChangeEvent<HTMLInputElement>) => {
      if (ev == null || ev.target == null || ev.target.value == null) {
        return undefined;
      }
      setSlug(ev.target.value);
      // only once, avoid useless re-renders for nothing
      if (slugInputDirty === false) {
        setSlugInputDirty(true);
      }
      return undefined;
    },
    [slugInputDirty, setSlug, setSlugInputDirty]
  );

  // An effect that will update the slug if it isn't dirty when the display name
  // input value (displayName) has changed.
  useEffect(() => {
    const nextSlug = slugify(displayName);
    if (
      slugInputDirty === false &&
      displayName != null &&
      displayName.trim() !== "" &&
      nextSlug !== slug
    ) {
      setSlug(nextSlug);
    }
  }, [displayName, slug, slugInputDirty, setSlug]);

  return (
    <div>
      <fieldset>
        <legend>Fork details</legend>
        {/* Repository Name */}
        <Grid.Col fluid nowrap>
          <label htmlFor={"target_repo_display_name"}>
            Repository Name <span>(*)</span>:
          </label>
          <input
            disabled={disabled}
            name={"target_repo_display_name"}
            onChange={onDisplayNameInputChange}
            placeholder={"i.e. My Super Project"}
            required
            style={styles.inputMaxWidth}
            type={"text"}
            value={displayName}
          />
        </Grid.Col>
        <Grid.Row fluid nowrap alignItems={"center"}>
          {/* Parent Organization Select */}
          <Grid.Col fluid nowrap>
            <label htmlFor={"target_org_slug"}>
              Owner Organization <span>(*)</span>:
            </label>
            <select
              disabled={disabled}
              defaultValue={
                availableParentOrgs.length >= 1
                  ? availableParentOrgs[0].slug
                  : initialValues?.target_org_slug
              }
              name={"target_org_slug"}
              required
              style={styles.inputMaxWidth}
            >
              {availableParentOrgs.map((org) => (
                <option key={org.id} value={org.slug}>
                  {org.displayName || org.slug}
                </option>
              ))}
            </select>
          </Grid.Col>
          {/* Repository Slug */}
          <Grid.Col fluid nowrap>
            <label htmlFor={"target_repo_slug"}>
              Repository Slug <span>(*)</span>:
            </label>
            <input
              disabled={disabled}
              name={"target_repo_slug"}
              onChange={onSlugInputChange}
              placeholder={"i.e. my-super-project"}
              required
              style={styles.inputMaxWidth}
              type={"text"}
              value={slug}
            />
          </Grid.Col>
        </Grid.Row>
        {/* Repository Visibility */}
        <Grid.Col fluid nowrap>
          <label htmlFor={"target_repo_visibility"}>
            Repository Visibility <span>(*)</span>:
          </label>
          <select
            disabled={disabled}
            defaultValue={initialValues?.target_repo_visibility || "PRIVATE"}
            name={"target_repo_visibility"}
            style={styles.inputMaxWidth}
          >
            <option key={"private"} value={"PRIVATE"}>
              Private
            </option>
            <option key={"unlisted"} value={"UNLISTED"}>
              Unlisted
            </option>
            <option key={"public"} value={"PUBLIC"}>
              Public
            </option>
          </select>
        </Grid.Col>
      </fieldset>
      {/* Submit Button */}
      <Button style={styles.inputMaxWidth} type={"submit"} disabled={disabled}>
        Fork Repository!
      </Button>
    </div>
  );
};

const styles = {
  alignSelfEnd: {
    alignSelf: "flex-end",
  },
  inputMaxWidth: {
    minWidth: "100%",
    width: "100%",
    maxWidth: "100%",
  },
  labelFlexOne: {
    flex: 1,
    marginRight: 8,
  },
  shortDescriptionTextArea: {
    minHeight: 75,
    height: 75,
    maxHeight: 75,
  },
};

RepositoryForkForm.displayName = "RepositoryForkForm";
export default RepositoryForkForm;