From b656e9d3a93716f084a6f568c606658eecc53a9a Mon Sep 17 00:00:00 2001
From: talksik <patel.arjun50@gmail.com>
Date: Sat, 19 Mar 2022 20:49:34 -0400
Subject: [PATCH] selecting conversation and expanding the window nicely

---
 packages/desktop/src/electron/constants.ts      | 12 ++++++++++++
 packages/desktop/src/electron/global.d.ts       |  5 ++++-
 packages/desktop/src/electron/preload.ts        |  6 ++++++
 packages/desktop/src/index.ts                   | 14 ++++++++++----
 .../desktop/src/pages/Home/search/index.tsx     |  1 +
 .../pages/Home/selectedConversation/index.tsx   | 17 +++++++++++++++++
 6 files changed, 50 insertions(+), 5 deletions(-)

diff --git a/packages/desktop/src/electron/constants.ts b/packages/desktop/src/electron/constants.ts
index d4b30bb..a4b21de 100644
--- a/packages/desktop/src/electron/constants.ts
+++ b/packages/desktop/src/electron/constants.ts
@@ -4,10 +4,22 @@
 enum Channels {
   ACTIVATE_LOG_IN = "ACTIVATE_LOG_IN",
   AUTH_TOKENS = "AUTH_TOKENS",
+  RESIZE_WINDOW = "RESIZE_WINDOW",
 }
 
 export enum STORE_ITEMS {
   AUTH_TOKENS = "AUTH_TOKENS",
 }
 
+export const Dimensions = {
+  default: {
+    height: 600,
+    width: 500,
+  },
+  selectedConvo: {
+    height: 600,
+    width: 900,
+  },
+};
+
 export default Channels;
diff --git a/packages/desktop/src/electron/global.d.ts b/packages/desktop/src/electron/global.d.ts
index 7cc3645..807a803 100644
--- a/packages/desktop/src/electron/global.d.ts
+++ b/packages/desktop/src/electron/global.d.ts
@@ -8,9 +8,12 @@ declare global {
         initiateLogin(): void;
       };
       store: {
-        get(val: STORE_ITEMS): any;
+        get(val: STORE_ITEMS): Promise<any>;
         set(property: STORE_ITEMS, val: any): void;
       };
+      window: {
+        resizeWindow(newDimensions: { width: number; height: number }): void;
+      };
       on(channel: Channels, func: any): void;
       once(channel: Channels, func: any): void;
     };
diff --git a/packages/desktop/src/electron/preload.ts b/packages/desktop/src/electron/preload.ts
index 9174530..3e5718f 100644
--- a/packages/desktop/src/electron/preload.ts
+++ b/packages/desktop/src/electron/preload.ts
@@ -19,6 +19,12 @@ const electronAPI = {
     // Other method you want to add like has(), reset(), etc.
   },
 
+  window: {
+    resizeWindow(newDimensions: { width: number; height: number }) {
+      ipcRenderer.send(Channels.RESIZE_WINDOW, newDimensions);
+    },
+  },
+
   on(channel: Channels, func: any) {
     const validChannels = ["ipc-example"];
     // if (validChannels.includes(channel)) {
diff --git a/packages/desktop/src/index.ts b/packages/desktop/src/index.ts
index 8f8486d..4fc7f0c 100644
--- a/packages/desktop/src/index.ts
+++ b/packages/desktop/src/index.ts
@@ -1,6 +1,6 @@
 import { BrowserWindow, app, ipcMain } from "electron";
+import Channels, { Dimensions } from "./electron/constants";
 
-import Channels from "./electron/constants";
 import { handleLogin } from "./electron/handleLogin";
 import store from "./electron/store";
 
@@ -23,8 +23,7 @@ export let browserWindow: BrowserWindow;
 const createWindow = (): void => {
   // Create the browser window.
   browserWindow = new BrowserWindow({
-    height: 900,
-    width: 900,
+    ...Dimensions.default,
     webPreferences: {
       preload: MAIN_WINDOW_PRELOAD_WEBPACK_ENTRY,
       sandbox: true,
@@ -51,7 +50,7 @@ app
       await handleLogin();
     });
 
-    // IPC listener
+    // access storage/cookies
     ipcMain.on("electron-store-set", async (event, key, val) => {
       store.set(key, val);
     });
@@ -59,6 +58,13 @@ app
       const result = await store.get(val);
       return result;
     });
+
+    // dynamically changing the window bounds
+    ipcMain.on(Channels.RESIZE_WINDOW, (event, arg) => {
+      const { width, height } = arg;
+
+      browserWindow.setSize(width, height, true);
+    });
   });
 
 // Quit when all windows are closed, except on macOS. There, it's common
diff --git a/packages/desktop/src/pages/Home/search/index.tsx b/packages/desktop/src/pages/Home/search/index.tsx
index d8132c5..79365a7 100644
--- a/packages/desktop/src/pages/Home/search/index.tsx
+++ b/packages/desktop/src/pages/Home/search/index.tsx
@@ -54,6 +54,7 @@ export default function Search() {
   const renderUserRow = (user: User) => {
     return (
       <span
+        key={user.googleId}
         onClick={() => selectContact(user.googleId)}
         className="border-t border-t-slate-500 py-5 flex flex-row justify-start 
       items-center w-full hover:bg-slate-600 cursor-pointer group"
diff --git a/packages/desktop/src/pages/Home/selectedConversation/index.tsx b/packages/desktop/src/pages/Home/selectedConversation/index.tsx
index d0b519d..a0f04b5 100644
--- a/packages/desktop/src/pages/Home/selectedConversation/index.tsx
+++ b/packages/desktop/src/pages/Home/selectedConversation/index.tsx
@@ -1,4 +1,6 @@
 import { $selectedConversation } from "../../../controller/recoil";
+import { Dimensions } from "../../../electron/constants";
+import { useEffect } from "react";
 import { useRecoilState } from "recoil";
 
 export default function SelectedConversation() {
@@ -15,6 +17,21 @@ export default function SelectedConversation() {
    * all messages between me and them
    */
 
+  useEffect(() => {
+    // if selected, then change the bounds of this window as well
+    if (selectedConvo) {
+      window.electronAPI.window.resizeWindow(Dimensions.selectedConvo);
+    } else {
+      // change bounds back
+      window.electronAPI.window.resizeWindow(Dimensions.default);
+    }
+  }, [selectedConvo]);
+
+  // if no convo selected, don't show this
+  if (!selectedConvo) {
+    return <></>;
+  }
+
   return (
     <div className="bg-slate-800 flex-1">this is the selected conversation</div>
   );