From e4b5f457179562d20e650bc14845b7d6fe6e3061 Mon Sep 17 00:00:00 2001 From: Mobbig Date: Wed, 27 Mar 2024 22:52:50 -0400 Subject: [PATCH 1/2] WIP --- .../src/assets/styles/theme-variables.scss | 15 ++--- .../src/components/AnnouncementCard.tsx | 19 ++++++ .../AnnouncementCard/AnnouncementCard.scss | 18 ------ .../AnnouncementCard/AnnouncementCard.tsx | 22 ------- .../src/components/ContactCard.tsx | 63 +++++++++++++++++++ .../components/ContactCard/ContactCard.tsx | 62 ------------------ .../components/ContactCard/contact-card.scss | 23 ------- canopeum_frontend/src/pages/Map.tsx | 12 ++-- canopeum_frontend/src/pages/MapSite.tsx | 18 +----- 9 files changed, 96 insertions(+), 156 deletions(-) create mode 100644 canopeum_frontend/src/components/AnnouncementCard.tsx delete mode 100644 canopeum_frontend/src/components/AnnouncementCard/AnnouncementCard.scss delete mode 100644 canopeum_frontend/src/components/AnnouncementCard/AnnouncementCard.tsx create mode 100644 canopeum_frontend/src/components/ContactCard.tsx delete mode 100644 canopeum_frontend/src/components/ContactCard/ContactCard.tsx delete mode 100644 canopeum_frontend/src/components/ContactCard/contact-card.scss diff --git a/canopeum_frontend/src/assets/styles/theme-variables.scss b/canopeum_frontend/src/assets/styles/theme-variables.scss index 3928a0f22..efdc7f71a 100644 --- a/canopeum_frontend/src/assets/styles/theme-variables.scss +++ b/canopeum_frontend/src/assets/styles/theme-variables.scss @@ -65,15 +65,16 @@ $colors: ( cream: $cream ); $theme-color-interval: 8%; +$table-bg-scale: -80%; $table-variants: ( "primary": shift-color(map-get($theme-colors, primary), $table-bg-scale), - "secondary": shift-color($secondary, $table-bg-scale), - "success": shift-color($success, $table-bg-scale), - "info": shift-color($info, $table-bg-scale), - "warning": shift-color($warning, $table-bg-scale), - "danger": shift-color($danger, $table-bg-scale), - "light": $light, - "dark": $dark, + "secondary": shift-color(map-get($theme-colors, secondary), $table-bg-scale), + "success": shift-color(map-get($theme-colors, success), $table-bg-scale), + "info": shift-color(map-get($theme-colors, info), $table-bg-scale), + "warning": shift-color(map-get($theme-colors, warning), $table-bg-scale), + "danger": shift-color(map-get($theme-colors, danger), $table-bg-scale), + "light": map-get($theme-colors, light), + "dark": map-get($theme-colors, dark), ); // Spacing diff --git a/canopeum_frontend/src/components/AnnouncementCard.tsx b/canopeum_frontend/src/components/AnnouncementCard.tsx new file mode 100644 index 000000000..f704bed68 --- /dev/null +++ b/canopeum_frontend/src/components/AnnouncementCard.tsx @@ -0,0 +1,19 @@ +import { Link } from 'react-router-dom' +import type { Announcement } from '../services/api' + +const AnnouncementCard = ({ announcement }: { readonly announcement: Announcement }) => ( +
+
+
+

Announcement

+ edit_square +
+

+ {announcement.body} +

+ {announcement.link && {announcement.link}} +
+
+) + +export default AnnouncementCard diff --git a/canopeum_frontend/src/components/AnnouncementCard/AnnouncementCard.scss b/canopeum_frontend/src/components/AnnouncementCard/AnnouncementCard.scss deleted file mode 100644 index 5711675e8..000000000 --- a/canopeum_frontend/src/components/AnnouncementCard/AnnouncementCard.scss +++ /dev/null @@ -1,18 +0,0 @@ -@import '@assets/styles/theme-variables.scss'; - - -.card { - border-width: $card-border-width; - border-radius: $card-border-width; - border-color: $card-border-color; - background-color: $card-bg; -} - -.card-title { - font-family: $font-family-sans-serif; - font-size: $h2-font-size; -} - -.card-text { - font-family: $font-family-monospace; -} diff --git a/canopeum_frontend/src/components/AnnouncementCard/AnnouncementCard.tsx b/canopeum_frontend/src/components/AnnouncementCard/AnnouncementCard.tsx deleted file mode 100644 index 98d02ab3d..000000000 --- a/canopeum_frontend/src/components/AnnouncementCard/AnnouncementCard.tsx +++ /dev/null @@ -1,22 +0,0 @@ -import './AnnouncementCard.scss'; - -import { Link } from 'react-router-dom'; - -import type { Announcement } from '../../services/api'; - -const AnnouncementCard = ({ announcement }: { readonly announcement: Announcement }) => ( -
-
-
-

Announcement

- edit_square -
-

- {announcement.body} -

- {announcement.link && {announcement.link}} -
-
- ) - -export default AnnouncementCard; diff --git a/canopeum_frontend/src/components/ContactCard.tsx b/canopeum_frontend/src/components/ContactCard.tsx new file mode 100644 index 000000000..41363c203 --- /dev/null +++ b/canopeum_frontend/src/components/ContactCard.tsx @@ -0,0 +1,63 @@ +import facebookLogo from '@assets/icons/facebook-contact-logo.svg' +import instagramLogo from '@assets/icons/instagram-contact-logo.svg' +import linkedinLogo from '@assets/icons/linkedin-contact-logo.svg' +import xLogo from '@assets/icons/x-contact-logo.svg' +import { Link } from 'react-router-dom' +import type { Contact } from '@services/api' + +const ContactCard = ({ contact }: { readonly contact: Contact }) => { + const renderContactCard = () => ( +
+
+
+

Contact

+ edit_square +
+
+
+ home_work +

{contact.address}

+
+
+ mail +

{contact.email}

+
+
+ perm_phone_msg +

{contact.phone}

+
+
+
+ {contact.linkedInLink && ( + + linkedin-logo + + )} + {contact.instagramLink && ( + + instagram-logo + + )} + {contact.xLink && ( + + x-logo + + )} + {contact.facebookLink && ( + + facebook-logo + + )} +
+
+
+ ) + + return ( +
+ {renderContactCard()} +
+ ) +} + +export default ContactCard diff --git a/canopeum_frontend/src/components/ContactCard/ContactCard.tsx b/canopeum_frontend/src/components/ContactCard/ContactCard.tsx deleted file mode 100644 index fc5db5053..000000000 --- a/canopeum_frontend/src/components/ContactCard/ContactCard.tsx +++ /dev/null @@ -1,62 +0,0 @@ -import '../ContactCard/contact-card.scss'; -import '../../pages/Utilities'; - -import facebookLogo from '@assets/icons/facebook-contact-logo.svg'; -import instagramLogo from '@assets/icons/instagram-contact-logo.svg'; -import linkedinLogo from '@assets/icons/linkedin-contact-logo.svg'; -import xLogo from '@assets/icons/x-contact-logo.svg'; -import { Link } from 'react-router-dom'; - -import type { Contact } from '../../services/api' - -const ContactCard = ({ contact }:{readonly contact: Contact}) => { - - const renderContactCard = () => ( -
-
-
-

Contact

- edit_square -
-
-
- home_work -

{contact.address}

-
-
- mail -

{contact.email}

-
-
- perm_phone_msg -

{contact.phone}

-
-
-
- {contact.linkedInLink && - linkedin-logo - } - {contact.instagramLink && - instagram-logo - } - {contact.xLink && - x-logo - } - {contact.facebookLink && - facebook-logo - } -
-
- - -
- ) - - return ( -
- {renderContactCard()} -
- ) -} - -export default ContactCard diff --git a/canopeum_frontend/src/components/ContactCard/contact-card.scss b/canopeum_frontend/src/components/ContactCard/contact-card.scss deleted file mode 100644 index ab7b904f1..000000000 --- a/canopeum_frontend/src/components/ContactCard/contact-card.scss +++ /dev/null @@ -1,23 +0,0 @@ -@import '@assets/styles/theme-variables.scss'; - -.card { - padding: 20px; - background-color: $white; -} - -.card-title { - font-family: $font-family-sans-serif; - font-size: $h2-font-size; -} - -.card-text { - font-family: $font-family-monospace; - color: $grey-police; -} - - -.material-symbols-outlined { - color: $grey-police; - padding-right: 16px; - -} diff --git a/canopeum_frontend/src/pages/Map.tsx b/canopeum_frontend/src/pages/Map.tsx index 937d83910..fd10a4f5b 100644 --- a/canopeum_frontend/src/pages/Map.tsx +++ b/canopeum_frontend/src/pages/Map.tsx @@ -44,12 +44,6 @@ const Map = () => { setSites(response) } - const getBrowserLocation = useCallback(() => - navigator.geolocation.getCurrentPosition(position => { - const { latitude, longitude } = position.coords - setMapViewState({ ...mapViewState, latitude, longitude }) - }), [mapViewState]) - const onMarkerClick = (event: MarkerEvent, site: SiteMap) => { const { lat, lng } = event.target._lngLat setMapViewState({ @@ -68,8 +62,10 @@ const Map = () => { useEffect(() => { void fetchData() - getBrowserLocation() - }, [getBrowserLocation]) + navigator.geolocation.getCurrentPosition(position => { + const { latitude, longitude } = position.coords + setMapViewState(m => ({ ...m, latitude, longitude }))}) + }, []) return (
diff --git a/canopeum_frontend/src/pages/MapSite.tsx b/canopeum_frontend/src/pages/MapSite.tsx index d0c8e2d15..984954459 100644 --- a/canopeum_frontend/src/pages/MapSite.tsx +++ b/canopeum_frontend/src/pages/MapSite.tsx @@ -7,22 +7,8 @@ import { useContext, useEffect, useState } from 'react' import { useParams } from 'react-router-dom' import CreatePostWidget from '../components/CreatePostWidget' import PostWidget from '../components/PostWidget' -import AnnouncementCard from '../components/AnnouncementCard/AnnouncementCard'; - - -import ContactCard from '../components/ContactCard/ContactCard'; -import SiteSummaryCard from '../components/site/SiteSummaryCard' -import type { SiteSocial } from '../services/api' -import api from '../services/apiInterface' - -const fetchSite = async (siteId: number, setSite: (site: SiteSocial) => void) => { - try { - const site = await api().social.site(siteId) - setSite(site) - } catch (error) { - console.error(error) - } -} +import AnnouncementCard from '../components/AnnouncementCard' +import ContactCard from '../components/ContactCard' const MapSite = () => { const { siteId } = useParams() From 6c7f30c3ac483b2158c9a51e3bb5bdebdb06d290 Mon Sep 17 00:00:00 2001 From: Mobbig Date: Wed, 27 Mar 2024 23:19:23 -0400 Subject: [PATCH 2/2] merging all parts --- .../src/components/AnnouncementCard.tsx | 2 +- canopeum_frontend/src/components/ContactCard.tsx | 6 +++--- .../src/components/CreatePostWidget.tsx | 2 -- .../src/components/site/SiteSummaryCard.tsx | 14 +++++++++----- canopeum_frontend/src/pages/MapSite.tsx | 12 ++++++------ 5 files changed, 19 insertions(+), 17 deletions(-) diff --git a/canopeum_frontend/src/components/AnnouncementCard.tsx b/canopeum_frontend/src/components/AnnouncementCard.tsx index f704bed68..70b045ac6 100644 --- a/canopeum_frontend/src/components/AnnouncementCard.tsx +++ b/canopeum_frontend/src/components/AnnouncementCard.tsx @@ -6,7 +6,7 @@ const AnnouncementCard = ({ announcement }: { readonly announcement: Announcemen

Announcement

- edit_square + edit_square

{announcement.body} diff --git a/canopeum_frontend/src/components/ContactCard.tsx b/canopeum_frontend/src/components/ContactCard.tsx index 41363c203..febaed259 100644 --- a/canopeum_frontend/src/components/ContactCard.tsx +++ b/canopeum_frontend/src/components/ContactCard.tsx @@ -14,15 +14,15 @@ const ContactCard = ({ contact }: { readonly contact: Contact }) => { edit_square

-
+
home_work

{contact.address}

-
+
mail

{contact.email}

-
+
perm_phone_msg

{contact.phone}

diff --git a/canopeum_frontend/src/components/CreatePostWidget.tsx b/canopeum_frontend/src/components/CreatePostWidget.tsx index 2c6c4c7dd..c3d51194a 100644 --- a/canopeum_frontend/src/components/CreatePostWidget.tsx +++ b/canopeum_frontend/src/components/CreatePostWidget.tsx @@ -16,9 +16,7 @@ const CreatePostWidget = (props: { readonly site: SiteSocial }) => {
- mood add_a_photo - smart_display
diff --git a/canopeum_frontend/src/components/site/SiteSummaryCard.tsx b/canopeum_frontend/src/components/site/SiteSummaryCard.tsx index a4462558a..2d2adf78e 100644 --- a/canopeum_frontend/src/components/site/SiteSummaryCard.tsx +++ b/canopeum_frontend/src/components/site/SiteSummaryCard.tsx @@ -1,8 +1,9 @@ import headerLogo from '@assets/images/map/MARR4059.png' +import { LanguageContext } from '@components/context/LanguageContext' import ToggleSwitch from '@components/inputs/ToggleSwitch' import PrimaryIconBadge from '@components/PrimaryIconBadge' import type { SiteSocial } from '@services/api' -import { useEffect, useState } from 'react' +import { useContext, useEffect, useState } from 'react' import { useTranslation } from 'react-i18next' type Props = { @@ -19,16 +20,19 @@ const updateSiteIsPublic = async (_: boolean) => { } const SiteSummaryCard = ({ site, viewMode }: Props) => { const { t } = useTranslation() + const { translateValue } = useContext(LanguageContext) const [isPublic, setIsPublic] = useState(true) useEffect(() => void updateSiteIsPublic(isPublic), [isPublic]) return ( -
+
-
+
{/* TODO: replace img source when backend offers an image endpoint */} - header logo
@@ -50,7 +54,7 @@ const SiteSummaryCard = ({ site, viewMode }: Props) => {
-

{site.type.en}

+

{translateValue(site.siteType)}

{site.description ?? ''}

diff --git a/canopeum_frontend/src/pages/MapSite.tsx b/canopeum_frontend/src/pages/MapSite.tsx index 984954459..549e1dfec 100644 --- a/canopeum_frontend/src/pages/MapSite.tsx +++ b/canopeum_frontend/src/pages/MapSite.tsx @@ -39,7 +39,7 @@ const MapSite = () => { }, [siteId]) return ( -
+
{isLoadingSite ? (
@@ -56,17 +56,17 @@ const MapSite = () => {
-
- { site?.announcement && } - { site?.contact && } +
+ {site?.announcement && } + {site?.contact && }
-
+
{site && ( <> -
+
{site.posts?.map((post: Post) => )}