✨ Add graphical support for polls

Closes #43

src/components/Message/Message.tsx

@@ -2,8 +2,10 @@ import { Suspense } from 'react';
 import Linkify from 'react-linkify';
 
 import Attachment from '../Attachment/Attachment';
+import Poll from '../Poll/Poll';
 import * as S from './style';
 import { IndexedMessage } from '../../types';
+import { parsePollMessage } from '../../utils/poll-parser';
 
 function Link(
   decoratedHref: string,
@@ -32,6 +34,22 @@ function Message({
 }: IMessage) {
   const isSystem = !message.author;
   const dateTime = message.date.toISOString().slice(0, 19).replace('T', ' ');
+  const pollData = parsePollMessage(message.message);
+  let messageComponent = (
+    <Linkify componentDecorator={Link}>
+      <S.Message>{message.message}</S.Message>
+    </Linkify>
+  );
+
+  if (message.attachment) {
+    messageComponent = (
+      <Suspense fallback={`Loading ${message.attachment.fileName}...`}>
+        <Attachment fileName={message.attachment.fileName} />
+      </Suspense>
+    );
+  } else if (pollData !== null) {
+    messageComponent = <Poll pollData={pollData} />;
+  }
 
   return (
     <S.Item
@@ -47,15 +65,7 @@ function Message({
           {!isSystem && !sameAuthorAsPrevious && (
             <S.Author color={color}>{message.author}</S.Author>
           )}
-          {message.attachment ? (
-            <Suspense fallback={`Loading ${message.attachment.fileName}...`}>
-              <Attachment fileName={message.attachment.fileName} />
-            </Suspense>
-          ) : (
-            <Linkify componentDecorator={Link}>
-              <S.Message>{message.message}</S.Message>
-            </Linkify>
-          )}
+          {messageComponent}
         </S.Wrapper>
         {!isSystem && (
           <S.Date dateTime={dateTime}>

src/components/Poll/Poll.tsx

@@ -0,0 +1,27 @@
+import { PollStructure } from '../../types';
+import * as S from './style';
+
+interface IPoll {
+  pollData: PollStructure;
+}
+
+function Poll({ pollData }: IPoll) {
+  return (
+    <S.Poll>
+      <S.Title>{pollData.title}</S.Title>
+      {pollData.options.map(option => {
+        return (
+          <S.Option key={option.text}>
+            <div>{option.text}</div>
+            <S.Flex>
+              <S.Progress max={pollData.maxVotes} value={option.votes} />
+              <div>{option.votes}</div>
+            </S.Flex>
+          </S.Option>
+        );
+      })}
+    </S.Poll>
+  );
+}
+
+export default Poll;

src/components/Poll/style.ts

@@ -0,0 +1,62 @@
+import styled from 'styled-components';
+import {
+  activeUserDarkBackgroundColor,
+  viewerDarkBackgroundColor,
+  whatsappThemeColor,
+} from '../../utils/colors';
+
+const Poll = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 0.6rem;
+`;
+
+const Title = styled.div`
+  font-weight: bolder;
+`;
+
+const Option = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 0.2rem;
+`;
+
+const Flex = styled.div`
+  display: flex;
+  gap: 0.5rem;
+  align-items: center;
+  font-size: 0.8rem;
+`;
+
+const Progress = styled.progress`
+  display: block;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
+  width: 100%;
+  max-width: 500px;
+  height: 10px;
+  appearance: none;
+  border-radius: 99px;
+  padding: 1px;
+
+  &::-webkit-progress-bar {
+    background-color: white;
+    border-radius: 99px;
+  }
+
+  &::-webkit-progress-value {
+    background-color: ${whatsappThemeColor};
+    border-radius: 99px;
+  }
+
+  @media (prefers-color-scheme: dark) {
+    &::-webkit-progress-bar {
+      background-color: color-mix(
+        in srgb,
+        ${activeUserDarkBackgroundColor},
+        ${viewerDarkBackgroundColor}
+      );
+    }
+  }
+`;
+
+export { Poll, Title, Option, Flex, Progress };

src/types.ts

@@ -19,4 +19,23 @@ interface DateBounds {
   end: Date;
 }
 
-export type { FilterMode, ExtractedFile, IndexedMessage, ILimits, DateBounds };
+interface PollOption {
+  text: string;
+  votes: number;
+}
+
+interface PollStructure {
+  title: string;
+  options: PollOption[];
+  maxVotes: number;
+}
+
+export type {
+  FilterMode,
+  ExtractedFile,
+  IndexedMessage,
+  ILimits,
+  DateBounds,
+  PollOption,
+  PollStructure,
+};

src/utils/poll-parser.ts

@@ -0,0 +1,31 @@
+import { PollOption, PollStructure } from '../types';
+
+function parsePollMessage(message: string): PollStructure | null {
+  const lines = message
+    .trim()
+    .split('\n')
+    .map(line => line.trim());
+
+  if (!lines[0].includes('POLL:') || !lines[2]?.includes('OPTION:'))
+    return null;
+
+  const optionRegex = /OPTION: (?<text>.+) \((?<votes>\d+).*\)/;
+
+  const options = lines.slice(2).reduce<PollOption[]>((acc, line) => {
+    const match = optionRegex.exec(line);
+
+    if (!match?.groups) return acc;
+
+    const { text, votes } = match.groups;
+
+    return acc.concat({ text, votes: Number(votes) });
+  }, []);
+
+  return {
+    title: lines[1],
+    options,
+    maxVotes: Math.max(...options.map(o => o.votes)),
+  };
+}
+
+export { parsePollMessage };