chore: refactored checkbox

src/components/CheckBox/CheckBox.tsx

@@ -0,0 +1,26 @@
+const CheckBox = ({
+  name,
+  checked,
+  setChecked,
+  label,
+}: {
+  name: string;
+  checked: boolean;
+  setChecked: (checked: boolean) => void;
+  label: string;
+}) => (
+  <>
+    <input
+      className="w-5 accent-pink-700 hover:accent-pink-600"
+      id={name}
+      type="checkbox"
+      checked={checked}
+      onChange={e => setChecked(e.currentTarget.checked)}
+    />
+    <label htmlFor={name} className="cursor-pointer select-none">
+      {label}
+    </label>
+  </>
+);
+
+export default CheckBox;

src/components/Layout/Layout.tsx

@@ -2,10 +2,15 @@ import { Outlet, useNavigate } from 'react-router-dom';
 import { useNDK } from '../../ndk';
 import './Layout.css';
 import { ArrowUpOnSquareIcon } from '@heroicons/react/24/outline';
+import { useEffect } from 'react';
 
 export const Layout = () => {
-  const { user } = useNDK();
   const navigate = useNavigate();
+  const { loginWithExtension, user } = useNDK();
+
+  useEffect(() => {
+    if (!user) loginWithExtension();
+  }, []);
 
   return (
     <div className="main">
@@ -14,7 +19,7 @@ export const Layout = () => {
           <img src="/bouquet.png" /> <span>bouquet</span>
         </a>
         <div>
-          <a className='action' onClick={() => navigate('/upload')}>
+          <a className="action" onClick={() => navigate('/upload')}>
             <ArrowUpOnSquareIcon />
           </a>
         </div>

src/pages/Home.tsx

@@ -15,21 +15,15 @@ import { useNavigate } from 'react-router-dom';
 - multi threaded sync
 - Add server and pulbish list event
 - upload to single/multi servers
-- upload exif data removal
 - upload image resize
 - upload & publish as file event to nostr
-- thumbnail gallery
 - check blobs (download & sha256 sum check), maybe limit max size
 */
 function Home() {
-  const { loginWithExtension, signEventTemplate } = useNDK();
   const [selectedServer, setSelectedServer] = useState<string | undefined>();
   const { serverInfo } = useServerInfo();
   const navigate = useNavigate();
-
-  useEffect(() => {
-    loginWithExtension();
-  }, []);
+  const { signEventTemplate } = useNDK();
 
   const queryClient = useQueryClient();
 

src/pages/Upload.tsx

@@ -7,6 +7,7 @@ import { useQueryClient } from '@tanstack/react-query';
 import { ArrowUpOnSquareIcon } from '@heroicons/react/24/outline';
 import ProgressBar from '../components/ProgressBar/ProgressBar';
 import { removeExifData } from '../exif';
+import CheckBox from '../components/CheckBox/CheckBox';
 
 type TransferStats = {
   enabled: boolean;
@@ -22,6 +23,8 @@ function Upload() {
   const [transfers, setTransfers] = useState<{ [key: string]: TransferStats }>({});
   const [files, setFiles] = useState<File[]>([]);
   const [cleanPrivateData, setCleanPrivateData] = useState(true);
+  const [resizeImages, setResizeImages] = useState(false);
+  const [publishToNostr, setPublishToNostr] = useState(false);
 
   const upload = async () => {
     const filesToUpload: File[] = [];
@@ -33,6 +36,9 @@ function Upload() {
       }
     }
 
+    // TODO use https://github.com/davejm/client-compress
+    // for image resizing
+
     if (filesToUpload && filesToUpload.length) {
       // sum files sizes
       const totalSize = filesToUpload.reduce((acc, f) => acc + f.size, 0);
@@ -105,21 +111,16 @@ function Upload() {
           <ArrowUpOnSquareIcon className="w-8 inline" /> Browse or drag & drop
         </label>
 
+        <h3 className="text-lg text-white">Servers</h3>
         <div className="cursor-pointer grid gap-2" style={{ gridTemplateColumns: '1.5em 20em auto' }}>
           {servers.map(s => (
             <>
-              <input
-                className="w-5 accent-pink-700 hover:accent-pink-600"
-                id={s.name}
-                type="checkbox"
+              <CheckBox
+                name={s.name}
                 checked={transfers[s.name]?.enabled || false}
-                onChange={e =>
-                  setTransfers(ut => ({ ...ut, [s.name]: { enabled: e.target.checked, transferred: 0, size: 0 } }))
-                }
-              />
-              <label htmlFor={s.name} className="cursor-pointer">
-                {s.name}
-              </label>
+                setChecked={c => setTransfers(ut => ({ ...ut, [s.name]: { enabled: c, transferred: 0, size: 0 } }))}
+                label={s.name}
+              ></CheckBox>
               {transfers[s.name]?.enabled ? (
                 <ProgressBar value={transfers[s.name].transferred} max={transfers[s.name].size} />
               ) : (
@@ -129,17 +130,26 @@ function Upload() {
           ))}
         </div>
 
-        <div className="cursor-pointer grid gap-2" style={{ gridTemplateColumns: '1.5em 20em' }}>
-          <input
-            className="w-5 accent-pink-700 hover:accent-pink-600"
-            id="cleanData"
-            type="checkbox"
+        <h3 className="text-lg text-white">Options</h3>
+        <div className="cursor-pointer grid gap-2" style={{ gridTemplateColumns: '1.5em auto' }}>
+          <CheckBox
+            name="cleanData"
             checked={cleanPrivateData}
-            onChange={e => setCleanPrivateData(e.currentTarget.checked)}
-          />
-          <label htmlFor="cleanData" className="cursor-pointer">
-            Clean private data in images (EXIF)
-          </label>
+            setChecked={c => setCleanPrivateData(c)}
+            label="Clean private data in images (EXIF)"
+          ></CheckBox>
+          <CheckBox
+            name="resize"
+            checked={resizeImages}
+            setChecked={c => setResizeImages(c)}
+            label="Resize images to max. 2048 x 2048 (NOT IMPLEMENTED YET!)"
+          ></CheckBox>
+          <CheckBox
+            name="publish"
+            checked={publishToNostr}
+            setChecked={c => setPublishToNostr(c)}
+            label="Publish to NOSTR (as 1063 file metadata event) (NOT IMPLEMENTED YET!)"
+          ></CheckBox>
         </div>
         <button
           className="p-2 px-4  bg-neutral-600 hover:bg-pink-700 text-white rounded-lg w-2/6"