Merge branch 'dev' into release

core/bindings/TransferHistory.ts

@@ -1,3 +1,10 @@
 // This file was generated by [ts-rs](https://github.com/Aleph-Alpha/ts-rs). Do not edit this file manually.
 
-export interface TransferHistory { id: string, fileName: string, fileSize: string, date: string, transactionType: string, recipient: string, }
+export interface TransferHistory {
+  id: string;
+  fileName: string;
+  fileSize: string;
+  date: string;
+  transactionType: string;
+  recipient: string;
+}

core/src/database.rs

@@ -28,7 +28,6 @@ impl Database {
         let file_history_table =
             "CREATE TABLE IF NOT EXISTS transfer_history ( id VARCHAR PRIMARY KEY, file_name VARCHAR, file_size VARCHAR, transaction_type VARCHAR, date TEXT, recipient VARCHAR)";
 
-
         /* create the settings table,  the table will contain user preference and settings */
         //TODO:  add device name , device_name VARCHAR
         let settings_table =
@@ -125,7 +124,10 @@ impl Default for TransferHistory {
             id: Uuid::new_v4().to_string(),
             file_name: "".to_string(),
             file_size: "".to_string(),
-            date: Local::now().to_rfc2822().to_string(),
+            date: Local::now()
+                .date_naive()
+                .format("%a, %-d %b, %C%y")
+                .to_string(),
             transaction_type: "".to_string(),
             recipient: "".to_string(),
         }

core/src/main.rs

@@ -48,6 +48,7 @@ fn main() -> Result<(), tauri::Error> {
     let state = app_state::State {
         ..Default::default()
     };
+
     // run core the server in a separate thread from tauri
     tauri::async_runtime::spawn(http_server::core_server());
 

core/tauri.conf.json

@@ -8,7 +8,7 @@
   },
   "package": {
     "productName": "filesync",
-    "version": "0.6.19"
+    "version": "0.6.20"
   },
   "tauri": {
     "allowlist": {

package.json

@@ -18,9 +18,12 @@
     "@heroicons/react": "^2.0.16",
     "@tauri-apps/api": "^1.3.0",
     "antd": "^5.6.2",
+    "iqons": "^1.0.4",
     "next": "^13.2.4",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-identicon": "^1.0.2",
+    "react-identicons": "^1.2.5",
     "react-qr-code": "^2.0.11",
     "react-router-dom": "^6.9.0",
     "tauri-plugin-sqlite-api": "github:lzdyes/tauri-plugin-sqlite#v0.1.1",

react-identicons.d.ts

@@ -0,0 +1 @@
+declare module "react-identicons";

src/components/app/AppAside.tsx

@@ -1,5 +1,5 @@
 import { useContext } from "react";
-import { FileTransferCard } from "../thumbnail/FileTransferCard";
+import { FileTransferCard } from "../history/FileTransferCard";
 import Image from "next/image";
 import { FileContext } from "@/store/context";
 import { Battery50Icon, BellAlertIcon } from "@heroicons/react/24/outline";

src/components/thumbnail/FileTransferCard.tsx → src/components/history/FileTransferCard.tsx

@@ -10,7 +10,7 @@ import {
   PlayCircleIcon,
 } from "@heroicons/react/24/outline";
 import Image from "next/image";
-import { getFileIcon } from ".";
+import { getFileIcon } from "../thumbnail";
 
 // the required data to render the file card component
 // the data will be passed dynamically
@@ -24,7 +24,7 @@ type TFileType = {
 };
 
 // the component
-export  function FileTransferCard({
+export function FileTransferCard({
   fileName,
   fileSize,
   fileType,

src/components/history/TransferHistory.tsx

@@ -0,0 +1,59 @@
+import { computeFileSize } from "@/utils";
+
+import {
+  ArrowDownCircleIcon,
+  ArrowUpCircleIcon,
+} from "@heroicons/react/24/outline";
+import Identicon from "react-identicons";
+import { TransferHistory } from "../../../core/bindings/TransferHistory";
+
+// the required data to render the file card component
+// the data will be passed dynamically
+
+enum FileTransferType {
+  SENT = "sent",
+  RECEIVED = "received",
+}
+
+interface Props extends TransferHistory {
+}
+// the component
+export function FileHistory({
+  fileName,
+  fileSize,
+  transactionType,
+  date,
+  recipient,
+  id,
+}: Props) {
+  return (
+    <div className="flex justify-between items-center my-8 flex-wrap bg-[#edeffb]  border-gray-900  p-3 rounded-lg shadow-md shadow-gray-300 cursor-pointer dark:shadow-none hover:shadow-sm hover:shadow-gray-400 transition-shadow ease-in-out">
+      <div className="pr-[10px] rounded-full">
+        <Identicon
+          string={id}
+          size={50}
+          padding={20}
+        />
+      </div>
+      <div className="flex flex-col text-ellipsis">
+        <h5
+          className="font-medium text-gray-500 truncate overflow-clip text-ellipsis"
+          style={{ width: "180px" }}
+        >
+          {fileName}
+        </h5>
+        <div className="flex gap-3 mt[1.5px] text-gray-400  italic text-xs height={30} 
+                width={30} ">
+          <span>{computeFileSize(Number(fileSize))}</span>{" "}
+          <span>{`  ${recipient}`}</span>
+        </div>
+      </div>
+
+      <div className="hidden lg:block ml-4">
+        {transactionType == FileTransferType.SENT
+          ? <ArrowUpCircleIcon className="w-8 h-8 text-gray-400 " />
+          : <ArrowDownCircleIcon className="w-8 h-8 text-gray-400 " />}
+      </div>
+    </div>
+  );
+}

src/pages/history.tsx

@@ -1,124 +1,57 @@
 import PageLayout from "@/components/layout/PageLayout";
-import { useState } from "react";
-import { Tab } from "@headlessui/react";
-
-function classNames(...classes: string[]) {
-  return classes.filter(Boolean).join(" ");
-}
+import { useEffect, useState } from "react";
+import LoaderCircle from "@/components/loaders/LoaderCircle";
+import { CommandData } from "../../core/bindings/CommandData";
+import { TransferHistory } from "../../core/bindings/TransferHistory";
+import { invoke } from "@tauri-apps/api/tauri";
+import Image from "next/image";
+import { FileHistory } from "@/components/history/TransferHistory";
 
 export default function HistoryPage() {
-  let [categories] = useState({
-    Sent: [
-      {
-        id: 1,
-        title: "Does drinking coffee make you smarter?",
-        date: "5h ago",
-        commentCount: 5,
-        shareCount: 2,
-      },
-      {
-        id: 1,
-        title: "Does drinking coffee make you smarter?",
-        date: "5h ago",
-        commentCount: 5,
-        shareCount: 2,
-      },
-      {
-        id: 1,
-        title: "Does drinking coffee make you smarter?",
-        date: "5h ago",
-        commentCount: 5,
-        shareCount: 2,
-      },
-      {
-        id: 2,
-        title: "So you've bought coffee... now what?",
-        date: "2h ago",
-        commentCount: 3,
-        shareCount: 2,
-      },
-    ],
-    Received: [
-      {
-        id: 1,
-        title: "Is tech making coffee better or worse?",
-        date: "Jan 7",
-        commentCount: 29,
-        shareCount: 16,
-      },
-      {
-        id: 2,
-        title: "The most innovative things happening in coffee",
-        date: "Mar 19",
-        commentCount: 24,
-        shareCount: 12,
-      },
-    ],
-  });
+  // get the file transfer history data from the application backend
+  const [data, setData] = useState(null);
+  const [isLoading, setLoading] = useState(false);
+
+  // get the data from the application core
+  useEffect(() => {
+    setLoading(true);
+    invoke("get_transfer_history").then((res) => {
+      setData(res as any);
+      setLoading(false);
+    });
+  }, []);
+
+  // typecast the response into AppData type
+  const fetchedData = data as unknown as CommandData<
+    Array<TransferHistory>
+  >;
+  if (isLoading) {
+    return (
+      <>
+        <LoaderCircle />
+        <h2 className="font-xl font-bold mt-8">Loading...</h2>
+        <p className="leading-5 text-gray-400">
+          Please wait while we load your documents. This might take a while.
+        </p>
+      </>
+    );
+  }
+
   return (
     <>
       <PageLayout pageTitle={"Transfer History"} includeSearchBar={false}>
-        <div className="w-full  px-2 ">
-          <Tab.Group>
-            <Tab.List className="flex  rounded p-1">
-              {Object.keys(categories).map((category) => (
-                <Tab
-                  key={category}
-                  className={({ selected }) =>
-                    classNames(
-                      "w-full rounded-lg py-2.5 text-sm font-medium leading-5 ",
-                      "ring-white ring-opacity-60 ring-offset-2 ring-offset-blue-400 focus:outline-none focus:ring-2",
-                      selected
-                        ? "bg-white shadow"
-                        : "text-blue-100 hover:bg-white/[0.12] hover:text-white"
-                    )
-                  }
-                >
-                  {category}
-                </Tab>
-              ))}
-            </Tab.List>
-            <Tab.Panels className="mt-2">
-              {Object.values(categories).map((posts, idx) => (
-                <Tab.Panel
-                  key={idx}
-                  className={classNames(
-                    "rounded-xl bg-white p-3",
-                    "ring-white ring-opacity-60 ring-offset-2 ring-offset-blue-400 focus:outline-none focus:ring-2"
-                  )}
-                >
-                  <ul>
-                    {posts.map((post) => (
-                      <li
-                        key={post.id}
-                        className="relative rounded-md p-3 hover:bg-gray-100"
-                      >
-                        <h3 className="text-sm font-medium leading-5">
-                          {post.title}
-                        </h3>
-
-                        <ul className="mt-1 flex space-x-1 text-xs font-normal leading-4 text-gray-500">
-                          <li>{post.date}</li>
-                          <li>&middot;</li>
-                          <li>{post.commentCount} comments</li>
-                          <li>&middot;</li>
-                          <li>{post.shareCount} shares</li>
-                        </ul>
-
-                        <a
-                          href="#"
-                          className={classNames(
-                            "absolute inset-0 rounded-md",
-                            "ring-blue-400 focus:z-10 focus:outline-none focus:ring-2"
-                          )}
-                        />
-                      </li>
-                    ))}
-                  </ul>
-                </Tab.Panel>
-              ))}
-            </Tab.Panels>
-          </Tab.Group>
+        <div className="flex flex-wrap  flex-grow gap-10 justify-start my-1 first:my-1 last:mb-8">
+          {fetchedData?.data?.map((history, index) => (
+            <FileHistory
+              key={index}
+              id={history.id}
+              fileName={history.fileName}
+              fileSize={history.fileSize}
+              date={history.date}
+              transactionType={history.transactionType}
+              recipient={history.recipient}
+            />
+          ))}
         </div>
       </PageLayout>
     </>

src/pages/index.tsx

@@ -139,7 +139,9 @@ export default function Main() {
               </tr>
             </thead>
             <tbody className="text-gray-500">
-              {transferHistory?.data?.map((file, index) => (
+              {isLoading? 
+              "Loading...":
+              transferHistory?.data?.slice(0, 5).map((file, index) => (
                 <tr key={index}>
                   <td className="px-6 py-4">{file.fileName}</td>
                   <td className="px-6 py-4">

src/pages/quick-access/documents.tsx

@@ -34,9 +34,10 @@ export default function Document() {
       </>
     );
   }
+
   return (
     <QuickAccessLayout
-      pageTitle={"Music"}
+      pageTitle={"Document"}
       includeSearchBar={true}
       searchBarText="search document"
     >

src/pages/quick-access/images.tsx

@@ -36,9 +36,9 @@ export default function Images() {
   }
   return (
     <QuickAccessLayout
-      pageTitle={"Music"}
+      pageTitle={"Image"}
       includeSearchBar={true}
-      searchBarText="search images" 
+      searchBarText="search images"
     >
       <div>
         <div className="flex flex-wrap  flex-grow gap-4 justify-start mt-12">