Transaction: FhdFsE8...YnPr

{ "data": { "hack.near": { "widget": { "events.Calendar": { "": "const { Button } = VM.require(\"buildhub.near/widget/components\") || {\n Button: () => <></>,\n};\n\nconst { fetchThings } = VM.require(\n \"buildhub.near/widget/lib.everything-sdk\"\n) || {\n fetchThings: () => {},\n};\n\nconst StyledToolbar = styled.div`\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 16px 24px;\n margin-bottom: 24px;\n\n background: var(--bg-1, #0b0c14);\n\n color: var(--text-color, #fff);\n font-size: 18px;\n\n .section {\n display: flex;\n align-items: center;\n flex-basis: 0;\n flex-grow: 1;\n }\n\n .date-changer {\n all: unset;\n cursor: pointer;\n }\n\n @media screen and (max-width: 768px) {\n flex-direction: column;\n gap: 1rem;\n }\n`;\n\n// implement event fetching and filtering\n\nconst [selectedView, setSelectedView] = useState(\"month\");\nconst [currentDate, setCurrentDate] = useState(new Date());\n\nconst [showCreateModal, setShowCreateModal] = useState(false);\nconst toggleCreateModal = () => setShowCreateModal(!showCreateModal);\n\nconst [showFilterModal, setShowFilterModal] = useState(false);\nconst toggleFilterModal = () => setShowFilterModal(!showFilterModal);\n\nconst [filters, setFilters] = useState({});\n\nconst dateString = currentDate.toLocaleString(\"en-us\", {\n month: \"long\",\n year: \"numeric\",\n});\n\nconst handleMonthChange = (change) => {\n const date = currentDate;\n date.setMonth(date.getMonth() + change);\n setCurrentDate(date);\n};\n\nconst Toolbar = () => {\n return (\n <StyledToolbar>\n <div className=\"section gap-3\">\n <span>{dateString}</span>\n <button className=\"date-changer\" onClick={() => handleMonthChange(-1)}>\n <i className=\"bi bi-chevron-left\"></i>\n </button>\n <button className=\"date-changer\" onClick={() => handleMonthChange(1)}>\n <i className=\"bi bi-chevron-right\"></i>\n </button>\n </div>\n <div className=\"section gap-1 justify-content-center\">\n <Button\n variant={selectedView === \"month\" ? \"secondary\" : \"outline\"}\n onClick={() => setSelectedView(\"month\")}\n >\n Month\n </Button>\n <Button\n variant={selectedView === \"list\" ? \"secondary\" : \"outline\"}\n onClick={() => setSelectedView(\"list\")}\n >\n List\n </Button>\n </div>\n <div className=\"section justify-content-end\" style={{ gap: 10 }}>\n <Button variant=\"outline\" onClick={() => setShowFilterModal(true)}>\n Filter By\n </Button>\n {context.accountId && (\n <Button variant=\"primary\" onClick={() => setShowCreateModal(true)}>\n Add Event\n </Button>\n )}\n </div>\n </StyledToolbar>\n );\n};\n\nconst events = fetchThings(\"every\", \"event\");\n\nconst filterEvents = () => {\n let filteredEvents = events;\n\n // handle date from filter\n if (filters.from) {\n filteredEvents = filteredEvents.filter((event) => {\n return new Date(event.start) >= new Date(filters.from);\n });\n }\n\n // handle date to filter\n if (filters.to) {\n filteredEvents = filteredEvents.filter((event) => {\n return new Date(event.start) <= new Date(filters.to);\n });\n }\n\n // handle cleared filters\n if (filters == {}) {\n return filteredEvents;\n }\n\n // handle title filter\n if (filters.title) {\n filteredEvents = filteredEvents.filter((event) => {\n return event.title.toLowerCase().includes(filters.title.toLowerCase());\n });\n }\n\n // handle location filter\n if (filters.location) {\n filteredEvents = filteredEvents.filter((event) => {\n return event?.extendedProps?.location\n .toLowerCase()\n .includes(filters.location.toLowerCase());\n });\n }\n\n // handle organizer filter\n if (filters.organizers.length) {\n const organizers =\n filters.organizers.map((it) => {\n if (it.customOption) {\n return it.organizers;\n }\n return it;\n }) ?? [];\n\n filteredEvents = filteredEvents.filter((event) => {\n const eventOrganizers = event?.extendedProps?.organizers.map((it) => {\n if (it.customOption) {\n return it.organizer;\n }\n return it;\n });\n return eventOrganizers.some((it) => organizers.includes(it));\n });\n }\n\n // handle tag filter\n if (filters.tags.length) {\n const tags =\n filters.tags.map((it) => {\n if (it.customOption) {\n return it.tags;\n }\n return it;\n }) ?? [];\n\n filteredEvents = filteredEvents.filter((event) => {\n const eventTags = event?.extendedProps?.hashtags.map((it) => {\n if (it.customOption) {\n return it.hashtags;\n }\n return it;\n });\n return eventTags.some((it) => tags.includes(it));\n });\n }\n\n return filteredEvents;\n};\n\nevents = filterEvents();\n\nconst CurrentView = () => {\n if (selectedView === \"month\") {\n return (\n <Widget\n src=\"hack.near/widget/events.MonthView\"\n loading=\"\"\n props={{\n currentDate,\n events,\n setSelectedView,\n }}\n />\n );\n }\n\n return (\n <Widget\n src=\"buildhub.near/widget/events.ListView\"\n loading=\"\"\n props={{\n currentDate,\n events,\n }}\n />\n );\n};\n\nconst Container = styled.div`\n background: var(--bg-1, #0b0c14);\n`;\n\nreturn (\n <Container>\n <Widget\n src=\"buildhub.near/widget/components.modals.CreateEvent\"\n loading=\"\"\n props={{\n showModal: showCreateModal,\n toggleModal: toggleCreateModal,\n }}\n />\n <Widget\n src=\"buildhub.near/widget/components.modals.FilterEvents\"\n loading=\"\"\n props={{\n showModal: showFilterModal,\n toggleModal: toggleFilterModal,\n filters: filters,\n setFilters: setFilters,\n }}\n />\n <Toolbar />\n <CurrentView />\n </Container>\n);\n" } } } } }