Skip to content

Commit

Permalink
Promoted content (Doenet#2441)
Browse files Browse the repository at this point in the history
  • Loading branch information
@cqnykamp
cqnykamp authored Jul 6, 2024
1 parent 79d5f6c commit 84adf73
Show file tree
Hide file tree
Showing 14 changed files with 3,494 additions and 2,138 deletions.
4,213 changes: 2,448 additions & 1,765 deletions client/package-lock.json
View file

Large diffs are not rendered by default.

41 changes: 18 additions & 23 deletions client/src/Tools/_framework/Paths/Admin.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,22 +7,21 @@ import ActivityCard from "../../../_reactComponents/PanelHeaderComponents/Activi
import { MoveToGroupMenuItem } from "./Community";

export async function loader() {
const {
data: { isAdmin },
} = await axios.get(`/api/checkForCommunityAdmin`);
if (!isAdmin) {
throw Error("Page not available");
}

const { data: carouselGroups } = await axios.get(`/api/loadPromotedContent`);

const { data: recentActivities } = await axios.get(
`/api/getAllRecentPublicActivities`,
);
const { data: isAdminData } = await axios.get(`/api/checkForCommunityAdmin`);
const isAdmin = isAdminData.isAdmin;

let carouselGroups = [];
if (isAdmin) {
const carouselDataGroups = await fetch(`/api/loadPromotedContentGroups`);
const responseGroups = await carouselDataGroups.json();
carouselGroups = responseGroups.carouselGroups;
}

return {
publicActivities: recentActivities,
isAdmin,
carouselGroups,
};
}
Expand All @@ -47,7 +46,7 @@ const PortfolioGrid = styled.div`
`;

export function Admin() {
const { carouselGroups, isAdmin, publicActivities } = useLoaderData();
const { carouselGroups, publicActivities } = useLoaderData();

return (
<>
Expand Down Expand Up @@ -78,24 +77,20 @@ export function Admin() {
) : (
<>
{publicActivities.map((activity) => {
const imageLink = `/activityViewer/${activity.activityId}`;
const imageLink = `/activityViewer/${activity.id}`;

return (
<ActivityCard
key={`ActivityCard${activity.activityId}`}
key={`ActivityCard${activity.id}`}
imageLink={imageLink}
label={activity.name}
name={activity.name}
imagePath={activity.imagePath}
fullName={activity.owner.email}
fullName={activity.owner.name}
menuItems={
isAdmin ? (
<>
<MoveToGroupMenuItem
activityId={activity.activityId}
carouselGroups={carouselGroups}
/>
</>
) : null
<MoveToGroupMenuItem
activityId={activity.id}
carouselGroups={carouselGroups}
/>
}
/>
);
Expand Down
136 changes: 83 additions & 53 deletions client/src/Tools/_framework/Paths/Community.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -48,13 +48,15 @@ export async function action({ request }) {
homepage,
} = formObj;

// TODO: should this function exist?
// Could be bad pattern to catch all API errors as browser alerts
async function postApiAlertOnError(url, uploadData) {
try {
const response = await axios.post(url, uploadData);
return true;
} catch (e) {
console.log(e);
alert("Error - " + e.response?.data?.message);
alert("Error - " + e.response?.data);
return false;
}
}
Expand All @@ -78,48 +80,56 @@ export async function action({ request }) {
groupId,
direction,
});
case "New Group":
return postApiAlertOnError("/api/addPromotedContentGroup", {
groupName,
});
case "Rename Group":
case "New Group": {
return postApiAlertOnError("/api/addPromotedContentGroup", { groupName });
}
case "Rename Group": {
return postApiAlertOnError("/api/addPromotedContentGroup", {
groupName,
});
case "Promote Group":
}
case "Promote Group": {
// convert to real booleans
currentlyFeatured =
!currentlyFeatured || currentlyFeatured == "false" ? false : true;
homepage = !homepage || homepage == "false" ? false : true;
return postApiAlertOnError("/api/updatePromotedContentGroup", {
groupName,
groupId,
newGroupName,
currentlyFeatured,
homepage,
});
}
case "Delete Group": {
return postApiAlertOnError("/api/deletePromotedContentGroup", {
groupId,
});
}
}
}

//TODO: update to try/catch axios not fetch
export async function loader({ request }) {
const url = new URL(request.url);
const q = url.searchParams.get("q");

if (q) {
//Show search results
const { data: searchData } = await axios.get(
`/api/searchPublicContent?q=${q}`,
);

const { data: isAdminData } = await axios.get(
`/api/checkForCommunityAdmin`,
);
const isAdmin = isAdminData.isAdmin;
const {
data: { isAdmin },
} = await axios.get(`/api/checkForCommunityAdmin`);

let carouselGroups = [];
if (isAdmin) {
const carouselDataGroups = await fetch(`/api/loadPromotedContentGroups`);
const responseGroups = await carouselDataGroups.json();
carouselGroups = responseGroups.carouselGroups;
const carouselGroupsData = await axios.get(
`/api/loadPromotedContentGroups`,
);
carouselGroups = carouselGroupsData.data;
}

return {
q,
searchResults: searchData,
Expand All @@ -131,8 +141,7 @@ export async function loader({ request }) {
`/api/checkForCommunityAdmin`,
);
const isAdmin = isAdminData.isAdmin;
const response = await fetch("/api/loadPromotedContent");
const { carouselData } = await response.json();
const { data: carouselData } = await axios.get("/api/loadPromotedContent");
return { carouselData, isAdmin };
}
}
Expand Down Expand Up @@ -178,7 +187,8 @@ export function MoveToGroupMenuItem({ activityId, carouselGroups }) {
fetcher.submit(
{
_action: "Promote Group",
groupName: groupInfo.groupName,
// groupName: groupInfo.groupName,
groupId: groupInfo.promotedGroupId,
currentlyFeatured,
homepage: false,
},
Expand All @@ -197,7 +207,7 @@ export function MoveToGroupMenuItem({ activityId, carouselGroups }) {
);
};

const promoteContent = (groupInfo) => {
const promoteContent = async (groupInfo) => {
const uploadData = {
groupId: groupInfo.promotedGroupId,
activityId,
Expand All @@ -209,7 +219,7 @@ export function MoveToGroupMenuItem({ activityId, carouselGroups }) {
})
.catch((e) => {
console.log(e);
alert("Error - " + e.response.data.message);
alert("Error - " + e.response?.data);
});
};

Expand All @@ -229,7 +239,7 @@ export function MoveToGroupMenuItem({ activityId, carouselGroups }) {
fetcher.submit(
{
_action: "Promote Group",
groupName: groupInfo.groupName,
groupId: groupInfo.promotedGroupId,
currentlyFeatured: groupInfo.currentlyFeatured,
newGroupName,
homepage: false,
Expand All @@ -239,6 +249,21 @@ export function MoveToGroupMenuItem({ activityId, carouselGroups }) {
}
};

const deleteGroup = (groupId, groupName) => {
const shouldDelete = confirm(
`Are you sure you want to delete ${groupName}? You can't undo this action afterwards.`,
);
if (shouldDelete) {
fetcher.submit(
{
_action: "Delete Group",
groupId,
},
{ method: "post" },
);
}
};

return (
<>
<MenuItem ref={btnRef} onClick={onOpen}>
Expand All @@ -264,7 +289,7 @@ export function MoveToGroupMenuItem({ activityId, carouselGroups }) {
{carouselGroups.map((group) => {
return (
<Button
mergin="5px"
margin="5px"
key={group.groupName}
onClick={() => promoteContent(group)}
>
Expand All @@ -286,7 +311,8 @@ export function MoveToGroupMenuItem({ activityId, carouselGroups }) {
return (
<Wrap key={group.promotedGroupId}>
<Checkbox
isChecked={group.currentlyFeatured == "1"}
isDisabled={group.homepage}
isChecked={group.currentlyFeatured}
name={group.groupId}
onChange={(evt) =>
promoteGroup(group, evt.target.checked)
Expand All @@ -304,6 +330,14 @@ export function MoveToGroupMenuItem({ activityId, carouselGroups }) {
<Button onClick={() => moveGroup(group, "down")}>
↓
</Button>
<Button
isDisabled={group.homepage}
onClick={() =>
deleteGroup(group.promotedGroupId, group.groupName)
}
>
Delete
</Button>
</Wrap>
);
})}
Expand Down Expand Up @@ -644,30 +678,26 @@ export function Community() {
show to other users as carousels
</Text>
) : null}
{Object.keys(carouselData)
.map((groupName) => {
return { activities: carouselData[groupName], groupName };
})
{carouselData
.sort((a, b) => {
if (a.activities[0].groupName == "Homepage") return -1;
else if (b.activities[0].groupName == "Homepage") return 1;
else
return a.activities[0].currentlyFeatured >
b.activities[0].currentlyFeatured
? -1
: 1;
if (a.homepage) return -1;
else if (b.homepage) return 1;
else if (a.currentlyFeatured && !b.currentlyFeatured) return -1;
else if (!a.currentlyFeatured && b.currentlyFeatured) return 1;
else return 0;
})
.map((groupInfo) => {
let groupName = groupInfo.groupName;
const group = groupInfo.activities;
let notPromoted = false;
if (!isAdmin && group[0].groupName == "Homepage") {
.map((group) => {
// Homepage only visible to admins
if (!isAdmin && group.homepage) {
return null;
}

let groupName = group.groupName;
let notPromoted = false;
if (
isAdmin &&
group[0].groupName != "Homepage" &&
(group[0].currentlyFeatured == "0" || !group[0].currentlyFeatured)
!group.homepage &&
group.currentlyFeatured == false
) {
groupName += " (Not currently featured on community page)";
notPromoted = true;
Expand All @@ -677,13 +707,15 @@ export function Community() {
{isAdmin ? (
<span>
<Text fontSize="24px">{groupName}</Text>
{notPromoted ? (
{group.homepage ? (
<Text>Always promoted</Text>
) : notPromoted ? (
<Button
onClick={() => {
fetcher.submit(
{
_action: "Promote Group",
groupName: groupInfo.groupName,
groupId: group.promotedGroupId,
currentlyFeatured: true,
homepage: false,
},
Expand All @@ -699,7 +731,7 @@ export function Community() {
fetcher.submit(
{
_action: "Promote Group",
groupName: groupInfo.groupName,
groupId: group.promotedGroupId,
currentlyFeatured: false,
homepage: false,
},
Expand All @@ -713,14 +745,12 @@ export function Community() {
<br />
<br />
<Wrap overflow="visible">
{group.map((cardObj, i) => {
{group.promotedContent.map((cardObj, i) => {
return (
<ActivityCard
{...cardObj}
key={`swipercard${i}`}
fullName={
cardObj.firstName + " " + cardObj.lastName
}
fullName={cardObj.owner}
imageLink={`/activityViewer/${cardObj.activityId}`}
menuItems={
<>
Expand All @@ -730,7 +760,7 @@ export function Community() {
{
_action: "Remove Promoted Content",
activityId: cardObj.activityId,
groupId: cardObj.promotedGroupId,
groupId: group.promotedGroupId,
},
{ method: "post" },
);
Expand All @@ -744,7 +774,7 @@ export function Community() {
{
_action: "Move Promoted Content",
activityId: cardObj.activityId,
groupId: cardObj.promotedGroupId,
groupId: group.promotedGroupId,
direction: "left",
},
{ method: "post" },
Expand All @@ -759,7 +789,7 @@ export function Community() {
{
_action: "Move Promoted Content",
activityId: cardObj.activityId,
groupId: cardObj.promotedGroupId,
groupId: group.promotedGroupId,
direction: "right",
},
{ method: "post" },
Expand All @@ -776,7 +806,7 @@ export function Community() {
</Wrap>
</span>
) : (
<Carousel title={groupName} data={group} />
<Carousel title={groupName} data={group.promotedContent} />
)}
</>
);
Expand Down
Loading

0 comments on commit 84adf73

Please sign in to comment.