Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Bust cover image cache after uploading a new image #8489

Closed
wants to merge 3 commits into from
Closed

Bust cover image cache after uploading a new image #8489

Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
4f82cbc
rm tooltip after cover image load
Jacobjeevan Sep 5, 2024
abe503c
Cover Image
Jacobjeevan Sep 17, 2024
872e353
Merge branch 'develop' into issues/8480/tooltip-Removal-CoverImage
Jacobjeevan Sep 17, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
31 changes: 28 additions & 3 deletions src/Components/Facility/FacilityHome.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ import { NonReadOnlyUsers } from "../../Utils/AuthorizeFor";
import { FacilityModel } from "./models";
import { FACILITY_FEATURE_TYPES, USER_TYPES } from "../../Common/constants";
import DropdownMenu, { DropdownItem } from "../Common/components/Menu";
import { lazy, useState } from "react";
import { lazy, useEffect, useState } from "react";

import ButtonV2 from "../Common/components/ButtonV2";
import CareIcon from "../../CAREUI/icons/CareIcon";
Expand Down Expand Up @@ -58,6 +58,8 @@ export const FacilityHome = ({ facilityId }: Props) => {
const [openDeleteDialog, setOpenDeleteDialog] = useState(false);
const [editCoverImage, setEditCoverImage] = useState(false);
const [coverImageEdited, setCoverImageEdited] = useState(false);
const [coverImageLoaded, setCoverImageLoaded] = useState(false);
const [coverImageUrl, setCoverImageUrl] = useState<string | undefined>("");
Comment on lines +61 to +62
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

And these unnecessay useStates too could be removed that way.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Well, coverImageLoaded is set based on the image load (addressing #8480 (comment)). Can remove the second one though.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

but that state is being used only to decide whether the tooltip should be shown or not right? but when we are going to remove the tooltip anyhow, this state is not needed in the first place right?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

but that state is being used only to decide whether the tooltip should be shown or not right? but when we are going to remove the tooltip anyhow, this state is not needed in the first place right?

Yep, but are we removing the tool tip entirely? I thought it was to remove tool tip on successful image load.

yes, but ensure the loading state is shown in the image edit modal till it completes.

Hmm, well the modal closes immediately, so shouldn't be an issue. On a side note, we could use the tool tip here (and remove the coverImageLoaded state).

image

const authUser = useAuthUser();

const {
Expand All @@ -75,6 +77,27 @@ export const FacilityHome = ({ facilityId }: Props) => {
},
});

const fetchImage = async () => {
try {
let imageUrl = facilityData?.read_cover_image_url;
if (imageUrl) {
await fetch(`${imageUrl}`, {
headers: { "Force-Revalidate": "1" },
credentials: "include",
mode: "no-cors",
Comment on lines +86 to +87
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

are these headers required? how does this differ from with and without these?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

credentials isn't required, mode is though; was getting 502 error for the fetch call without it.

});
imageUrl += "?" + Date.now();
setCoverImageUrl(imageUrl);
Comment on lines +89 to +90
Copy link
Member

@rithviknishad rithviknishad Sep 17, 2024 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Let's not add query params. We know for sure that it always fetches the latest image with query params present. There's no need to perform the vary header method when giving query params right.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Will remove 👍 I added query params since fetch/vary header behavior wasn't consistent on Firefox (though it's fine on Safari).

}
} catch (error) {
return;
}
};

useEffect(() => {
setCoverImageUrl(facilityData?.read_cover_image_url);
}, [facilityData?.read_cover_image_url]);

const handleDeleteClose = () => {
setOpenDeleteDialog(false);
};
Expand Down Expand Up @@ -125,11 +148,12 @@ export const FacilityHome = ({ facilityId }: Props) => {
const CoverImage = () => (
<>
<img
src={`${facilityData?.read_cover_image_url}`}
src={coverImageUrl}
alt={facilityData?.name}
className="h-full w-full rounded-lg object-cover"
onLoad={() => setCoverImageLoaded(true)}
/>
{coverImageEdited && (
{coverImageEdited && !coverImageLoaded && (
<div className="absolute inset-x-0 bottom-0 w-full rounded-b-md bg-black/70 px-2 pb-0.5 backdrop-blur-sm">
<span className="text-center text-xs font-medium text-secondary-100">
{t("cover_image_updated_note")}
Jacobjeevan marked this conversation as resolved.
Show resolved Hide resolved
Expand Down Expand Up @@ -163,6 +187,7 @@ export const FacilityHome = ({ facilityId }: Props) => {
open={editCoverImage}
onSave={() => {
facilityFetch();
fetchImage();
setCoverImageEdited(true);
Comment on lines 189 to 191
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can we wait till the fetch image is done (in the loading state itself of the image edit modal) before running facility fetch?

Copy link
Contributor Author

@Jacobjeevan Jacobjeevan Sep 18, 2024 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Sure, so something like this?

image

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

yes, but ensure the loading state is shown in the image edit modal till it completes.

}}
onClose={() => setEditCoverImage(false)}
Expand Down
Loading