[UI]better avatars and placement as well as fallback,[protocol]Matchi…

…ng on probable file types
Inalegwu · Jun 6, 2024 · 05efffc · 05efffc
1 parent b73a0e9
commit 05efffc
Show file tree

Hide file tree

Showing 7 changed files with 62 additions and 27 deletions.
diff --git a/src/main.ts b/src/main.ts
@@ -35,7 +35,7 @@ const createWindow = () => {
     mainWindow.loadFile(join(__dirname, "../renderer/index.html"));
   }
 
-  mainWindow.webContents.openDevTools({ mode: "detach" });
+  // mainWindow.webContents.openDevTools({ mode: "detach" });
 };
 
 app.whenReady().then(() => {

diff --git a/src/shared/routers/node.ts b/src/shared/routers/node.ts
@@ -1,11 +1,18 @@
 import { publicProcedure, router } from "@src/trpc";
 import { createWriteStream, readFileSync } from "node:fs";
 import { z } from "zod";
+import { matchFileType } from "../utils";
 
 function parseFilePath(path: string) {
+  const fileExt = path.match(/\.[^/.]+$/)?.[0].split(".")[1];
+
+  const matchedFileType = matchFileType(fileExt || "");
+
+  console.log(fileExt);
+
   return {
     fileName: "",
-    fileType: "",
+    fileType: matchedFileType,
     buffer: readFileSync(path),
   };
 }

diff --git a/src/shared/types.ts b/src/shared/types.ts
@@ -64,3 +64,9 @@ export type EventTypes = {
     packet: Message;
   };
 };
+
+export enum FileTypes {
+  MD = "md",
+  TXT = "txt",
+  DOCX = "docx",
+}
diff --git a/src/shared/utils.ts b/src/shared/utils.ts
@@ -5,6 +5,7 @@ import {
   uniqueNamesGenerator,
 } from "unique-names-generator";
 import { v4 } from "uuid";
+import { FileTypes } from "./types";
 
 export function generateRandomName() {
   const randomName = uniqueNamesGenerator({
@@ -20,4 +21,24 @@ export function generateAppId() {
   return v4();
 }
 
-export const randomNumber = () => Math.floor(Math.random() * 250);
+export const randomNumber = () =>
+  Math.floor((Math.random() * window.innerWidth) / 2);
+
+export const randomNumberfromInterval = (min: number, max: number) =>
+  Math.floor(Math.random() * (max - min + 1) + min);
+
+export const matchFileType = (fileExt: string) => {
+  if (fileExt === FileTypes.MD) {
+    return FileTypes.MD;
+  }
+
+  if (fileExt === FileTypes.DOCX) {
+    return FileTypes.DOCX;
+  }
+
+  if (fileExt === FileTypes.TXT) {
+    return FileTypes.TXT;
+  }
+
+  return null;
+};
diff --git a/src/web/components/Layout.tsx b/src/web/components/Layout.tsx
@@ -48,7 +48,7 @@ export default function Layout({ children }: LayoutProps) {
       width="100%"
       grow="1"
       direction="column"
-      className="transition h-screen"
+      className="transition h-screen transition"
     >
       <Flex
         align="center"

diff --git a/src/web/components/device-info.tsx b/src/web/components/device-info.tsx
@@ -1,24 +1,21 @@
-import { useObservable } from "@legendapp/state/react";
-import { Box, Button, Flex, Popover, Text } from "@radix-ui/themes";
+import { Avatar, Button, Flex, Popover, Text } from "@radix-ui/themes";
 import t from "@src/shared/config";
 import type { Node } from "@src/shared/types";
 import { randomNumber } from "@src/shared/utils";
-import { Heart, Key, Pen, Send, Wifi } from "lucide-react";
-import { useCallback } from "react";
+import { Key, UserRound, Wifi } from "lucide-react";
+import { useCallback, useMemo } from "react";
 import { fileTransferState$ } from "../../shared/state";
 
 type Props = {
   node: Node;
 };
 
-const top = randomNumber();
-const left = randomNumber();
-
 export default function DeviceInfo({ node }: Props) {
-  const isSaved = useObservable(false);
-
   const { mutate: sendFiles } = t.node.sendFile.useMutation();
 
+  const top = useMemo(() => randomNumber(), []);
+  const left = useMemo(() => randomNumber(), []);
+
   const send = useCallback(() => {
     sendFiles({
       destination: node.connectionId,
@@ -29,19 +26,17 @@ export default function DeviceInfo({ node }: Props) {
   return (
     <Popover.Root>
       <Popover.Trigger>
-        <Box
-          className="w-11 h-11 absolute rounded-full overflow-hidden shadow-xl cursor-pointer border-1 border-solid border-zinc-200 dark:border-zinc-800"
+        <Avatar
+          fallback={<UserRound size={9} />}
+          src="https://source.boringavatars.com/"
+          variant="soft"
+          className="absolute shadow-xl cursor-pointer border-1 border-solid border-zinc-200 dark:border-zinc-800"
+          radius="full"
           style={{
             top: `${top}px`,
             left: `${left}px`,
           }}
-        >
-          <img
-            src="https://source.boringavatars.com/"
-            alt="default_image"
-            className="object-cover w-full h-full"
-          />
-        </Box>
+        />
       </Popover.Trigger>
       <Popover.Content size="1">
         <Flex direction="column" className="space-y-2">
@@ -52,12 +47,12 @@ export default function DeviceInfo({ node }: Props) {
               width="100%"
               justify="between"
             >
-              <Text color="gray" className="text-[12px]">
+              <Text className="text-[10px] text-zinc-400 tracking-wide">
                 Device Name
               </Text>
-              <Text className="text-[12.5px]">{node.nodeName}</Text>
+              <Text className="text-[12.5px] font-medium">{node.nodeName}</Text>
             </Flex>
-            <Flex align="center" justify="end" gap="3">
+            {/* <Flex align="center" justify="end" gap="3">
               {isSaved.get() && (
                 <Button
                   variant="soft"
@@ -79,7 +74,7 @@ export default function DeviceInfo({ node }: Props) {
               >
                 <Heart size={11} />
               </Button>
-            </Flex>
+            </Flex> */}
           </Flex>
           <Flex className="space-y-1" direction="column" align="start">
             <Flex width="100%" align="center" justify="between" gap="3">
@@ -102,7 +97,6 @@ export default function DeviceInfo({ node }: Props) {
             >
               <Flex align="center" justify="center" gap="5">
                 <Text className="text-[11px]">Send</Text>
-                <Send size={10} />
               </Flex>
             </Button>
           )}

diff --git a/src/web/routes/index.tsx b/src/web/routes/index.tsx
@@ -43,6 +43,13 @@ function Index() {
           nodeName: generateRandomName(),
         }}
       />
+      <DeviceInfo
+        node={{
+          connectionId: v4(),
+          deviceType: "desktop",
+          nodeName: generateRandomName(),
+        }}
+      />
       <ThisDeviceInfo />
     </Flex>
   );