hunk.code_window:     if (!jsActionsCall) return;
       yield put(setAppMode(APP_MODE.PUBLISHED));
       yield put({
         type: ReduxActionTypes.INITIALIZE_PAGE_VIEWER_SUCCESS,
       });
       PerformanceTracker.stopAsyncTracking(
  
hunk.labels: keep keep keep keep add keep keep keep keep
hunk.after_edit:     yield put(fetchCommentThreadsInit());
  
hunk.file_path: app/client/src/sagas/InitSagas.ts
hunk.type: add
file: import React, { useState, useRef, useEffect } from "react";
  import { updatePhoto, removePhoto } from "actions/userActions";
  import { useDispatch } from "react-redux";
  
  import DisplayImageUpload from "components/ads/DisplayImageUpload";
  
  import UserApi from "api/UserApi";
  import Uppy from "@uppy/core";
  
  function FormDisplayImage() {
    const [file, setFile] = useState<any>();
    const [imageURL, setImageURL] = useState(`/api/${UserApi.photoURL}`);
    const dispatch = useDispatch();
    const dispatchActionRef = useRef<(uppy: Uppy.Uppy) => void | null>();
  
    const onUploadComplete = (uppy: Uppy.Uppy) => {
      uppy.reset();
      setImageURL(`/api/${UserApi.photoURL}?${new Date().getTime()}`);
    };
  
    const onSelectFile = (file: any) => {
      setFile(file.data);
    };
  
    useEffect(() => {
      dispatchActionRef.current = (uppy: Uppy.Uppy) => {
        dispatch(updatePhoto({ file, callback: () => onUploadComplete(uppy) }));
      };
    }, [file]);
  
    const upload = (uppy: Uppy.Uppy) => {
      if (typeof dispatchActionRef.current === "function")
        dispatchActionRef.current(uppy);
    };
  
    const removeProfileImage = () => {
      dispatch(
        removePhoto(() => {
          setImageURL(`/api/${UserApi.photoURL}?${new Date().getTime()}`);
        }),
      );
    };
  
    return (
      <DisplayImageUpload
        onChange={onSelectFile}
        onRemove={removeProfileImage}
        submit={upload}
        value={imageURL}
      />
    );
  }
  
  export default FormDisplayImage;
  