@material-ui/icons#ArrowBack TypeScript Examples

BackButton = ({ siteId, bgColor, classes }: BackButtonProps) => {
  return (
    <Box bgcolor={bgColor}>
      <Container>
        <Grid container className={classes.backButtonWrapper}>
          <Button
            color="primary"
            startIcon={<ArrowBack />}
            component={Link}
            to={`/sites/${siteId}`}
          >
            <Typography className={classes.backButtonText}>
              Back to Site
            </Typography>
          </Button>
        </Grid>
      </Container>
    </Box>
  );
}

export function HistoryHeader({ children }: Props): ReactElement {
  const classes = useStyles()
  const navigate = useNavigate()

  function goBack() {
    navigate(-1)
  }

  return (
    <Box mb={4}>
      <Grid container direction="row">
        <Box mr={2}>
          <div className={classes.pressable} onClick={goBack}>
            <ArrowBack className={classes.icon} />
          </div>
        </Box>
        <Typography variant="h1">{children}</Typography>
      </Grid>
    </Box>
  )
}

UploadMedia = ({
  siteId,
  siteName,
  changeTab,
  classes,
}: UploadMediaProps) => {
  const history = useHistory();
  const [files, setFiles] = useState<File[]>([]);
  const [previews, setPreviews] = useState<string[]>([]);
  const [metadata, setMetadata] = useState<Metadata[]>([]);
  const user = useSelector(userInfoSelector);
  const survey = useSelector(surveyDetailsSelector);
  const surveyPointOptions =
    useSelector(siteDetailsSelector)?.surveyPoints || [];
  const [alertMessage, setAlertMessage] = useState<string | null>(null);
  const [alertOpen, setAlertOpen] = useState<boolean>(false);
  const [loading, setLoading] = useState<boolean>(false);
  const [featuredFile, setFeaturedFile] = useState<number>(0);
  const missingObservations =
    metadata.findIndex((item) => item.observation === null) > -1;

  const handleFileDrop = useCallback(
    (acceptedFiles: File[], fileRejections) => {
      // TODO - add explicit error warnings.
      fileRejections.forEach((rejection: FileRejection) => {
        // eslint-disable-next-line no-console
        console.log(rejection.errors, rejection.file);
      });
      setFiles([...files, ...acceptedFiles]);
      setPreviews([
        ...previews,
        ...acceptedFiles.map((file) => URL.createObjectURL(file)),
      ]);
      setMetadata([
        ...metadata,
        ...acceptedFiles.map(() => ({
          observation: null,
          surveyPoint: "",
          comments: "",
        })),
      ]);
    },
    [files, previews, metadata]
  );

  const handleSurveyPointOptionAdd =
    (index: number) => (newPointName: string, newPoints: SurveyPoints[]) => {
      const newPointId = newPoints.find(
        (point) => point.name === newPointName
      )?.id;

      const newMetadata = metadata.map((item, key) =>
        key === index ? { ...item, surveyPoint: `${newPointId}` } : item
      );
      setMetadata(newMetadata);
    };

  const deleteCard = (index: number) => {
    setPreviews(previews.filter((item, key) => key !== index));
    setFiles(files.filter((item, key) => key !== index));
    setMetadata(metadata.filter((item, key) => key !== index));
    if (index === featuredFile) {
      setFeaturedFile(0);
    }
  };

  const removeCards = () => {
    setFiles([]);
    setMetadata([]);
    setPreviews([]);
  };

  const setFeatured = useCallback((index: number) => {
    setFeaturedFile(index);
  }, []);

  const onMediaSubmit = () => {
    const promises = files.map((file, index) => {
      const formData = new FormData();
      formData.append("file", file);
      return uploadServices
        .uploadMedia(formData, `${siteId}`, user?.token)
        .then((response) => {
          const url = response.data;
          const surveyId = survey?.id;
          const surveyMediaData: SurveyMediaData = {
            url,
            surveyPointId: metadata[index].surveyPoint
              ? parseInt(metadata[index].surveyPoint, 10)
              : (undefined as unknown as number),
            observations: metadata[index].observation,
            comments: metadata[index].comments || undefined,
            metadata: "{}",
            token: user?.token,
            featured: index === featuredFile,
            hidden: false,
          };
          return surveyServices.addSurveyMedia(
            `${siteId}`,
            `${surveyId}`,
            surveyMediaData
          );
        });
    });
    setLoading(true);
    Promise.all(promises)
      .then(() => {
        setFiles([]);
        setMetadata([]);
        setPreviews([]);
        setFeaturedFile(0);
        // eslint-disable-next-line fp/no-mutating-methods
        history.push(`/sites/${siteId}/survey_details/${survey?.id}`);
      })
      .catch((err) => {
        setAlertMessage(err.message);
        setAlertOpen(true);
      })
      .finally(() => setLoading(false));
  };

  const handleSurveyPointChange = (index: number) => {
    return (event: ChangeEvent<{ value: unknown }>) => {
      const surveyPoint = event.target.value as string;
      const newMetadata = metadata.map((item, key) => {
        if (key === index) {
          return {
            ...item,
            surveyPoint,
          };
        }
        return item;
      });
      setMetadata(newMetadata);
    };
  };

  const handleObservationChange = (index: number) => {
    return (event: ChangeEvent<{ value: unknown }>) => {
      const observation = event.target.value as SurveyMediaData["observations"];
      const newMetadata = metadata.map((item, key) => {
        if (key === index) {
          return {
            ...item,
            observation,
          };
        }
        return item;
      });
      setMetadata(newMetadata);
    };
  };

  const handleCommentsChange = (index: number) => {
    return (event: ChangeEvent<{ value: unknown }>) => {
      const comments = event.target.value as string;
      const newMetadata = metadata.map((item, key) => {
        if (key === index) {
          return {
            ...item,
            comments,
          };
        }
        return item;
      });
      setMetadata(newMetadata);
    };
  };

  const fileCards = previews.map((preview, index) => {
    return (
      <MediaCard
        key={preview}
        siteId={siteId}
        index={index}
        preview={preview}
        file={files[index]}
        surveyPointOptions={surveyPointOptions}
        handleSurveyPointOptionAdd={handleSurveyPointOptionAdd(index)}
        surveyPoint={metadata?.[index]?.surveyPoint || ""}
        observation={metadata?.[index]?.observation || ""}
        comments={metadata?.[index]?.comments || ""}
        deleteCard={deleteCard}
        setFeatured={setFeatured}
        featuredFile={featuredFile}
        handleCommentsChange={handleCommentsChange(index)}
        handleObservationChange={handleObservationChange(index)}
        handleSurveyPointChange={handleSurveyPointChange(index)}
      />
    );
  });

  return (
    <>
      {loading && <LinearProgress />}
      <Grid item xs={12}>
        <Collapse in={alertOpen}>
          <Alert
            severity="error"
            action={
              <IconButton
                aria-label="close"
                color="inherit"
                size="small"
                onClick={() => {
                  setAlertOpen(false);
                }}
              >
                <CloseIcon fontSize="inherit" />
              </IconButton>
            }
          >
            {alertMessage}
          </Alert>
        </Collapse>
      </Grid>
      <Grid className={classes.root} container justify="center" item xs={12}>
        <Grid container alignItems="center" item xs={10}>
          <Grid item>
            <IconButton
              edge="start"
              color="primary"
              aria-label="menu"
              onClick={() => changeTab(0)}
            >
              <ArrowBack />
            </IconButton>
          </Grid>
          <Grid item className={classes.siteName}>
            {siteName && (
              <Typography variant="h5">{`${siteName.toUpperCase()} MEDIA UPLOAD`}</Typography>
            )}
          </Grid>
        </Grid>
        <Grid container justify="center" item xs={4}>
          <Dropzone
            accept={["image/png", "image/jpeg", "image/gif"]}
            onDrop={handleFileDrop}
            maxSize={maxUploadSize}
          >
            {({ getRootProps, getInputProps }) => (
              <Grid
                container
                justify="center"
                {...getRootProps({ className: classes.dropzone })}
              >
                <input {...getInputProps()} />
                <Grid container justify="center" item xs={12}>
                  <CloudUploadOutlined fontSize="large" color="primary" />
                </Grid>
                <Grid container justify="center" item xs={12}>
                  <Typography variant="h5">
                    Drag and drop or click here
                  </Typography>
                </Grid>
                <Grid container justify="center" item xs={12}>
                  <Typography variant="subtitle2">
                    Supported formats: .jpg .png .gif Max 40mb.
                  </Typography>
                </Grid>
              </Grid>
            )}
          </Dropzone>
        </Grid>
        <Grid style={{ marginBottom: "2rem" }} container item xs={11} lg={9}>
          {fileCards}
        </Grid>
        {files && files.length > 0 && (
          <Grid
            style={{ margin: "4rem 0 2rem 0" }}
            container
            justify="flex-end"
            item
            xs={9}
          >
            <Button
              style={{ marginRight: "1rem" }}
              color="primary"
              variant="outlined"
              onClick={removeCards}
            >
              Cancel
            </Button>
            <Tooltip
              title={missingObservations ? "Missing Observation Info" : ""}
            >
              <div>
                <Button
                  disabled={loading || missingObservations}
                  onClick={onMediaSubmit}
                  color="primary"
                  variant="contained"
                >
                  {loading ? "Uploading..." : "Save"}
                </Button>
              </div>
            </Tooltip>
          </Grid>
        )}
      </Grid>
    </>
  );
}