ramda#head TypeScript Examples

export function getNextSteps(
	missingVariables: Array<MissingVariables>
): Array<DottedName> {
	const byCount = ([, [count]]: [unknown, [number]]) => count
	const byScore = ([, [, score]]: [unknown, [unknown, number]]) => score

	const missingByTotalScore = reduce<MissingVariables, MissingVariables>(
		mergeWith(add),
		{},
		missingVariables
	)

	const innerKeys = flatten(map(keys, missingVariables)),
		missingByTargetsAdvanced = Object.fromEntries(
			Object.entries(countBy(identity, innerKeys)).map(
				// Give higher score to top level questions
				([name, score]) => [
					name,
					score + Math.max(0, 4 - name.split('.').length),
				]
			)
		)

	const missingByCompound = mergeWith(
			pair,
			missingByTargetsAdvanced,
			missingByTotalScore
		),
		pairs = toPairs<number>(missingByCompound),
		sortedPairs = sortWith([descend(byCount), descend(byScore) as any], pairs)
	return map(head, sortedPairs) as any
}

ConfirmPageSetting = ({ confirmPageIcon, setConfirmPageIcon }: Props) => {
  const { t } = useTranslation("confirm_page_setting");
  const handleFileSelected = (e: React.ChangeEvent<HTMLInputElement>) => {
    const files = Array.from(e.target.files || []);
    const img = head(files);
    if (!img) {
      setConfirmPageIcon(null);
    } else {
      const reader = new FileReader();
      reader.readAsDataURL(img);
      reader.onload = () => setConfirmPageIcon(String(reader.result));
    }
  };

  return (
    <PageWrapper>
      <Header backPath="/" name={t("name")} />
      <ContentWrapper>
        <StyledInputWrapper>
          <div>{t("form.custom_icon")}</div>
          <StyledFileInput
            type="file"
            name="avatar"
            accept="image/png, image/jpeg"
            onChange={handleFileSelected}
          />
        </StyledInputWrapper>
        {confirmPageIcon && (
          <Actions>
            <Button
              variant="contained"
              size="small"
              onClick={() => {
                setConfirmPageIcon(null);
              }}
              disabled={!confirmPageIcon}
            >
              {t("button.remove_icon")}
            </Button>
          </Actions>
        )}
        <PreviewPageWrapper>
          <ConfirmPage
            confirmPageIcon={confirmPageIcon}
            travelRecord={{
              id: uuid(),
              nameEn: t("message.test_place"),
              type: locationType.PLACE,
              inputType: travelRecordInputType.MANUALLY,
              inTime: dayjs().toISOString(),
            }}
            readOnly
          />
        </PreviewPageWrapper>
      </ContentWrapper>
    </PageWrapper>
  );
}

QRGenerator = () => {
  const { t } = useTranslation("qr_generator");
  const imgRef = useRef<HTMLImageElement>(null);
  const fileFieldRef = React.useRef<HTMLInputElement>(null);

  const [showPreview, setShowPreview] = useState(false);
  const [qrCode, setQrCode] = useState<QrCodeWithLogo | null>(null);
  const [state, setState] = useSetState<EnhancedEncodeParam>({
    typeEn: "Stores/Shopping Malls",
    typeZh: "商店/商場",
    nameEn: "CityWalk",
    nameZh: "荃新天地",
    type: "IMPORT",
    venueCode: "0",
    venueID: "WHBvLDSa",
    addressEn: "1 & 18 Yeung Uk Rd, Tsuen Wan, Hong Kong",
    addressZh: "荃灣楊屋道1號",
    customImg: null,
  });

  const isVenueCodeValid = state.venueCode.length === 1;
  const isVenueIdValid = state.venueID.length === 8;

  const isValidData = isVenueCodeValid && isVenueIdValid;

  useEffect(() => {
    if (!imgRef.current || !isValidData) return;
    const encodedString = qrEncode(state);

    const qrCode = new QrCodeWithLogo({
      image: imgRef.current,
      content: encodedString,
      width: 380,
      logo: {
        src: state.customImg || baseIcon,
        logoRadius: 8,
        borderSize: 0,
      },
    });

    qrCode.toImage();
    setQrCode(qrCode);
  }, [state, isValidData]);

  const handleFileSelected = (e: React.ChangeEvent<HTMLInputElement>) => {
    const files = Array.from(e.target.files || []);
    const img = head(files);
    if (!img) {
      setState({ customImg: null });
    } else {
      const reader = new FileReader();
      reader.readAsDataURL(img);
      reader.onload = () => setState({ customImg: String(reader.result) });
    }
  };

  const handleDownload = () => {
    if (!qrCode) return;
    qrCode.downloadImage("QR Code");
  };

  return (
    <PageWrapper>
      <Header backPath="/" name={t("name")} />
      <ContentWrapper id="scroll">
        <StyledForm>
          <StyledTextField
            label={t("form.typeZh")}
            value={state.typeZh}
            onChange={(e) => {
              setState({ typeZh: e.target.value });
            }}
          />
          <StyledTextField
            label={t("form.typeEn")}
            value={state.typeEn}
            onChange={(e) => {
              setState({ typeEn: e.target.value });
            }}
          />
          <StyledTextField
            label={t("form.nameZh")}
            value={state.nameZh}
            onChange={(e) => {
              setState({ nameZh: e.target.value });
            }}
          />
          <StyledTextField
            label={t("form.nameEn")}
            value={state.nameEn}
            onChange={(e) => {
              setState({ nameEn: e.target.value });
            }}
          />
          <StyledTextField
            label={t("form.addressZh")}
            value={state.addressZh}
            onChange={(e) => {
              setState({ addressZh: e.target.value });
            }}
          />
          <StyledTextField
            label={t("form.addressEn")}
            value={state.addressEn}
            onChange={(e) => {
              setState({ addressEn: e.target.value });
            }}
          />
          <StyledTextField
            label={t("form.type")}
            value={state.type}
            onChange={(e) => {
              setState({ type: e.target.value });
            }}
          />
          <StyledTextField
            label={t("form.venue_code")}
            value={state.venueCode}
            onChange={(e) => {
              setState({ venueCode: e.target.value });
            }}
            error={!isVenueCodeValid}
            inputProps={{
              maxLength: 1,
            }}
          />
          <StyledTextField
            label={t("form.venue_id")}
            value={state.venueID}
            onChange={(e) => {
              setState({ venueID: e.target.value });
            }}
            error={!isVenueIdValid}
            inputProps={{
              maxLength: 8,
            }}
          />
          <StyledInputWrapper>
            <div>{t("form.custom_icon")}</div>
            <StyledFileInput
              type="file"
              name="avatar"
              accept="image/png, image/jpeg"
              ref={fileFieldRef}
              onChange={handleFileSelected}
            />
          </StyledInputWrapper>
        </StyledForm>
        <Divider />
        <Actions>
          <ButtonGroup aria-label="outlined primary button group">
            <Button
              variant="contained"
              size="small"
              startIcon={<SaveIcon />}
              onClick={handleDownload}
              disabled={!isValidData}
            >
              {t("global:button.save")}
            </Button>
            <Button
              variant="contained"
              size="small"
              startIcon={<SaveIcon />}
              onClick={() => {
                setShowPreview(true);
              }}
              disabled={!isValidData}
            >
              {t("global:button.preview")}
            </Button>
          </ButtonGroup>
        </Actions>
        <StyledQrCode ref={imgRef} alt="qrCode" />
      </ContentWrapper>
      {showPreview && (
        <QRPreview
          data={state}
          onLeave={() => {
            setShowPreview(false);
          }}
        />
      )}
    </PageWrapper>
  );
}