-
Notifications
You must be signed in to change notification settings - Fork 2
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
refactor page editors to use new image components
- Loading branch information
Showing
19 changed files
with
854 additions
and
1,182 deletions.
There are no files selected for viewing
106 changes: 106 additions & 0 deletions
106
frontend/src/app/admin/page-editor/about/AboutEditor.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,106 @@ | ||
| import React, { useEffect, useState } from "react"; | ||
|
|
||
| import { getPageData, updatePageData } from "../../../../api/pageeditor"; | ||
| import Toast from "../../../../components/admin/Toast"; | ||
| import CancelButton from "../../../../components/admin/pageeditor/CancelButton"; | ||
| import { CollapsibleFields } from "../../../../components/admin/pageeditor/CollapsibleFields"; | ||
| import { usePage, usePageDispatch } from "../../../../components/admin/pageeditor/PageProvider"; | ||
| import SaveButton from "../../../../components/admin/pageeditor/SaveButton"; | ||
|
|
||
| import styles from "./page.module.css"; | ||
|
|
||
| export default function AboutEditor() { | ||
| const page = usePage(); | ||
| const dispatch = usePageDispatch(); | ||
| const [open, setOpen] = useState(false); | ||
|
|
||
| // Send page data from MongoDB to provider state | ||
| const updatePageStateFromDB = () => { | ||
| getPageData(page.name) | ||
| .then((response) => { | ||
| if (response.success) { | ||
| dispatch({ | ||
| type: "edit_page", | ||
| setIsEdited: false, | ||
| page: { | ||
| ...page, | ||
| fields: response.data.fields, | ||
| }, | ||
| }); | ||
| } else { | ||
| alert("Could not connect to database. Any changes you make will not take effect!!!"); | ||
| } | ||
| }) | ||
| .catch(console.error); | ||
| }; | ||
|
|
||
| // When the page loads update state to reflect page data from MongoDB | ||
| useEffect(() => { | ||
| updatePageStateFromDB(); | ||
| }, []); | ||
|
|
||
| // Implement save logic | ||
| const handleSave = () => { | ||
| if (page.isEdited) { | ||
| // set isEdited to false or else when we load from mongo it will have wrong state | ||
| updatePageData(page.name, { ...page, isEdited: false }) | ||
| .then(() => { | ||
| setOpen(true); | ||
| }) | ||
| .catch((error) => { | ||
| alert(error); | ||
| }); | ||
| // make sure to reflect isEdited false on local state | ||
| dispatch({ | ||
| type: "set_isEdited", | ||
| setIsEdited: false, | ||
| }); | ||
| } | ||
| }; | ||
|
|
||
| // Implement cancel logic | ||
| const handleCancel = () => { | ||
| if (page.isEdited) { | ||
| updatePageStateFromDB(); | ||
| dispatch({ | ||
| type: "set_isEdited", | ||
| setIsEdited: false, | ||
| }); | ||
| } | ||
| }; | ||
|
|
||
| return ( | ||
| <div> | ||
| <Toast | ||
| message="Event Details Saved!" | ||
| open={open} | ||
| handleClose={() => { | ||
| setOpen(false); | ||
| }} | ||
| /> | ||
| <div className={styles.sectionContainer}> | ||
| <CollapsibleFields | ||
| title="Page Subtitle" | ||
| fieldNames={["Subtitle", "Header Image Carousel"]} | ||
| /> | ||
| <CollapsibleFields | ||
| title="Section 1 - Our Mission" | ||
| fieldNames={["Mission Section Title", "Mission Body Text", "Mission Section Image"]} | ||
| /> | ||
| <CollapsibleFields | ||
| title="Section 2 - Our Team" | ||
| fieldNames={["Team Section Title", "Team Body Text", "Team Section Image"]} | ||
| /> | ||
| <CollapsibleFields | ||
| title="Section 3 - Contact Us" | ||
| fieldNames={["Contact Section Title", "Contact Body Text", "Contact Section Image"]} | ||
| /> | ||
|
|
||
| <div className={styles.buttonContainer}> | ||
| <CancelButton text="Cancel" onClick={handleCancel} /> | ||
| <SaveButton text="Save" onClick={handleSave} /> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| ); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,200 +1,25 @@ | ||
| "use client"; | ||
| import React, { useEffect, useState } from "react"; | ||
|
|
||
| import { getPageText, updatePage } from "../../../../api/pageeditor"; | ||
| import { Page } from "../../../../api/pageeditor"; | ||
| import PageToggle from "../../../../components/PageToggle"; | ||
| import { PageProvider } from "../../../../components/admin/pageeditor/PageProvider"; | ||
| import defaultPage from "../../../../components/admin/pageeditor/defaultPages/aboutPageDefault.json"; | ||
|
|
||
| import AboutEditor from "./AboutEditor"; | ||
| import styles from "./page.module.css"; | ||
|
|
||
| import AlertBanner from "@/components/AlertBanner"; | ||
| import Button from "@/components/Button"; | ||
| import CancelButton from "@/components/CancelButton"; | ||
| import Collapsable, { UploadImageTypes } from "@/components/Collapsable"; | ||
| import PageToggle from "@/components/PageToggle"; | ||
|
|
||
| export default function AboutEditor() { | ||
| const [isEdited, setIsEdited] = useState(false); | ||
| const [phSubtitle, setPhSubtitle] = useState<string>(""); | ||
| const [s1Subtitle, setS1Subtitle] = useState<string>(""); | ||
| const [s1Text, setS1Text] = useState<string>(""); | ||
| const [s2Subtitle, setS2Subtitle] = useState<string>(""); | ||
| const [s2Text, setS2Text] = useState<string>(""); | ||
| const [s3Subtitle, setS3Subtitle] = useState<string>(""); | ||
| const [s3Text, setS3Text] = useState<string>(""); | ||
| const [missionImages, setMissionImages] = useState<string[]>([]); | ||
| const [teamImages, setTeamImages] = useState<string[]>([]); | ||
| const [contactImages, setContactImages] = useState<string[]>([]); | ||
|
|
||
| const [showAlert, setShowAlert] = useState(false); | ||
|
|
||
| /* Get page data from MongoDB */ | ||
| let pageText; | ||
| useEffect(() => { | ||
| getPageText("About Us") | ||
| .then((response) => { | ||
| if (response.success) { | ||
| pageText = response.data; | ||
| setPhSubtitle(pageText.pageSections[0].subtitle ?? ""); | ||
| setS1Subtitle(pageText.pageSections[1].sectionTitle ?? ""); | ||
| setS1Text(pageText.pageSections[1].sectionSubtitle ?? ""); | ||
| setS2Subtitle(pageText.pageSections[2].sectionTitle ?? ""); | ||
| setS2Text(pageText.pageSections[2].sectionSubtitle ?? ""); | ||
| setS3Subtitle(pageText.pageSections[3].sectionTitle ?? ""); | ||
| setS3Text(pageText.pageSections[3].sectionSubtitle ?? ""); | ||
| console.log("response.data: ", response.data); | ||
| } else { | ||
| alert(response.error); | ||
| } | ||
| }) | ||
| .catch((error) => { | ||
| alert(error); | ||
| }); | ||
| }, []); | ||
|
|
||
| /* Handle Fields upon edit */ | ||
| const handleEdit = (event: React.ChangeEvent<HTMLTextAreaElement>) => { | ||
| setIsEdited(true); | ||
| if(event.target){ | ||
| if (event.target.id === "Page Subtitle: Subtitle") { | ||
| setPhSubtitle(event.target.value); | ||
| } else if (event.target.id === "Section 1 - Our Mission: Section Title") { | ||
| setS1Subtitle(event.target.value); | ||
| } else if (event.target.id === "Section 1 - Our Mission: Body Text") { | ||
| setS1Text(event.target.value); | ||
| } else if (event.target.id === "Section 2 - Our Team: Section Title") { | ||
| setS2Subtitle(event.target.value); | ||
| } else if (event.target.id === "Section 2 - Our Team: Body Text") { | ||
| setS2Text(event.target.value); | ||
| } else if (event.target.id === "Section 3 - Contact Us: Section Title") { | ||
| setS3Subtitle(event.target.value); | ||
| } else if (event.target.id === "Section 3 - Contact Us: Body Text") { | ||
| setS3Text(event.target.value); | ||
| } | ||
| } | ||
| }; | ||
|
|
||
| const handleSave = () => { | ||
| // Implement save logic | ||
| if (isEdited) { | ||
| console.log("Save changes"); | ||
| updatePage({ | ||
| //Pass edited text to MongoDB | ||
| page: "About Us", | ||
| pageSections: [ | ||
| { | ||
| subtitle: phSubtitle, | ||
| }, | ||
| { | ||
| sectionTitle: s1Subtitle, | ||
| sectionSubtitle: s1Text, | ||
| }, | ||
| { | ||
| sectionTitle: s2Subtitle, | ||
| sectionSubtitle: s2Text, | ||
| }, | ||
| { | ||
| sectionTitle: s3Subtitle, | ||
| sectionSubtitle: s3Text, | ||
| }, | ||
| ], | ||
| }) | ||
| .then((response) => { | ||
| if (response.success) { | ||
| alert("Success!"); | ||
| } else { | ||
| alert(response.error); | ||
| } | ||
| }) | ||
| .catch((error) => { | ||
| alert(error); | ||
| }); | ||
| setIsEdited(false); | ||
| } | ||
| }; | ||
|
|
||
| const handleCancel = () => { | ||
| // Implement cancel logic | ||
| if (isEdited) { | ||
| console.log("Cancel changes"); | ||
| getPageText("About Us") | ||
| .then((response) => { | ||
| if (response.success) { | ||
| pageText = response.data; | ||
| setPhSubtitle(pageText.pageSections[0].subtitle ?? ""); | ||
| setS1Subtitle(pageText.pageSections[1].sectionTitle ?? ""); | ||
| setS1Text(pageText.pageSections[1].sectionSubtitle ?? ""); | ||
| setS2Subtitle(pageText.pageSections[2].sectionTitle ?? ""); | ||
| setS2Text(pageText.pageSections[2].sectionSubtitle ?? ""); | ||
| setS3Subtitle(pageText.pageSections[3].sectionTitle ?? ""); | ||
| setS3Text(pageText.pageSections[3].sectionSubtitle ?? ""); | ||
| } else { | ||
| alert(response.error); | ||
| } | ||
| }) | ||
| .catch((error) => { | ||
| alert(error); | ||
| }); | ||
| setIsEdited(false); | ||
| } | ||
| }; | ||
|
|
||
| const handleCloseAlert = () => { | ||
| setShowAlert(false); | ||
| }; | ||
|
|
||
| export default function AboutEditorPage() { | ||
| return ( | ||
| <main className={styles.page}> | ||
| <div className={styles.alert}> | ||
| {showAlert && <AlertBanner text={"Event Details Saved!"} onClose={handleCloseAlert} />} | ||
| </div> | ||
| <PageToggle | ||
| pages={["About Us", "Our Mission", "Our Team", "Contact Us"]} | ||
| links={["./about", "./mission", "./team", "./contact"]} | ||
| currPage={0} | ||
| refreshPage={true} | ||
| /> | ||
| <div className={styles.sectionContainer}> | ||
| <Collapsable | ||
| title="Page Subtitle" | ||
| subsection={["Subtitle"]} | ||
| textbox={[phSubtitle, ""]} | ||
| onChange={handleEdit} | ||
| /> | ||
| <Collapsable | ||
| title="Section 1 - Our Mission" | ||
| subsection={["Section Title", "Body Text"]} | ||
| textbox={[s1Subtitle, s1Text]} | ||
| onChange={handleEdit} | ||
| imageUploadBox={UploadImageTypes.OUR_MISSION} | ||
| images={missionImages} | ||
| setImages={setMissionImages} | ||
| /> | ||
| <Collapsable | ||
| title="Section 2 - Our Team" | ||
| subsection={["Section Title", "Body Text"]} | ||
| textbox={[s2Subtitle, s2Text]} | ||
| onChange={handleEdit} | ||
| imageUploadBox={UploadImageTypes.OUR_TEAM} | ||
| images = {teamImages} | ||
| setImages = {setTeamImages} | ||
| /> | ||
| <Collapsable | ||
| title="Section 3 - Contact Us" | ||
| subsection={["Section Title", "Body Text" ]} | ||
| textbox={[s3Subtitle, s3Text]} | ||
| onChange={handleEdit} | ||
| imageUploadBox={UploadImageTypes.CONTACT_US} | ||
| images = {contactImages} | ||
| setImages = {setContactImages} | ||
| /> | ||
| <div className={styles.buttonContainer}> | ||
| <CancelButton | ||
| text="Cancel" | ||
| color={isEdited ? "active" : "unactive"} | ||
| onClick={handleCancel} | ||
| /> | ||
| <Button text="Save" color={isEdited ? "active" : "unactive"} onClick={handleSave} /> | ||
| </div> | ||
| </div> | ||
| <PageProvider initialPage={defaultPage as Page}> | ||
| <AboutEditor /> | ||
| </PageProvider> | ||
| </main> | ||
| ); | ||
| } |
Oops, something went wrong.