CODEWITHSUNDEEP
reactjstypescript
Jan Bo
Jan Bo

Reputation: 85

reload react component without reloading the page

Hi i have component and function "handleAvatarUpload". After onChange i want to reload only component not whole page. Now after change function reload whole page "only for tests". How can i reload only a component in the same place where now i put page reload?


import { useUpdateSpecialistProfileMutation } from 'api-hooks/updateSpecialistProfile/updateSpecialistProfile.generated';
import { useS3DirectUpload } from 'hooks';
import { EditIcon } from 'icons';
import { FileTypeEnum } from 'interfaces';

import { AvatarEditIcon, ImageUpload } from './AvatarEdit.styled';

interface AvatarEditProps {
  onChange: (fileId: string) => void;
  userId?: string;
  avatarPictureFileId?: string;
  userName?: ReactNode;
  isDisabled?: boolean;
  fileId?: string;
}

const AvatarEdit = ({ onChange, userId, isDisabled }: AvatarEditProps) => {
  const { upload: uploadToS3 } = useS3DirectUpload();
  const [updateSpecialistProfile] = useUpdateSpecialistProfileMutation();

  const handleAvatarUpload = async (event: React.ChangeEvent<HTMLInputElement>) => {
    if (event.target.files === null) {
      return;
    }
    const file = event.target.files[0];
    try {
      const uploadResult = await uploadToS3(file, FileTypeEnum.AvatarImage);
      await updateSpecialistProfile({
        variables: { input: { avatarPictureFileId: uploadResult.fileId }, userId },
      });
      onChange(uploadResult.fileId);
      window.location.reload();
    } catch (error) {
      console.warn(error);
    }
  };

  return (
    <ImageUpload>
      <label htmlFor="file-input">
        <AvatarEditIcon isDisabled={isDisabled}>
          <EditIcon />
        </AvatarEditIcon>
      </label>
      {isDisabled ? null : (
        <input
          accept="image/jpeg, image/png"
          id="file-input"
          onChange={handleAvatarUpload}
          type="file"
        />
      )}
    </ImageUpload>
  );
};

export default AvatarEdit;

i have component where image state was stored but when i edit image by component above nothing happens.


import { useFileUrlLazyQuery } from 'api-hooks/fileUrl/fileUrl.generated';

interface ImageProps {
  alt: string;
  fileId?: string;
  fileUrl?: string;
  className?: string;
}

const Image: React.FC<ImageProps> = ({ alt, fileId, fileUrl, className }) => {
  const [resolvedFileUrl, setResolvedFileUrl] = useState<string | undefined>(fileUrl);
  const [executeFileUrlLazyQuery, { data, loading }] = useFileUrlLazyQuery();

  useEffect(() => {
    if (!loading && fileId) {
      executeFileUrlLazyQuery({
        variables: {
          fileId,
        },
      });
    }
  }, [fileId, loading, executeFileUrlLazyQuery]);

  useEffect(() => {
    if (data && data.fileUrl) {
      setResolvedFileUrl(data.fileUrl);
    }
  }, [data]);

  if (resolvedFileUrl) {
    return null;
  }

  return <img alt={alt} className={className} src={resolvedFileUrl} />;
};

export default Image;

Upvotes: 2

Views: 9108

Answers (2)

Muhammad Awais
Muhammad Awais

Reputation: 107

jsut add this line in your handleAvatarUpload function

event.preventDefault();

Upvotes: 0

Innomight
Innomight

Reputation: 556

Update the state using setState. or use React hooks like -

useEffect(()=> {
    fetchData();
}, [data]);

this will reload whenever data is updated.

Upvotes: 0

Related Questions