From ea213f5f6ece4b7fe3eba703f23430f7e00e681a Mon Sep 17 00:00:00 2001 From: Osama El Hariri Date: Fri, 4 Nov 2022 22:06:01 +0200 Subject: [PATCH 01/14] Add event calendar skeleton design --- src/assets/scss/base/pages.scss | 39 +++++++++++++++++++++++++++++++++ src/pages/MailDetail.tsx | 35 +++++++++++++++++++++++++++++ 2 files changed, 74 insertions(+) diff --git a/src/assets/scss/base/pages.scss b/src/assets/scss/base/pages.scss index 2b16ff5b..9efedb61 100644 --- a/src/assets/scss/base/pages.scss +++ b/src/assets/scss/base/pages.scss @@ -614,6 +614,45 @@ a.compose-mail { margin-right: 5px; } +/* EVENTBOX */ + +.event-box { + background-color: #ffffff; + border: 1px solid $border-color; + padding: 20px; + border-bottom: 0; +} + +.event-box-details { + display: flex; + flex-direction: row; + gap: 20px; + padding-top: 12px; +} + +.event-box-details-part { + display: flex; + flex-direction: row; + gap: 10px; +} + +.event-box-details-labels { + display: flex; + flex-direction: column; + gap: 5px; + opacity: 0.6; +} + +.event-box-details-values { + display: flex; + flex-direction: column; + gap: 5px; +} + +.event-box-description { + padding-top: 5px; +} + /* MAILBOX */ .mail-box { diff --git a/src/pages/MailDetail.tsx b/src/pages/MailDetail.tsx index 0a3799ab..3b4f01ee 100644 --- a/src/pages/MailDetail.tsx +++ b/src/pages/MailDetail.tsx @@ -131,6 +131,41 @@ const MailDetail = observer(() => { +
+

+ Event Name +

+
+
+
+
Start
+
End
+
+
+
Tue Nov 1 3am - Tue Nov 01, 2022 2:45am (AST)
+
Tue Nov 1 3am - Tue Nov 01, 2022 2:45am (AST)
+
+
+
+
+
Where
+
Who
+
+
+
Somewhere
+
Someone
+
+
+
+
+
+
Description
+
+
+
This is another desc.
+
+
+
{data.blocks ? ( From e915f8f8baff2689b9c83016a5190275bfdc8dc3 Mon Sep 17 00:00:00 2001 From: Osama El Hariri Date: Sun, 6 Nov 2022 10:36:51 +0200 Subject: [PATCH 02/14] Display event details in a table --- src/assets/scss/base/pages.scss | 24 ++++----------- src/pages/MailDetail.tsx | 52 +++++++++++++++------------------ 2 files changed, 30 insertions(+), 46 deletions(-) diff --git a/src/assets/scss/base/pages.scss b/src/assets/scss/base/pages.scss index 9efedb61..5a3b2ebc 100644 --- a/src/assets/scss/base/pages.scss +++ b/src/assets/scss/base/pages.scss @@ -628,31 +628,19 @@ a.compose-mail { flex-direction: row; gap: 20px; padding-top: 12px; -} -.event-box-details-part { - display: flex; - flex-direction: row; - gap: 10px; + td { + vertical-align: top; + padding-bottom: 5px; + padding-right: 5px; + } } -.event-box-details-labels { - display: flex; - flex-direction: column; +.event-box-label { gap: 5px; opacity: 0.6; } -.event-box-details-values { - display: flex; - flex-direction: column; - gap: 5px; -} - -.event-box-description { - padding-top: 5px; -} - /* MAILBOX */ .mail-box { diff --git a/src/pages/MailDetail.tsx b/src/pages/MailDetail.tsx index 3b4f01ee..b9c015aa 100644 --- a/src/pages/MailDetail.tsx +++ b/src/pages/MailDetail.tsx @@ -136,34 +136,30 @@ const MailDetail = observer(() => { Event Name
-
-
-
Start
-
End
-
-
-
Tue Nov 1 3am - Tue Nov 01, 2022 2:45am (AST)
-
Tue Nov 1 3am - Tue Nov 01, 2022 2:45am (AST)
-
-
-
-
-
Where
-
Who
-
-
-
Somewhere
-
Someone
-
-
-
-
-
-
Description
-
-
-
This is another desc.
-
+ + + + + + + + + + + + + + + + + + + + + + + +
StartTue Nov 1 3am - Tue Nov 01, 2022 2:45am (AST)EndTue Nov 1 3am - Tue Nov 01, 2022 2:45am (AST)
WhereSomewhereWhoSomeone
Event Filefilename.ics
DescriptionThis is another desc. This is another desc.This is another desc.This is another desc.This is another desc.This is another desc.This is another desc.This is another desc.This is another desc.This is another desc.This is another desc.
From 998bf0de3030c842e3c1671e0622a81f95a260a1 Mon Sep 17 00:00:00 2001 From: Osama El Hariri Date: Sun, 6 Nov 2022 10:53:16 +0200 Subject: [PATCH 03/14] Add event file download --- src/pages/MailDetail.tsx | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/src/pages/MailDetail.tsx b/src/pages/MailDetail.tsx index b9c015aa..c6db7a50 100644 --- a/src/pages/MailDetail.tsx +++ b/src/pages/MailDetail.tsx @@ -50,6 +50,10 @@ const MailDetail = observer(() => { } })(); + const downloadUrl = URL.createObjectURL(new Blob(["My amazing file!!"], { + type: "text/plain;charset=utf-8" + })); + const replyClickHandler = () => { mailbox.to = message.msg.senderAddress ? [ @@ -152,7 +156,9 @@ const MailDetail = observer(() => { Event File - filename.ics + + filename.ics + Description From f11147b9f53ecc61de209c6dc5f818cbb15baa40 Mon Sep 17 00:00:00 2001 From: Osama El Hariri Date: Sun, 6 Nov 2022 11:26:00 +0200 Subject: [PATCH 04/14] Add calendar icon to event name --- src/pages/MailDetail.tsx | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/src/pages/MailDetail.tsx b/src/pages/MailDetail.tsx index c6db7a50..1c2a7de9 100644 --- a/src/pages/MailDetail.tsx +++ b/src/pages/MailDetail.tsx @@ -12,6 +12,7 @@ import { useNav } from '../utils/navigate'; import moment from 'moment'; import mailList from '../stores/MailList'; import { IMessageDecodedContent } from '../indexedDB/MessagesDB'; +import { CalendarOutlined } from '@ant-design/icons'; const ReactEditorJS = createReactEditorJS(); @@ -137,7 +138,9 @@ const MailDetail = observer(() => {

- Event Name + + + Event Name

From beff65f6b2a18e20fc02c65612ac4e6dcd771975 Mon Sep 17 00:00:00 2001 From: Osama El Hariri Date: Tue, 8 Nov 2022 22:16:53 +0200 Subject: [PATCH 05/14] Parse event file string and display data --- package-lock.json | 32 +++++++++++++++++++++++++ package.json | 1 + src/pages/MailDetail.tsx | 45 ++++++++++++++++++++++++++++-------- src/utils/eventFileString.ts | 13 +++++++++++ 4 files changed, 81 insertions(+), 10 deletions(-) create mode 100644 src/utils/eventFileString.ts diff --git a/package-lock.json b/package-lock.json index eb3be1f7..e3e69b7f 100644 --- a/package-lock.json +++ b/package-lock.json @@ -28,6 +28,7 @@ "core-decorators": "^0.20.0", "eventemitter3": "^4.0.7", "fuzzysort": "^2.0.1", + "ical-js-parser": "^0.7.0", "mobx": "^6.5.0", "mobx-react": "^7.4.0", "react": "^17.0.2", @@ -12429,6 +12430,22 @@ "node": ">=10.17.0" } }, + "node_modules/ical-js-parser": { + "version": "0.7.0", + "resolved": "https://registry.npmjs.org/ical-js-parser/-/ical-js-parser-0.7.0.tgz", + "integrity": "sha512-oKxIw7yZLvZd/hFf0c8idHVJXBTSz3xj8QPvH3KuHncO0SMfuYzLXXZB4aZLS+5ZMh4h0bgErhBDjtksKaH1Ng==", + "dependencies": { + "luxon": "3.0.3" + } + }, + "node_modules/ical-js-parser/node_modules/luxon": { + "version": "3.0.3", + "resolved": "https://registry.npmjs.org/luxon/-/luxon-3.0.3.tgz", + "integrity": "sha512-+EfHWnF+UT7GgTnq5zXg3ldnTKL2zdv7QJgsU5bjjpbH17E3qi/puMhQyJVYuCq+FRkogvB5WB6iVvUr+E4a7w==", + "engines": { + "node": ">=12" + } + }, "node_modules/iconv-lite": { "version": "0.6.3", "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.6.3.tgz", @@ -34487,6 +34504,21 @@ "integrity": "sha512-B4FFZ6q/T2jhhksgkbEW3HBvWIfDW85snkQgawt07S7J5QXTk6BkNV+0yAeZrM5QpMAdYlocGoljn0sJ/WQkFw==", "dev": true }, + "ical-js-parser": { + "version": "0.7.0", + "resolved": "https://registry.npmjs.org/ical-js-parser/-/ical-js-parser-0.7.0.tgz", + "integrity": "sha512-oKxIw7yZLvZd/hFf0c8idHVJXBTSz3xj8QPvH3KuHncO0SMfuYzLXXZB4aZLS+5ZMh4h0bgErhBDjtksKaH1Ng==", + "requires": { + "luxon": "3.0.3" + }, + "dependencies": { + "luxon": { + "version": "3.0.3", + "resolved": "https://registry.npmjs.org/luxon/-/luxon-3.0.3.tgz", + "integrity": "sha512-+EfHWnF+UT7GgTnq5zXg3ldnTKL2zdv7QJgsU5bjjpbH17E3qi/puMhQyJVYuCq+FRkogvB5WB6iVvUr+E4a7w==" + } + } + }, "iconv-lite": { "version": "0.6.3", "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.6.3.tgz", diff --git a/package.json b/package.json index 00cc9b16..81ef413e 100644 --- a/package.json +++ b/package.json @@ -23,6 +23,7 @@ "core-decorators": "^0.20.0", "eventemitter3": "^4.0.7", "fuzzysort": "^2.0.1", + "ical-js-parser": "^0.7.0", "mobx": "^6.5.0", "mobx-react": "^7.4.0", "react": "^17.0.2", diff --git a/src/pages/MailDetail.tsx b/src/pages/MailDetail.tsx index 1c2a7de9..894f11dd 100644 --- a/src/pages/MailDetail.tsx +++ b/src/pages/MailDetail.tsx @@ -13,6 +13,7 @@ import moment from 'moment'; import mailList from '../stores/MailList'; import { IMessageDecodedContent } from '../indexedDB/MessagesDB'; import { CalendarOutlined } from '@ant-design/icons'; +import { isEventFileString, parseEventFileString } from '../utils/eventFileString'; const ReactEditorJS = createReactEditorJS(); @@ -40,7 +41,7 @@ const MailDetail = observer(() => { mailList.decodeMessage(message); }; - const data = (() => { + const rawData = (() => { // console.log('decoded.decodedTextData: ', decoded.decodedTextData); if (typeof decoded?.decodedTextData === 'string') { return { @@ -51,9 +52,33 @@ const MailDetail = observer(() => { } })(); + const { data, eventData } = (() => { + if (!Array.isArray(rawData.blocks)) { + return { data: rawData, eventData: undefined }; + } + + const eventFileBlockIndex = rawData.blocks.findIndex((item: { data: { text: string }, type: string }) => { + if (item.type !== "paragraph") return false; + return isEventFileString(item.data.text); + }); + + if (eventFileBlockIndex < 0) { + return { data: rawData, eventData: undefined }; + } + + const eventFileData = parseEventFileString(rawData.blocks[eventFileBlockIndex].data.text); + rawData.blocks.splice(eventFileBlockIndex, 1); + + + return { + data: rawData, eventData: eventFileData + }; + + })(); + const downloadUrl = URL.createObjectURL(new Blob(["My amazing file!!"], { - type: "text/plain;charset=utf-8" - })); + type: "text/plain;charset=utf-8" + })); const replyClickHandler = () => { mailbox.to = message.msg.senderAddress @@ -136,7 +161,7 @@ const MailDetail = observer(() => { -
+ {eventData &&

@@ -147,15 +172,15 @@ const MailDetail = observer(() => {

- + - + - + - + @@ -165,12 +190,12 @@ const MailDetail = observer(() => { - +
StartTue Nov 1 3am - Tue Nov 01, 2022 2:45am (AST){eventData?.events[0].dtstart.value} EndTue Nov 1 3am - Tue Nov 01, 2022 2:45am (AST){eventData?.events[0].dtend.value}
WhereSomewhere{eventData?.events[0].location} WhoSomeone{eventData?.events[0].attendee?.map(person => person.EMAIL).join(', ')}
Event File
DescriptionThis is another desc. This is another desc.This is another desc.This is another desc.This is another desc.This is another desc.This is another desc.This is another desc.This is another desc.This is another desc.This is another desc.{eventData?.events[0].description}
-
+
}
{data.blocks ? ( diff --git a/src/utils/eventFileString.ts b/src/utils/eventFileString.ts new file mode 100644 index 00000000..6ab73067 --- /dev/null +++ b/src/utils/eventFileString.ts @@ -0,0 +1,13 @@ +import ICalParser from "ical-js-parser"; + +const separator = "===~~~===EVENTFILE===~~~==="; + +export const isEventFileString = (text: string) => { + return text.startsWith(separator) && text.endsWith(separator); +} + +export const parseEventFileString = (text: string) => { + const eventString = text.replaceAll(separator, '').trim(); + + return ICalParser.toJSON(eventString); +} From 593eb9892541f299469c234d770783412635e7b0 Mon Sep 17 00:00:00 2001 From: Osama El Hariri Date: Fri, 11 Nov 2022 13:12:34 +0200 Subject: [PATCH 06/14] Add event input fields --- .../Mailbox/MailboxEditor/MailboxEditor.tsx | 84 +++++++++++++++---- src/stores/Mailbox.ts | 20 +++-- 2 files changed, 82 insertions(+), 22 deletions(-) diff --git a/src/pages/ComposePage/components/Mailbox/MailboxEditor/MailboxEditor.tsx b/src/pages/ComposePage/components/Mailbox/MailboxEditor/MailboxEditor.tsx index b25fd48d..fdbd8598 100644 --- a/src/pages/ComposePage/components/Mailbox/MailboxEditor/MailboxEditor.tsx +++ b/src/pages/ComposePage/components/Mailbox/MailboxEditor/MailboxEditor.tsx @@ -27,23 +27,75 @@ const MailboxEditor = () => { } return ( -
- (instanceRef.current = instance)} - onInitialize={(instance: any) => { - instanceRef.current = instance; + <> +
-
+ > +
+ +
+ (mailbox.event.summary = e.target.value)} + /> +
+
+
+ +
+ (mailbox.event.startDateTime = e.target.value)} + /> +
+
+
+ +
+ (mailbox.event.endDateTime = e.target.value)} + /> +
+
+
+ +
+