feat: Note search, locale time string

package-lock.json

@@ -15,6 +15,7 @@
         "crypto-js": "^4.1.1",
         "dotenv": "^16.0.3",
         "express": "^4.18.2",
+        "fuse.js": "^6.6.2",
         "js-sha3": "^0.8.0",
         "openai": "^3.2.1",
         "react": "^18.2.0",
@@ -2299,6 +2300,14 @@
       "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.1.tgz",
       "integrity": "sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A=="
     },
+    "node_modules/fuse.js": {
+      "version": "6.6.2",
+      "resolved": "https://registry.npmjs.org/fuse.js/-/fuse.js-6.6.2.tgz",
+      "integrity": "sha512-cJaJkxCCxC8qIIcPBF9yGxY0W/tVZS3uEISDxhYIdtk8OL93pe+6Zj7LjCqVV4dzbqcriOZ+kQ/NE4RXZHsIGA==",
+      "engines": {
+        "node": ">=10"
+      }
+    },
     "node_modules/gensync": {
       "version": "1.0.0-beta.2",
       "resolved": "https://registry.npmjs.org/gensync/-/gensync-1.0.0-beta.2.tgz",
@@ -7231,6 +7240,11 @@
       "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.1.tgz",
       "integrity": "sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A=="
     },
+    "fuse.js": {
+      "version": "6.6.2",
+      "resolved": "https://registry.npmjs.org/fuse.js/-/fuse.js-6.6.2.tgz",
+      "integrity": "sha512-cJaJkxCCxC8qIIcPBF9yGxY0W/tVZS3uEISDxhYIdtk8OL93pe+6Zj7LjCqVV4dzbqcriOZ+kQ/NE4RXZHsIGA=="
+    },
     "gensync": {
       "version": "1.0.0-beta.2",
       "resolved": "https://registry.npmjs.org/gensync/-/gensync-1.0.0-beta.2.tgz",

package.json

@@ -18,6 +18,7 @@
     "crypto-js": "^4.1.1",
     "dotenv": "^16.0.3",
     "express": "^4.18.2",
+    "fuse.js": "^6.6.2",
     "js-sha3": "^0.8.0",
     "openai": "^3.2.1",
     "react": "^18.2.0",

src/components/settingsInputs.jsx

@@ -97,4 +97,5 @@ export {
   SettingsTextInput,
   SettingsSelectInput,
   SettingsSection,
+  setSetting,
 };

src/components/utils.js

@@ -4,11 +4,16 @@ function printDate(time) {
     return i < 10 ? "0" + i : "" + i;
   }
 
-  let dateStr = `${padStr(time.getHours())}:${padStr(
-    time.getMinutes()
-  )}:${padStr(time.getSeconds())} ${padStr(time.getDate())}.${padStr(
-    1 + time.getMonth()
-  )}.${padStr(time.getFullYear())}`;
+  let dateStr =
+    settings.language === "ru" || settings.language === "ru-RU"
+      ? `${padStr(time.getHours())}:${padStr(time.getMinutes())}:${padStr(
+          time.getSeconds()
+        )} ${padStr(time.getDate())}.${padStr(1 + time.getMonth())}.${padStr(
+          time.getFullYear()
+        )}`
+      : `${time.toLocaleTimeString("en-US")} ${padStr(
+          1 + time.getMonth()
+        )}/${padStr(time.getDate())}/${padStr(time.getFullYear())}`;
 
   return dateStr;
 }

src/localisation/en.js

@@ -50,6 +50,8 @@ let en = {
   BroadcastSync: "Getting notes, settings from another device",
   SyncAll: "Send data to all devices",
   Sync: "Sync",
+  Search: "Search",
+  NoNotesFound: "No notes found",
 };
 
 export default en;

src/localisation/ru.js

@@ -51,6 +51,8 @@ let ru = {
   BroadcastSync: "Получение заметок, настроек с другого устройства",
   SyncAll: "Отправить данные",
   Sync: "Синхронизация",
+  Search: "Поиск",
+  NoNotesFound: "Заметок не найдено",
 };
 
 export default ru;

src/pages/notes.jsx

@@ -1,43 +1,96 @@
 import { ButtonWithIcon } from "../components/button";
 import { ChevronDoubleRightIcon } from "@heroicons/react/24/outline";
 import { printDate } from "../components/utils";
+import Fuse from "fuse.js";
+import { inputStyle } from "../components/styles";
+import { useState } from "react";
+import { setSetting } from "../components/settingsInputs";
 
 function Notes() {
-  let notes = Object.entries(localStorage.getObj("Notes"))
-    .sort((a, b) => {
-      return b[1].time - a[1].time;
-    })
-    .map((val) => {
-      return (
-        <div
-          className="grid grid-cols-1 lg:grid-cols-2 border border-blue-300 rounded-lg m-2 p-2 justify-items-start"
-          key={val[0]}
-        >
-          <div className="font-medium leading-tight text-4xl mt-0 mb-2">
-            {val[1].name}
-          </div>
-          <div className="grid grid-cols-1 lg:grid-cols-2 justify-self-center lg:justify-self-end">
-            <div className="text-center">{printDate(val[1].time)}</div>
-            <div className="">
-              <ButtonWithIcon
-                href={`/notes/${val[0]}`}
-                reverse={true}
-                icon={ChevronDoubleRightIcon}
-                text={locals.Open}
-              />
-            </div>
+  if (!settings.newNotes) {
+    let notesObj = localStorage.getObj("Notes");
+    let notes = Object.entries(notesObj);
+    for (let [id, note] of notes) {
+      note.id = id;
+      note.textTime = printDate(note.time);
+      notesObj[id] = note;
+    }
+    localStorage.setObj("Notes", notesObj);
+    setSetting("newNotes", true);
+  }
+
+  let n = Object.values(localStorage.getObj("Notes"));
+
+  let fuse = new Fuse(n, {
+    keys: ["name", "text", "textTime", "tags"],
+  });
+
+  let [search, setSearch] = useState("");
+
+  let found = search === "" ? n : fuse.search(search);
+
+  if (search !== "") {
+    found = found
+      .sort((a, b) => {
+        return b.refIndex - a.refIndex;
+      })
+      .map(({ item }) => item);
+  } else {
+    found = found.sort((a, b) => {
+      return b.time - a.time;
+    });
+  }
+
+  let notes = found.map((item) => {
+    return (
+      <div
+        className="grid grid-cols-1 lg:grid-cols-2 border border-blue-300 rounded-lg m-2 p-2 justify-items-start"
+        key={item.id}
+      >
+        <div className="font-medium leading-tight text-4xl mt-0 mb-2">
+          {item.name}
+        </div>
+        <div className="grid grid-cols-1 lg:grid-cols-2 justify-self-center lg:justify-self-end">
+          <div className="text-center">{printDate(item.time)}</div>
+          <div className="">
+            <ButtonWithIcon
+              href={`/notes/${item.id}`}
+              reverse={true}
+              icon={ChevronDoubleRightIcon}
+              text={locals.Open}
+            />
           </div>
         </div>
-      );
-    });
+      </div>
+    );
+  });
 
-  if (notes.length === 0)
+  if (n.length === 0) {
     return (
       <div className="md">
         <h3>{locals.NoNotesYet}</h3>
       </div>
     );
-  return notes;
+  }
+
+  return (
+    <div className="">
+      <input
+        type="text"
+        className={`mb-2 md:w-1/6 w-full ${inputStyle}`}
+        placeholder={locals.Search}
+        onChange={(e) => {
+          setSearch(e.target.value);
+        }}
+      />
+      {notes}
+      {found.length === 0 && (
+        <div className="md">
+          <h3>{locals.NoNotesFound}</h3>
+        </div>
+      )}
+    </div>
+  );
 }
 
 export default Notes;

src/pages/save-local.jsx

@@ -1,4 +1,5 @@
 import { Navigate } from "react-router-dom";
+import { printDate } from "../components/utils";
 
 function uuidv4() {
   return ([1e7] + -1e3 + -4e3 + -8e3 + -1e11).replace(/[018]/g, (c) =>
@@ -19,10 +20,14 @@ function Save() {
 
   let notesObj = localStorage.getObj("Notes");
 
+  let time = Date.now();
+
   notesObj[id] = {
+    id,
     name,
     text,
-    time: Date.now(),
+    time,
+    textTime: printDate(time),
     pubTime,
     pub: !!pubTime,
   };

src/pages/settings.jsx

@@ -3,6 +3,7 @@ import {
   SettingsTextInput,
   SettingsSelectInput,
   SettingsSection,
+  setSetting,
 } from "../components/settingsInputs";
 import { reRenderPage } from "../components/utils";
 import Locales from "../localisation/main";
@@ -125,6 +126,7 @@ function Settings() {
               Locales[navigator.userLanguage] ||
               Locales.en;
 
+            setSetting("newNotes", false);
             reRenderPage();
           }}
         />