From 3b49af820534d72f69b13247c019e81c16e42d3b Mon Sep 17 00:00:00 2001
From: henrikskog <henrikskog01@gmail.com>
Date: Wed, 30 Aug 2023 12:35:12 +0200
Subject: [PATCH] Add settings page for getting personalized calendar link

---
 src/core/appUrls.ts                           |  1 +
 src/pages/profile/settings/calendar.tsx       | 17 +++++
 src/profile/api/calendar.ts                   | 17 +++++
 .../Settings/Calendar/calendar.less           | 42 ++++++++++++
 .../components/Settings/Calendar/index.tsx    | 67 +++++++++++++++++++
 .../components/Settings/Menu/index.tsx        |  1 +
 6 files changed, 145 insertions(+)
 create mode 100644 src/pages/profile/settings/calendar.tsx
 create mode 100644 src/profile/api/calendar.ts
 create mode 100644 src/profile/components/Settings/Calendar/calendar.less
 create mode 100644 src/profile/components/Settings/Calendar/index.tsx

diff --git a/src/core/appUrls.ts b/src/core/appUrls.ts
index ef53dddc..a3a46b4f 100644
--- a/src/core/appUrls.ts
+++ b/src/core/appUrls.ts
@@ -28,6 +28,7 @@ export const getProfileSettingsPenaltiesUrl = () => url`/profile/settings/penalt
 export const getProfileSettingsPrivacyUrl = () => url`/profile/settings/privacy`;
 export const getProfileAppConnectionsUrl = () => url`/profile/settings/apps`;
 export const getProfileUserDataUrl = () => url`/profile/settings/userdata`;
+export const getProfileCalendarUrl = () => url`/profile/settings/calendar`;
 export const getProfileMembershipUrl = () => url`/profile/settings/membership`;
 export const getProfileStatisticsUrl = () => url`/profile/statistics`;
 export const getProfileStatisticsEventsUrl = () => url`/profile/statistics/events`;
diff --git a/src/pages/profile/settings/calendar.tsx b/src/pages/profile/settings/calendar.tsx
new file mode 100644
index 00000000..eb0906b3
--- /dev/null
+++ b/src/pages/profile/settings/calendar.tsx
@@ -0,0 +1,17 @@
+import React from 'react';
+
+import { ProfileWrapper } from 'profile';
+import { SettingsWrapper } from 'profile/components/Settings';
+import Calendar from 'profile/components/Settings/Calendar';
+
+const SettingsCalendarPage = () => {
+  return (
+    <ProfileWrapper>
+      <SettingsWrapper>
+        <Calendar />
+      </SettingsWrapper>
+    </ProfileWrapper>
+  );
+};
+
+export default SettingsCalendarPage;
diff --git a/src/profile/api/calendar.ts b/src/profile/api/calendar.ts
new file mode 100644
index 00000000..d046d99c
--- /dev/null
+++ b/src/profile/api/calendar.ts
@@ -0,0 +1,17 @@
+import { getUser } from 'authentication/api';
+import { get } from 'common/utils/api';
+
+const API_URL = '/users';
+
+export interface IAPIData {
+  link: string;
+}
+/**
+ * Get calendar link for a user
+ */
+export const getCalendarLink = async () => {
+  const user = await getUser();
+  const id = user?.profile.sub;
+  const data = await get<IAPIData>(`/api/v1${API_URL}/${id}/personalized_calendar_link/`, undefined, { user });
+  return data.link;
+};
diff --git a/src/profile/components/Settings/Calendar/calendar.less b/src/profile/components/Settings/Calendar/calendar.less
new file mode 100644
index 00000000..458420e0
--- /dev/null
+++ b/src/profile/components/Settings/Calendar/calendar.less
@@ -0,0 +1,42 @@
+@import '~common/less/mixins.less';
+
+.mailCard {
+  transition: transform 0.1s, box-shadow 0.1s;
+  margin-top: 16px;
+  width: 100%;
+  display: flex !important;
+  // space between
+  justify-content: space-between;
+  align-items: center;
+}
+
+.mailCard:hover {
+  cursor: pointer;
+  transform: translateY(-5px);
+  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
+}
+
+.gcal {
+  margin-top: 1rem;
+}
+
+.gcal > a {
+  // normal link styles
+  color: #4285f4;
+  text-decoration: none;
+  font-weight: 600;
+  font-size: 1.1rem;
+  border-bottom: 1px solid @lightGray;
+}
+
+.gcal > a:hover {
+  // normal link styles
+  color: #0f67f4;
+}
+
+.error {
+  color: #ed8484;
+  font-size: 1.1rem;
+  margin-top: 1rem;
+}
+
diff --git a/src/profile/components/Settings/Calendar/index.tsx b/src/profile/components/Settings/Calendar/index.tsx
new file mode 100644
index 00000000..d712f9db
--- /dev/null
+++ b/src/profile/components/Settings/Calendar/index.tsx
@@ -0,0 +1,67 @@
+import { Card, Icon, Markdown } from '@dotkomonline/design-system';
+import { Pane } from 'common/components/Panes';
+import { useToast } from 'core/utils/toast/useToast';
+import { getCalendarLink } from 'profile/api/calendar';
+import React, { FC, useCallback, useEffect } from 'react';
+import style from './calendar.less';
+
+const MAIN_INFO_TEXT = `
+  ### Kalender
+  På denne siden finner du en link til en kalender med arrangementene du er meldt på. Du kan abonnere på den i din kalender-app, og du vil automatisk få arrangementer du er påmeldt rett i din personlige kalender. Nye arrangementer du melder deg på vil også automatisk bli lagt til i kalenderen din.
+
+  Hvis du opplever at det tar lang tid før arrangementene synkroniseres til kalenderen din er det mest sannsynlig fordi kalenderen sjekker for endringer sjeldent. Google Calendar oppdaterer f.eks hver 24. time. Isåfall kan du prøve å synkronisere manuelt eller bare vente litt.
+`;
+
+const ERROR_TEXT = `
+  ### Error
+  Kunne ikke hente kalender-link. Ta kontakt dotkom@online.ntnu.no
+`;
+
+const Calendar: FC = () => {
+  const [calendarLink, setCalendarLink] = React.useState<string>('Error');
+  const [displayMessage] = useToast({ duration: 2000, overwrite: true, type: 'success' });
+  const [error, setError] = React.useState<boolean>(false);
+
+  const copyToClipboard = useCallback(() => {
+    navigator.clipboard.writeText(calendarLink);
+    displayMessage('Copied to clipboard');
+  }, [calendarLink]);
+
+  useEffect(() => {
+    (async () => {
+      try {
+        const link = await getCalendarLink();
+        setCalendarLink(link);
+      } catch (err) {
+        console.error(err);
+        setError(true);
+      }
+    })();
+  }, []);
+
+  return (
+    <>
+      <Pane>
+        <Markdown>{MAIN_INFO_TEXT}</Markdown>
+        {error ? (
+          <Pane className={style.error}>
+            <Markdown>{ERROR_TEXT}</Markdown>
+          </Pane>
+        ) : (
+          <div>
+            <Card className={style.mailCard} onClick={copyToClipboard}>
+              <span>{calendarLink}</span>
+              <Icon name="copy" />
+            </Card>
+            <div className={style.gcal}>
+              Direkte til Google Calendar:{' '}
+              <a href={`http://www.google.com/calendar/render?cid=${encodeURIComponent(calendarLink)}`}>link</a>
+            </div>
+          </div>
+        )}
+      </Pane>
+    </>
+  );
+};
+
+export default Calendar;
diff --git a/src/profile/components/Settings/Menu/index.tsx b/src/profile/components/Settings/Menu/index.tsx
index 5874e0a1..277685fb 100644
--- a/src/profile/components/Settings/Menu/index.tsx
+++ b/src/profile/components/Settings/Menu/index.tsx
@@ -17,6 +17,7 @@ const Menu = () => (
     <Tab text="Varsler" {...appUrls.getProfileSettingsNotificationsUrl()} />
     <Tab text="Apptilkoblinger" {...appUrls.getProfileAppConnectionsUrl()} />
     <Tab text="Din data" {...appUrls.getProfileUserDataUrl()} />
+    <Tab text="Kalender" {...appUrls.getProfileCalendarUrl()} />
   </div>
 );