Add settings page for getting personalized calendar link (#682)

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`;

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;

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;
+};

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;
+}
+

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 [email protected]
+`;
+
+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;

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>
 );