🐛 Fix Group Chat Rendering Problem: Do Not Return Null Group Chat Nam…

…es (#392)
Left-on-Read · Sep 22, 2022 · 590b614 · 590b614
1 parent 7f54f8b
commit 590b614
Show file tree

Hide file tree

Showing 15 changed files with 143 additions and 130 deletions.
diff --git a/app/.gitignore b/app/.gitignore
@@ -30,4 +30,5 @@ npm-debug.log.*
 
 # chat.db files
 *.db-shm
-*.db-wal
+*.db-wal
+*.db
diff --git a/app/src/__tests__/chat.db b/app/src/__tests__/chat.db
diff --git a/app/src/analysis/tables/GroupChatCoreTable.ts b/app/src/analysis/tables/GroupChatCoreTable.ts
@@ -19,9 +19,9 @@ export class GroupChatCoreTable extends Table {
         group by
             c."ROWID"
         having
-            count(distinct coalesced_contact_name) > 1)
+            count(distinct coalesced_contact_name) > 1),
     
-        SELECT 
+        GC_CORE_TABLE AS (SELECT 
         text,
         display_name,
         human_readable_date,
@@ -32,7 +32,9 @@ export class GroupChatCoreTable extends Table {
         REPLACE(REPLACE(associated_message_guid, "p:0/", ""), "p:1/", "")as associated_guid
         FROM core_main_table cm
         JOIN GROUP_CHAT_NAMES gcm
-        on cm.chat_id  = gcm.chat_id
+        on cm.chat_id  = gcm.chat_id)
+
+        SELECT * FROM GC_CORE_TABLE WHERE group_chat_name IS NOT NULL AND contact_name IS NOT NULL
     `;
 
     await sqlite3Wrapper.runP(this.db, q);

diff --git a/app/src/components/App.tsx b/app/src/components/App.tsx
@@ -33,7 +33,7 @@ export function App() {
 
   useEffect(() => {
     Chart.register({
-      id: 'lor-chartjs-no-data-to-display message',
+      id: 'lor-chartjs-no-data-to-display-message',
       afterDraw(chart) {
         const { datasets } = chart.data;
         const hasData = datasets.find(
@@ -93,12 +93,14 @@ export function App() {
           const { yAxis } = scales;
           ctx.font = '13px montserrat';
           ctx.fillStyle = 'gray';
+
+          const bottom = yAxis && yAxis.bottom ? yAxis.bottom : 0;
           ctx.fillText(
             'leftonread.me/download',
             chartArea.right - 155,
-            yAxis.bottom + options.yPaddingText
+            bottom + options.yPaddingText
           );
-          ctx.drawImage(image, 45, yAxis.bottom + options.yPaddingLogo);
+          ctx.drawImage(image, 45, bottom + options.yPaddingLogo);
           ctx.save(); // not sure if this .save() is even needed
         } else {
           image.onload = () => chart.draw();

diff --git a/app/src/components/Dashboard/GroupChatTab.tsx b/app/src/components/Dashboard/GroupChatTab.tsx
@@ -57,12 +57,17 @@ export function GroupChatTab({ filters }: { filters: SharedQueryFilters }) {
       try {
         const groupChatByFriendsDataList: GroupChatByFriends[] =
           await ipcRenderer.invoke('query-group-chat-by-friends', filters);
-
+        console.log(groupChatByFriendsDataList);
         setData(groupChatByFriendsDataList);
 
         const setGct = [
           ...new Set(
-            groupChatByFriendsDataList.map((obj) => obj.group_chat_name)
+            groupChatByFriendsDataList.map((obj) => {
+              if (!obj.group_chat_name) {
+                console.log(obj);
+              }
+              return obj.group_chat_name;
+            })
           ),
         ];
 

diff --git a/app/src/components/Graphs/GroupChats/GroupChatActivityOverTimeChart.tsx b/app/src/components/Graphs/GroupChats/GroupChatActivityOverTimeChart.tsx
@@ -181,18 +181,17 @@ function GroupChatActivityOverTimeBody({
   const body = (
     <>
       {error ? (
-        <div
-          style={{
-            display: 'flex',
-            justifyContent: 'center',
-            alignItems: 'center',
-          }}
-        >
-          <div style={{ position: 'absolute' }}>
-            <Text color="red.400">Uh oh! Something went wrong... </Text>
-          </div>
-          <Line data={{ labels: [], datasets: [] }} options={options} />
-        </div>
+        // <div
+        //   style={{
+        //     display: 'flex',
+        //     justifyContent: 'center',
+        //     alignItems: 'center',
+        //   }}
+        // >
+        //   <div style={{ position: 'absolute' }}>
+        //     <Text color="red.400">Uh oh! Something went wrong... </Text>
+        //   </div>
+        <Line data={{ labels: [], datasets: [] }} options={options} />
       ) : (
         <>
           {isLoading && (

diff --git a/app/src/components/Graphs/GroupChats/GroupChatByFriendsChart.tsx b/app/src/components/Graphs/GroupChats/GroupChatByFriendsChart.tsx
@@ -164,18 +164,17 @@ function GroupChatByFriendsBody({
   const body = (
     <>
       {isError ? (
-        <div
-          style={{
-            display: 'flex',
-            justifyContent: 'center',
-            alignItems: 'center',
-          }}
-        >
-          <div style={{ position: 'absolute' }}>
-            <Text color="red.400">Uh oh! Something went wrong... </Text>
-          </div>
-          <Bar data={{ labels: [], datasets: [] }} />
-        </div>
+        // <div
+        //   style={{
+        //     display: 'flex',
+        //     justifyContent: 'center',
+        //     alignItems: 'center',
+        //   }}
+        // >
+        //   <div style={{ position: 'absolute' }}>
+        //     <Text color="red.400">Uh oh! Something went wrong... </Text>
+        //   </div>
+        <Bar data={{ labels: [], datasets: [] }} />
       ) : (
         <>
           {isLoading && (

diff --git a/app/src/components/Graphs/GroupChats/GroupChatReactionsChart.tsx b/app/src/components/Graphs/GroupChats/GroupChatReactionsChart.tsx
@@ -1,5 +1,5 @@
 /* eslint-disable @typescript-eslint/naming-convention */
-import { Spinner, Text } from '@chakra-ui/react';
+import { Spinner } from '@chakra-ui/react';
 import { Context } from 'chartjs-plugin-datalabels';
 import { ipcRenderer } from 'electron';
 import log from 'electron-log';
@@ -259,19 +259,18 @@ function GroupChatReactionsBody({
   const body = (
     <>
       {error ? (
-        <div
-          style={{
-            position: 'relative',
-            display: 'flex',
-            justifyContent: 'center',
-            alignItems: 'center',
-          }}
-        >
-          <div style={{ position: 'absolute' }}>
-            <Text color="red.400">Uh oh! Something went wrong... </Text>
-          </div>
-          <Bar data={{ labels: [], datasets: [] }} />
-        </div>
+        // <div
+        //   style={{
+        //     position: 'relative',
+        //     display: 'flex',
+        //     justifyContent: 'center',
+        //     alignItems: 'center',
+        //   }}
+        // >
+        //   <div style={{ position: 'absolute' }}>
+        //     <Text color="red.400">Uh oh! Something went wrong... </Text>
+        //   </div>
+        <Bar data={{ labels: [], datasets: [] }} />
       ) : (
         <>
           {showLoading && (

diff --git a/app/src/components/Graphs/SentimentOverTimeChart.tsx b/app/src/components/Graphs/SentimentOverTimeChart.tsx
@@ -129,6 +129,7 @@ function SentimentOverTimeBody({
           yPaddingLogo: 110,
         }
       : false,
+    'lor-chartjs-no-data-to-display-message': !error,
   };
 
   const chartStyle: React.CSSProperties = isSharingVersion
@@ -201,18 +202,17 @@ function SentimentOverTimeBody({
   const body = (
     <>
       {error ? (
-        <div
-          style={{
-            display: 'flex',
-            justifyContent: 'center',
-            alignItems: 'center',
-          }}
-        >
-          <div style={{ position: 'absolute' }}>
-            <Text color="red.400">Uh oh! Something went wrong... </Text>
-          </div>
-          <Line data={{ labels: [], datasets: [] }} options={options} />
-        </div>
+        // <div
+        //   style={{
+        //     display: 'flex',
+        //     justifyContent: 'center',
+        //     alignItems: 'center',
+        //   }}
+        // >
+        //   <div style={{ position: 'absolute' }}>
+        //     <Text color="red.400">Uh oh! Something went wrong... </Text>
+        //   </div>
+        <Line data={{ labels: [], datasets: [] }} options={options} />
       ) : (
         <>
           {isLoading && (

diff --git a/app/src/components/Graphs/TextsOverTimeChart.tsx b/app/src/components/Graphs/TextsOverTimeChart.tsx
@@ -192,18 +192,17 @@ function TextsOverTimeBody({
   const body = (
     <>
       {error ? (
-        <div
-          style={{
-            display: 'flex',
-            justifyContent: 'center',
-            alignItems: 'center',
-          }}
-        >
-          <div style={{ position: 'absolute' }}>
-            <Text color="red.400">Uh oh! Something went wrong... </Text>
-          </div>
-          <Line data={{ labels: [], datasets: [] }} options={options} />
-        </div>
+        // <div
+        //   style={{
+        //     display: 'flex',
+        //     justifyContent: 'center',
+        //     alignItems: 'center',
+        //   }}
+        // >
+        //   <div style={{ position: 'absolute' }}>
+        //     <Text color="red.400">Uh oh! Something went wrong... </Text>
+        //   </div>
+        <Line data={{ labels: [], datasets: [] }} options={options} />
       ) : (
         <>
           {isLoading && (

diff --git a/app/src/components/Graphs/TopFriendsChart.tsx b/app/src/components/Graphs/TopFriendsChart.tsx
@@ -199,19 +199,19 @@ function TopFriendsBody({
   const body = (
     <>
       {error ? (
-        <div
-          style={{
-            display: 'flex',
-            justifyContent: 'center',
-            alignItems: 'center',
-          }}
-        >
-          <div style={{ position: 'absolute' }}>
-            <Text color="red.400">Uh oh! Something went wrong... </Text>
-          </div>
-          <Bar data={{ labels: [], datasets: [] }} />
-        </div>
+        // <div
+        //   style={{
+        //     display: 'flex',
+        //     justifyContent: 'center',
+        //     alignItems: 'center',
+        //   }}
+        // >
+        //   <div style={{ position: 'absolute' }}>
+        //     <Text color="red.400">Uh oh! Something went wrong... </Text>
+        //   </div>
+        <Bar data={{ labels: [], datasets: [] }} />
       ) : (
+        // </div>
         <>
           {showLoading && (
             <div

diff --git a/app/src/components/Graphs/TopSentimentFriendsChart.tsx b/app/src/components/Graphs/TopSentimentFriendsChart.tsx
@@ -151,18 +151,17 @@ function TopSentimentFriendsBody({
   const body = (
     <>
       {error ? (
-        <div
-          style={{
-            display: 'flex',
-            justifyContent: 'center',
-            alignItems: 'center',
-          }}
-        >
-          <div style={{ position: 'absolute' }}>
-            <Text color="red.400">Uh oh! Something went wrong... </Text>
-          </div>
-          <Bar data={{ labels: [], datasets: [] }} />
-        </div>
+        // <div
+        //   style={{
+        //     display: 'flex',
+        //     justifyContent: 'center',
+        //     alignItems: 'center',
+        //   }}
+        // >
+        //   <div style={{ position: 'absolute' }}>
+        //     <Text color="red.400">Uh oh! Something went wrong... </Text>
+        //   </div>
+        <Bar data={{ labels: [], datasets: [] }} />
       ) : (
         <>
           {isLoading && (

diff --git a/app/src/components/Graphs/WordOrEmojiCountChart.tsx b/app/src/components/Graphs/WordOrEmojiCountChart.tsx
@@ -183,18 +183,17 @@ function WordOrEmojiCountBody({
   const body = (
     <>
       {error ? (
-        <div
-          style={{
-            display: 'flex',
-            justifyContent: 'center',
-            alignItems: 'center',
-          }}
-        >
-          <div style={{ position: 'absolute' }}>
-            <Text color="red.400">Uh oh! Something went wrong... </Text>
-          </div>
-          <Bar data={{ labels: [], datasets: [] }} />
-        </div>
+        // <div
+        //   style={{
+        //     display: 'flex',
+        //     justifyContent: 'center',
+        //     alignItems: 'center',
+        //   }}
+        // >
+        //   <div style={{ position: 'absolute' }}>
+        //     <Text color="red.400">Uh oh! Something went wrong... </Text>
+        //   </div>
+        <Bar data={{ labels: [], datasets: [] }} />
       ) : (
         <>
           {isLoading && (

diff --git a/app/src/components/Sharing/ShareModal.tsx b/app/src/components/Sharing/ShareModal.tsx
@@ -149,25 +149,25 @@ export function ShareModal({
   return (
     <Modal isOpen={isOpen} onClose={onClose} isCentered>
       <ModalOverlay />
-      <ModalContent style={{ minWidth: '550px' }}>
+      <ModalContent minWidth="550px">
         <ModalHeader>
           <Box
             style={{
               padding: '15px',
             }}
           >
             {/* <Box display="flex" justifyContent="center" alignItems="center"> */}
-            <Text textAlign="center" fontSize={24} color="gray.800">
+            {/* <Text textAlign="center" fontSize={24} color="gray.800">
               Share this graph
-            </Text>
+            </Text> */}
             {/* <Icon as={FiShare} /> */}
             {/* </Box> */}
             <Box
               style={{
                 display: 'flex',
                 alignItems: 'center',
                 justifyContent: 'space-between',
-                marginTop: '20px',
+                // marginTop: '20px',
                 marginBottom: '20px',
               }}
             >