From 3be9a1f448d4c573399ec42905640d34fb9e9644 Mon Sep 17 00:00:00 2001 From: davidlee04 Date: Sat, 2 Nov 2024 19:41:35 -0400 Subject: [PATCH 1/8] init --- src/components/collapsible/index.tsx | 56 ++-- src/components/dashboard/ContentForm.tsx | 236 +++++++++++----- .../dashboard/DirectoryForm.module.css | 1 - src/components/dashboard/DirectoryForm.tsx | 58 ++-- src/components/dashboard/ProviderGallery.tsx | 20 +- .../embed-component/EmbedComponent.tsx | 5 +- .../dashboard/embed-component/EmbedForm.tsx | 194 +++++++------ src/components/map/index.tsx | 4 +- src/components/subcomponents/ProviderInfo.tsx | 259 +++++++----------- .../chartcomponents/ChartComponentForm.tsx | 113 ++++---- 10 files changed, 530 insertions(+), 416 deletions(-) diff --git a/src/components/collapsible/index.tsx b/src/components/collapsible/index.tsx index 2d768c8..e421cc6 100644 --- a/src/components/collapsible/index.tsx +++ b/src/components/collapsible/index.tsx @@ -1,7 +1,8 @@ import React from "react"; import { useState, useRef } from "react"; -import './collapsible.css'; +import "./collapsible.css"; import { FaAngleDown, FaAngleUp } from "react-icons/fa"; +import { Collapse } from "react-bootstrap"; //This is collapsible component, use it as if you are using any pre-designed component //Specify the Style of collapsible component as if you were styling a div using style prompt @@ -22,31 +23,42 @@ function isManaged(props: PropTypes): props is Managed { } const Collapsible = (props: PropTypes) => { - const [isOpen, setOpen] = useState(false) - const contentRef = useRef(null) - const toogle = () => { setOpen(!isOpen) } + const [isOpen, setOpen] = useState(false); + const contentRef = useRef(null); + const toogle = () => { + setOpen(!isOpen); + }; return (
{/* Do not remove type="button". Otherwise the button will do a form submission on click and cause the page to refresh */} - {isManaged(props) ? - - : -
- {props.title} -
- } -
-
{props.children}
+ {isManaged(props) ? ( + + ) : ( +
{props.title}
+ )} + +
+ {/* */} +
{props.children}
+ {/* */}
-
- ) -} +
+ ); +}; export default Collapsible; diff --git a/src/components/dashboard/ContentForm.tsx b/src/components/dashboard/ContentForm.tsx index 7ee2282..c418944 100644 --- a/src/components/dashboard/ContentForm.tsx +++ b/src/components/dashboard/ContentForm.tsx @@ -101,9 +101,129 @@ const SectionCard = ({ isEditing, setIsEditing, }) => { - const [components, setComponents] = useState([]); + // const [components, setComponents] = useState(section.components); + // const [componentStates, setComponentStates] = useState({}); + /* + components = [{ + type: "Chart", + data: {}, + }] + */ + const { components } = section; + + const getDefaultData = (componentType) => { + switch (componentType) { + case "Chart": + return { + type: "donut", + title: "", + data: { + showNumber: true, + }, + }; + case "Gallery": + return { + slidesArray: [ + { + title: "", + description: "", + imgLink: "", + }, + ], + }; + case "Directory": + return { + items: [ + { name: "", description: "", details: "", image: "" }, + ], + }; + case "Embed": + return { + embedLink: "", + title: "", + }; + default: + return {}; + } + }; + + const addComponent = (componentType) => { + const componentObject = { + type: componentType, + data: getDefaultData(componentType), + }; + updateComponents([...components, componentObject]); + }; + const updateIthComponent = (newData, i) => { + // console.log("here"); + // console.log(newData); + const newComponents = components.map((component, iterator) => { + return iterator === i + ? { ...components[i], data: newData } + : component; + }); + updateComponents(newComponents); + }; + const updateComponents = (newComponents) => { + const newSections = sections.map((sec, i) => { + return i === index + ? { ...section, components: newComponents } + : sec; + }); + // console.log(newSections); + setSections(newSections); + // console.log(sect) + // console.log(sections); + }; + + const switchRender = (type, data, i) => { + switch (type) { + case "Chart": + return ( + { + updateIthComponent(newState, i); + }} + > + ); + case "Gallery": + return ( + { + updateIthComponent(newState, i); + }} + > + ); + case "Directory": + return ( + { + updateIthComponent(newState, i); + }} + > + ); + case "Embed": + return ( + { + updateIthComponent(newState, i); + }} + > + ); + default: + return <>; + } + }; return ( - + - {components.map((v, i) => + {components.map((v, i) => ( - {v} + + {switchRender(v.type, v.data, i)} + - )} - + ))} + + }} + id="dropdown-basic" + > + Add Filter - - setComponents([...components, - - - - ])}>Chart - - setComponents([...components, - - - - ])}>Gallery - - setComponents([...components, - - - - ])}>Directory - - setComponents([...components, - - - - ])}>Embed + { + // console.log("") + addComponent("Chart"); + }} + > + Chart + + + addComponent("Gallery")}> + Gallery + + addComponent("Directory")} + > + Directory + + addComponent("Embed")}> + Embed + @@ -260,8 +353,9 @@ const SectionButton = ({ maxWidth: "12px", borderTopLeftRadius: "8px", borderBottomLeftRadius: "8px", - backgroundColor: `${isSelected ? "#226DFF" : "transparent" - }`, + backgroundColor: `${ + isSelected ? "#226DFF" : "transparent" + }`, }} > { style={{ backgroundColor: "#E3E9F5", padding: "16px 16px 28px 16px", - width: "calc(100% - 264px)" + width: "calc(100% - 264px)", }} > {selectedSection === null ? null : ( diff --git a/src/components/dashboard/DirectoryForm.module.css b/src/components/dashboard/DirectoryForm.module.css index e7b60e5..f893675 100644 --- a/src/components/dashboard/DirectoryForm.module.css +++ b/src/components/dashboard/DirectoryForm.module.css @@ -6,7 +6,6 @@ background-color: transparent; } .directory::-webkit-scrollbar-thumb { - /* border: 15px solid transparent; */ border-radius: 4px; background-color: #a9a9a9; } diff --git a/src/components/dashboard/DirectoryForm.tsx b/src/components/dashboard/DirectoryForm.tsx index 1b420aa..0acedd8 100644 --- a/src/components/dashboard/DirectoryForm.tsx +++ b/src/components/dashboard/DirectoryForm.tsx @@ -40,6 +40,7 @@ const DirectoryFormItem = ({ updateItem({ ...item, details: e.target.value }); }; const handleUploadSuccess = async (file) => { + // console.log(file); const filename = file.name; await storage.ref("images").child(filename).put(file); let newItem = { ...item, image: filename }; @@ -48,6 +49,7 @@ const DirectoryFormItem = ({ .child(filename) .getDownloadURL() .then((url) => { + console.log(url); newItem = { ...newItem, image: url }; updateItem(newItem); }); @@ -75,7 +77,7 @@ const DirectoryFormItem = ({ placeholder="ex. Hannah" value={item.name} onChange={handleNameChange} - style={{marginLeft: "2px"}} + style={{ marginLeft: "2px" }} /> @@ -121,9 +123,9 @@ const DirectoryFormItem = ({ fontWeight: "500", }} onClick={() => { - setDirectoryItems((directoryItems) => - directoryItems.filter((_, i) => i !== index) - ); + const filterItems = directoryItems.filter((_, i) => i !== index); + // console.log(filterItems); + setDirectoryItems(filterItems); }} > Delete @@ -132,8 +134,17 @@ const DirectoryFormItem = ({ ); }; -const DirectoryForm = ({ items }) => { - const [isOpen, setIsOpen] = useState(false); +interface DirectoryState { + items: DirectoryItem[]; +} + +const DirectoryForm = ({ + directoryState, + setDirectoryState, +}: { + directoryState: DirectoryState; + setDirectoryState: (newState: DirectoryState) => void; +}) => { const defaultDirectoryItem: DirectoryItem = { name: "", description: "", @@ -141,7 +152,16 @@ const DirectoryForm = ({ items }) => { image: "", }; //might have to lift this state later to avoid one shared state - const [directoryItems, setDirectoryItems] = useState(items); + // const [directoryItems, setDirectoryItems] = useState( + // data.items + // ); + const { items: directoryItems } = directoryState; + + const setDirectoryItems = (newItems) => { + // console.log(newItems); + setDirectoryState({ ...directoryState, items: newItems }); + }; + /* directoryItem { @@ -166,20 +186,22 @@ const DirectoryForm = ({ items }) => { style={{ paddingRight: "5px", marginTop: "16px", - overflowY: "scroll", + overflow: "auto", }} > {/* {directoryItems.length} */} - {directoryItems.map((directoryItem, index) => ( - // console.log() - - ))} + {directoryItems.map((directoryItem, index) => { + return ( + // console.log() + + ); + })}