Merge pull request #54 from pkolt/53-autofill-name-for-import-from-co…

…llections

53-autofill-name-for-import-from-collections

README.md

@@ -106,11 +106,11 @@ npm start
 
 ## FAQ
 
-### Why is my image distorted?
+### Why my image show wrong?
 
 ![Distorted image](./docs/distorted_image.jpg)
 
-For some LCD displays such as the SSD1306, the image width must be a multiple of 8. If this requirement is not met, you will see a distorted image when displayed.
+For some LCD displays such as the SSD1306, the image width must be a multiple of 8. If this requirement is not met, you will see a wrong image when displayed.
 
 Just use an image width that is a multiple of 8.
 

src/pages/ImportFromImage/ImportForm/hooks/useImageUrl.ts

@@ -1,8 +1,9 @@
+import { capitalize } from '@/utils/string';
 import { useEffect } from 'react';
 
 interface ImageUrlHookParams {
   imageUrl?: string;
-  setImage: (value: FileList) => void;
+  setImage: (files: FileList, name: string) => void;
 }
 
 export const useImageUrl = ({ imageUrl, setImage }: ImageUrlHookParams): void => {
@@ -13,9 +14,10 @@ export const useImageUrl = ({ imageUrl, setImage }: ImageUrlHookParams): void =>
         const blob = await res.blob();
         const dataTransfer = new DataTransfer();
         const mimeType = 'image/svg+xml';
-        const name = imageUrl.split('/').at(-1) ?? '';
-        dataTransfer.items.add(new File([blob], name, { type: mimeType }));
-        setImage(dataTransfer.files);
+        const filename = imageUrl.split('/').at(-1) ?? '';
+        const name = capitalize(filename.split('.')[0].replaceAll('-', ' '));
+        dataTransfer.items.add(new File([blob], filename, { type: mimeType }));
+        setImage(dataTransfer.files, name);
       })();
     }
   }, [imageUrl, setImage]);

src/pages/ImportFromImage/ImportForm/index.tsx

@@ -59,16 +59,18 @@ export const ImportForm = ({ setBitmap, onSubmit, imageUrl }: ImportFormProps) =
   }, [onReset, reset]);
 
   const setImage = useCallback(
-    (value: FileList) => {
+    (files: FileList, name: string) => {
       const elem = document.getElementById(ID_FILE_INPUT);
       if (elem) {
-        setValue('files', value);
-        (elem as HTMLInputElement).files = value;
+        setValue('files', files);
+        (elem as HTMLInputElement).files = files;
+        setValue('name', name);
         setFocus('name');
       }
     },
     [setValue, setFocus],
   );
+
   useImageUrl({ imageUrl, setImage });
 
   useEffect(() => {

src/utils/string.test.ts

@@ -0,0 +1,10 @@
+import { test, expect } from '@/test-utils';
+import { capitalize } from './string';
+
+test('capitalize', () => {
+  expect(capitalize('foo')).toBe('Foo');
+});
+
+test('capitalize empty', () => {
+  expect(capitalize('')).toBe('');
+});

src/utils/string.ts

@@ -0,0 +1,4 @@
+export const capitalize = (value: string) => {
+  const firstLetter: string = value[0] ?? '';
+  return firstLetter.toUpperCase() + value.slice(1);
+};