Merge pull request #21 from GRA0007/dev

Outlook calendar sync
2021-06-01 23:39:34 +10:00 · 2021-06-01 23:39:34 +10:00 · bd2188c812
parent 0d5a86a55f e03ddf6814
commit bd2188c812
11 changed files with 389 additions and 17 deletions
--- a/crabfit-frontend/package.json
+++ b/crabfit-frontend/package.json
@ -3,8 +3,10 @@
  "version": "1.0.0",
  "private": true,
  "dependencies": {
+    "@azure/msal-browser": "^2.14.2",
    "@emotion/react": "^11.1.5",
    "@emotion/styled": "^11.1.5",
+    "@microsoft/microsoft-graph-client": "^2.2.1",
    "@testing-library/jest-dom": "^5.11.4",
    "@testing-library/react": "^11.1.0",
    "@testing-library/user-event": "^12.1.10",
--- a/crabfit-frontend/public/.well-known/microsoft-identity-association.json
+++ b/crabfit-frontend/public/.well-known/microsoft-identity-association.json
@ -0,0 +1,7 @@
+{
+  "associatedApplications": [
+    {
+      "applicationId": "78739601-9834-4d41-a281-74ca2a50b2e6"
+    }
+  ]
+}
--- a/crabfit-frontend/public/i18n/en/event.json
+++ b/crabfit-frontend/public/i18n/en/event.json
@ -58,6 +58,7 @@
      "select_none": "Select none",
      "info": "Importing will overwrite your current availability",
      "button": "Import availability"
-    }
+    },
+    "outlook_cal": "Sync with Outlook Calendar"
  }
 }
--- a/crabfit-frontend/src/components/AvailabilityEditor/AvailabilityEditor.tsx
+++ b/crabfit-frontend/src/components/AvailabilityEditor/AvailabilityEditor.tsx
@ -5,6 +5,8 @@ import dayjs from 'dayjs';
 import localeData from 'dayjs/plugin/localeData';
 import customParseFormat from 'dayjs/plugin/customParseFormat';
 import isBetween from 'dayjs/plugin/isBetween';
+import dayjs_timezone from 'dayjs/plugin/timezone';
+import utc from 'dayjs/plugin/utc';

 import {
 	Wrapper,
@ -22,11 +24,13 @@ import {
 } from 'components/AvailabilityViewer/availabilityViewerStyle';
 import { Time } from './availabilityEditorStyle';

-import { GoogleCalendar, Center } from 'components';
+import { GoogleCalendar, OutlookCalendar, Center } from 'components';

 dayjs.extend(localeData);
 dayjs.extend(customParseFormat);
 dayjs.extend(isBetween);
+dayjs.extend(utc);
+dayjs.extend(dayjs_timezone);

 const AvailabilityEditor = ({
 	times,
@ -63,6 +67,7 @@ const AvailabilityEditor = ({
      </StyledMain>
      {isSpecificDates && (
        <StyledMain>
+          <div style={{ display: 'flex', flexWrap: 'wrap', alignItems: 'center', justifyContent: 'center', gap: 12 }}>
            <GoogleCalendar
              timeMin={dayjs(times[0], 'HHmm-DDMMYYYY').toISOString()}
              timeMax={dayjs(times[times.length-1], 'HHmm-DDMMYYYY').add(15, 'm').toISOString()}
@ -73,6 +78,17 @@ const AvailabilityEditor = ({
                ))
              )}
            />
+            <OutlookCalendar
+              timeMin={dayjs(times[0], 'HHmm-DDMMYYYY').toISOString()}
+              timeMax={dayjs(times[times.length-1], 'HHmm-DDMMYYYY').add(15, 'm').toISOString()}
+              timeZone={timezone}
+              onImport={busyArray => onChange(
+                times.filter(time => !busyArray.some(busy =>
+                  dayjs(time, 'HHmm-DDMMYYYY').isBetween(dayjs.tz(busy.start.dateTime, busy.start.timeZone), dayjs.tz(busy.end.dateTime, busy.end.timeZone), null, '[)')
+                ))
+              )}
+            />
+          </div>
        </StyledMain>
      )}

--- a/crabfit-frontend/src/components/CalendarField/calendarFieldStyle.ts
+++ b/crabfit-frontend/src/components/CalendarField/calendarFieldStyle.ts
@ -70,6 +70,7 @@ export const Date = styled.button`
  color: inherit;
  background: none;
  border: 0;
+  margin: 0;
  appearance: none;

 	background-color: ${props => props.theme.primaryBackground};
--- a/crabfit-frontend/src/components/GoogleCalendar/GoogleCalendar.tsx
+++ b/crabfit-frontend/src/components/GoogleCalendar/GoogleCalendar.tsx
@ -12,6 +12,8 @@ import {
  CalendarLabel,
  Info,
  Options,
+  Title,
+  Icon,
 } from './googleCalendarStyle';

 import googleLogo from 'res/google.svg';
@ -109,13 +111,15 @@ const GoogleCalendar = ({ timeZone, timeMin, timeMax, onImport }) => {
        </Center>
      ) : (
        <CalendarList>
-          <p>
+          <Title>
+            <Icon src={googleLogo} alt="" />
            {/* eslint-disable-next-line */}
-            <strong>{t('event:you.google_cal.login')}</strong> (<a href="#" onClick={e => {
+            <strong>{t('event:you.google_cal.login')}</strong>
+            (<a href="#" onClick={e => {
              e.preventDefault();
              signOut();
            }}>{t('event:you.google_cal.logout')}</a>)
-          </p>
+          </Title>
          <Options>
            {calendars !== undefined && !calendars.every(c => c.checked) && (
              /* eslint-disable-next-line */
--- a/crabfit-frontend/src/components/GoogleCalendar/googleCalendarStyle.ts
+++ b/crabfit-frontend/src/components/GoogleCalendar/googleCalendarStyle.ts
@ -12,6 +12,7 @@ export const LoginButton = styled.div`
 `;

 export const CalendarList = styled.div`
+  width: 100%;
  & > div {
    display: flex;
    margin: 2px 0;
@ -110,3 +111,18 @@ export const Options = styled.div`
  font-size: 14px;
  padding: 0 0 5px;
 `;
+
+export const Title = styled.p`
+  display: flex;
+  align-items: center;
+
+  & strong {
+    margin-right: 1ex;
+  }
+`;
+
+export const Icon = styled.img`
+  height: 24px;
+  width: 24px;
+  margin-right: 12px;
+`;
--- a/crabfit-frontend/src/components/OutlookCalendar/OutlookCalendar.tsx
+++ b/crabfit-frontend/src/components/OutlookCalendar/OutlookCalendar.tsx
@ -0,0 +1,240 @@
+import { useState, useEffect } from 'react';
+import { PublicClientApplication } from "@azure/msal-browser";
+import { Client } from "@microsoft/microsoft-graph-client";
+import { useTranslation } from 'react-i18next';
+
+import { Button, Center } from 'components';
+import { Loader } from '../Loading/loadingStyle';
+import {
+  LoginButton,
+  CalendarList,
+  CheckboxInput,
+  CheckboxLabel,
+  CalendarLabel,
+  Info,
+  Options,
+  Title,
+  Icon,
+} from '../GoogleCalendar/googleCalendarStyle';
+
+import outlookLogo from 'res/outlook.svg';
+
+// Initialise the MSAL object
+const publicClientApplication = new PublicClientApplication({
+  auth: {
+    clientId: '78739601-9834-4d41-a281-74ca2a50b2e6',
+    redirectUri: process.env.NODE_ENV === 'production' ? 'https://crab.fit' : 'http://localhost:3000',
+  },
+  cache: {
+    cacheLocation: 'sessionStorage',
+    storeAuthStateInCookie: true,
+  },
+});
+
+const getAuthenticatedClient = accessToken => {
+  const client = Client.init({
+    authProvider: done => done(null, accessToken),
+  });
+  return client;
+};
+
+const OutlookCalendar = ({ timeZone, timeMin, timeMax, onImport }) => {
+  const [client, setClient] = useState(undefined);
+  const [calendars, setCalendars] = useState(undefined);
+  const [freeBusyLoading, setFreeBusyLoading] = useState(false);
+  const { t } = useTranslation('event');
+
+  const checkLogin = async () => {
+    const accounts = publicClientApplication.getAllAccounts();
+    if (accounts && accounts.length > 0) {
+      try {
+        const accessToken = await getAccessToken();
+        setClient(getAuthenticatedClient(accessToken));
+      } catch (e) {
+        console.error(e);
+        signOut();
+      }
+    } else {
+      setClient(null);
+    }
+  };
+
+  const signIn = async () => {
+    try {
+      await publicClientApplication.loginPopup({
+        scopes: ['Calendars.Read', 'Calendars.Read.Shared'],
+      });
+    } catch (e) {
+      console.error(e);
+    } finally {
+      checkLogin();
+    }
+  };
+
+  const signOut = async () => {
+    try {
+      await publicClientApplication.logoutRedirect({
+        onRedirectNavigate: () => false,
+      });
+    } catch (e) {
+      console.error(e);
+    } finally {
+      checkLogin();
+    }
+  };
+
+  const getAccessToken = async () => {
+    try {
+      const accounts = publicClientApplication.getAllAccounts();
+      if (accounts.length <= 0) throw new Error('login_required');
+
+      // Try to get silently
+      const result = await publicClientApplication.acquireTokenSilent({
+        scopes: ['Calendars.Read', 'Calendars.Read.Shared'],
+        account: accounts[0],
+      });
+      return result.accessToken;
+    } catch (e) {
+      if ([
+        'consent_required',
+        'interaction_required',
+        'login_required',
+        'no_account_in_silent_request'
+      ].includes(e.message)) {
+        // Try to get with popup
+        const result = await publicClientApplication.acquireTokenPopup({
+          scopes: ['Calendars.Read', 'Calendars.Read.Shared'],
+        });
+        return result.accessToken;
+      } else {
+        throw e;
+      }
+    }
+  };
+
+  const importAvailability = () => {
+    setFreeBusyLoading(true);
+    gtag('event', 'outlook_cal_sync', {
+      'event_category': 'event',
+    });
+    client.api('/me/calendar/getSchedule').post({
+      schedules: calendars.filter(c => c.checked).map(c => c.id),
+      startTime: {
+        dateTime: timeMin,
+        timeZone,
+      },
+      endTime: {
+        dateTime: timeMax,
+        timeZone,
+      },
+      availabilityViewInterval: 30,
+    })
+      .then(response => {
+        onImport(response.value.reduce((busy, c) => c.hasOwnProperty('error') ? busy : [...busy, ...c.scheduleItems.filter(item => item.status === 'busy' || item.status === 'tentative')], []));
+      })
+      .catch(e => {
+        console.error(e);
+        signOut();
+      })
+      .finally(() => setFreeBusyLoading(false));
+  };
+
+  useEffect(() => checkLogin(), []);
+
+  useEffect(() => {
+    if (client) {
+      client.api('/me/calendars').get()
+        .then(response => {
+          setCalendars(response.value.map(item => ({
+            'name': item.name,
+            'description': item.owner.name,
+            'id': item.owner.address,
+            'color': item.hexColor,
+            'checked': item.isDefaultCalendar === true,
+          })));
+        })
+        .catch(e => {
+          console.error(e);
+          signOut();
+        });
+    }
+  }, [client]);
+
+	return (
+    <>
+      {!client ? (
+        <Center>
+    		  <Button
+            onClick={() => signIn()}
+            isLoading={client === undefined}
+            buttonWidth={`${Math.max(t('event:you.outlook_cal').length*10, 270)}px`}
+            primaryColor="#0364B9"
+            secondaryColor="#02437D">
+            <LoginButton>
+              <img src={outlookLogo} alt="" />
+              <span>{t('event:you.outlook_cal')}</span>
+            </LoginButton>
+          </Button>
+        </Center>
+      ) : (
+        <CalendarList>
+          <Title>
+            <Icon src={outlookLogo} alt="" />
+            {/* eslint-disable-next-line */}
+            <strong>{t('event:you.outlook_cal')}</strong>
+            (<a href="#" onClick={e => {
+              e.preventDefault();
+              signOut();
+            }}>{t('event:you.google_cal.logout')}</a>)
+          </Title>
+          <Options>
+            {calendars !== undefined && !calendars.every(c => c.checked) && (
+              /* eslint-disable-next-line */
+              <a href="#" onClick={e => {
+                e.preventDefault();
+                setCalendars(calendars.map(c => ({...c, checked: true})));
+              }}>{t('event:you.google_cal.select_all')}</a>
+            )}
+            {calendars !== undefined && calendars.every(c => c.checked) && (
+              /* eslint-disable-next-line */
+              <a href="#" onClick={e => {
+                e.preventDefault();
+                setCalendars(calendars.map(c => ({...c, checked: false})));
+              }}>{t('event:you.google_cal.select_none')}</a>
+            )}
+          </Options>
+          {calendars !== undefined ? calendars.map(calendar => (
+            <div key={calendar.id}>
+              <CheckboxInput
+                type="checkbox"
+                role="checkbox"
+                id={calendar.id}
+                color={calendar.color}
+                checked={calendar.checked}
+                onChange={e => setCalendars(calendars.map(c => c.id === calendar.id ? {...c, checked: !c.checked} : c))}
+              />
+              <CheckboxLabel htmlFor={calendar.id} color={calendar.color} />
+              <CalendarLabel htmlFor={calendar.id}>{calendar.name}</CalendarLabel>
+            </div>
+          )) : (
+            <Loader />
+          )}
+          {calendars !== undefined && (
+            <>
+              <Info>{t('event:you.google_cal.info')}</Info>
+              <Button
+                buttonWidth="170px"
+                buttonHeight="35px"
+                isLoading={freeBusyLoading}
+                disabled={freeBusyLoading}
+                onClick={() => importAvailability()}
+              >{t('event:you.google_cal.button')}</Button>
+            </>
+          )}
+        </CalendarList>
+      )}
+    </>
+	);
+};
+
+export default OutlookCalendar;
--- a/crabfit-frontend/src/components/index.ts
+++ b/crabfit-frontend/src/components/index.ts
@ -11,6 +11,7 @@ export { default as AvailabilityEditor } from './AvailabilityEditor/Availability
 export { default as Error } from './Error/Error';
 export { default as Loading } from './Loading/Loading';
 export { default as GoogleCalendar } from './GoogleCalendar/GoogleCalendar';
+export { default as OutlookCalendar } from './OutlookCalendar/OutlookCalendar';

 export { default as Center } from './Center/Center';
 export { default as Donate } from './Donate/Donate';
--- a/crabfit-frontend/src/res/outlook.svg
+++ b/crabfit-frontend/src/res/outlook.svg
@ -0,0 +1,54 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Generator: Adobe Illustrator 15.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   version="1.1"
+   id="Layer_1"
+   x="0px"
+   y="0px"
+   width="103.17322"
+   height="104.31332"
+   viewBox="0 0 103.17322 104.31332"
+   enable-background="new 0 0 190 50"
+   xml:space="preserve"
+   inkscape:version="0.48.2 r9819"
+   sodipodi:docname="Outlook_logo.svg"><metadata
+   id="metadata45"><rdf:RDF><cc:Work
+       rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type
+         rdf:resource="http://purl.org/dc/dcmitype/StillImage" /><dc:title></dc:title></cc:Work></rdf:RDF></metadata><defs
+   id="defs43" />
+<path
+   d="m 64.566509,22.116383 v 20.404273 l 7.130526,4.489881 c 0.188058,0.05485 0.595516,0.05877 0.783574,0 L 103.16929,26.320259 c 0,-2.44867 -2.28412,-4.203876 -3.573094,-4.203876 H 64.566509 z"
+   id="path3"
+   inkscape:connector-curvature="0"
+   style="fill:#FFFFFF" />
+<path
+   d="m 64.566509,50.13308 6.507584,4.470291 c 0.916782,0.673874 2.021622,0 2.021622,0 -1.100922,0.673874 30.077495,-20.035993 30.077495,-20.035993 v 37.501863 c 0,4.082422 -2.61322,5.794531 -5.551621,5.794531 H 64.562591 V 50.13308 z"
+   id="path5"
+   inkscape:connector-curvature="0"
+   style="fill:#FFFFFF" />
+
+
+<g
+   id="g23"
+   transform="matrix(3.9178712,0,0,3.9178712,-13.481403,-41.384473)">
+	<path
+   d="m 11.321,20.958 c -0.566,0 -1.017,0.266 -1.35,0.797 -0.333,0.531 -0.5,1.234 -0.5,2.109 0,0.888 0.167,1.59 0.5,2.106 0.333,0.517 0.77,0.774 1.31,0.774 0.557,0 0.999,-0.251 1.325,-0.753 0.326,-0.502 0.49,-1.199 0.49,-2.09 0,-0.929 -0.158,-1.652 -0.475,-2.169 -0.317,-0.516 -0.75,-0.774 -1.3,-0.774 z"
+   id="path25"
+   inkscape:connector-curvature="0"
+   style="fill:#FFFFFF" />
+	<path
+   d="m 3.441,13.563 v 20.375 l 15.5,3.25 V 10.563 l -15.5,3 z m 10.372,13.632 c -0.655,0.862 -1.509,1.294 -2.563,1.294 -1.027,0 -1.863,-0.418 -2.51,-1.253 C 8.094,26.4 7.77,25.312 7.77,23.97 c 0,-1.417 0.328,-2.563 0.985,-3.438 0.657,-0.875 1.527,-1.313 2.61,-1.313 1.023,0 1.851,0.418 2.482,1.256 0.632,0.838 0.948,1.942 0.948,3.313 10e-4,1.409 -0.327,2.545 -0.982,3.407 z"
+   id="path27"
+   inkscape:connector-curvature="0"
+   style="fill:#FFFFFF" />
+</g>
+
+</svg>
--- a/crabfit-frontend/yarn.lock
+++ b/crabfit-frontend/yarn.lock
@ -2,6 +2,20 @@
 # yarn lockfile v1


+"@azure/msal-browser@^2.14.2":
+  version "2.14.2"
+  resolved "https://registry.yarnpkg.com/@azure/msal-browser/-/msal-browser-2.14.2.tgz#4efa031ad16d5a3a527eddb6222e15dd6e2ea3e8"
+  integrity sha512-JKHE9Rer41CI8tweiyE91M8ZbGvQV9P+jOPB4ZtPxyxCi2f7ED3jNfdzyUJ1eGB+hCRnvO56M1Xc61T1R+JfYg==
+  dependencies:
+    "@azure/msal-common" "^4.3.0"
+
+"@azure/msal-common@^4.3.0":
+  version "4.3.0"
+  resolved "https://registry.yarnpkg.com/@azure/msal-common/-/msal-common-4.3.0.tgz#b540e92748656724088bf77192e59943a93135bc"
+  integrity sha512-jFqUWe83wVb6O8cNGGBFg2QlKvqM1ezUgJTEV7kIsAPX0RXhGFE4B1DLNt6hCnkTXDbw+KGW0zgxOEr4MJQwLw==
+  dependencies:
+    debug "^4.1.1"
+
 "@babel/code-frame@7.10.4":
  version "7.10.4"
  resolved "https://registry.yarnpkg.com/@babel/code-frame/-/code-frame-7.10.4.tgz#168da1a36e90da68ae8d49c0f1b48c7c6249213a"
@ -1105,7 +1119,7 @@
  dependencies:
    regenerator-runtime "^0.13.4"

-"@babel/runtime@^7.12.0", "@babel/runtime@^7.13.6":
+"@babel/runtime@^7.12.0", "@babel/runtime@^7.13.6", "@babel/runtime@^7.4.4":
  version "7.14.0"
  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.14.0.tgz#46794bc20b612c5f75e62dd071e24dfd95f1cbe6"
  integrity sha512-JELkvo/DlpNdJ7dlyw/eY7E0suy5i5GQH+Vlxaq1nsNJ+H7f4Vtv3jMeCEgRhZZQFXTjldYfQgv2qmM6M1v5wA==
@ -1504,6 +1518,15 @@
    "@types/yargs" "^15.0.0"
    chalk "^4.0.0"

+"@microsoft/microsoft-graph-client@^2.2.1":
+  version "2.2.1"
+  resolved "https://registry.yarnpkg.com/@microsoft/microsoft-graph-client/-/microsoft-graph-client-2.2.1.tgz#0ef045e1210551f234466a234bb0c60ea2ad8334"
+  integrity sha512-fbDN3UJ+jtSP9llAejqmslMcv498YuIrS3OS/Luivb8OSjdUESZKdP0gcUunnuNIayePVT0/bGYSJTzAIptJQQ==
+  dependencies:
+    "@babel/runtime" "^7.4.4"
+    msal "^1.4.4"
+    tslib "^1.9.3"
+
 "@nodelib/fs.scandir@2.1.4":
  version "2.1.4"
  resolved "https://registry.yarnpkg.com/@nodelib/fs.scandir/-/fs.scandir-2.1.4.tgz#d4b3549a5db5de2683e0c1071ab4f140904bbf69"
@ -7485,6 +7508,13 @@ ms@^2.1.1:
  resolved "https://registry.yarnpkg.com/ms/-/ms-2.1.3.tgz#574c8138ce1d2b5861f0b44579dbadd60c6615b2"
  integrity sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==

+msal@^1.4.4:
+  version "1.4.11"
+  resolved "https://registry.yarnpkg.com/msal/-/msal-1.4.11.tgz#255e74e200ee5d603dca30e4e48e47fb57441370"
+  integrity sha512-8vW5/+irlcQQk87r8Qp3/kQEc552hr7FQLJ6GF5LLkqnwJDDxrswz6RYPiQhmiampymIs0PbHVZrNf8m+6DmgQ==
+  dependencies:
+    tslib "^1.9.3"
+
 multicast-dns-service-types@^1.1.0:
  version "1.1.0"
  resolved "https://registry.yarnpkg.com/multicast-dns-service-types/-/multicast-dns-service-types-1.1.0.tgz#899f11d9686e5e05cb91b35d5f0e63b773cfc901"
@ -10834,7 +10864,7 @@ tsconfig-paths@^3.9.0:
    minimist "^1.2.0"
    strip-bom "^3.0.0"

-tslib@^1.8.1, tslib@^1.9.0:
+tslib@^1.8.1, tslib@^1.9.0, tslib@^1.9.3:
  version "1.14.1"
  resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.14.1.tgz#cf2d38bdc34a134bcaf1091c41f6619e2f672d00"
  integrity sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==