Merge pull request #48 from pkolt/47-change-button-list-on-home-page

47-change-button-list-on-home-page
pkolt · Jun 5, 2024 · eafcefd · eafcefd
2 parents 73dc219 + d316402
commit eafcefd
Show file tree

Hide file tree

Showing 5 changed files with 69 additions and 30 deletions.
diff --git a/src/locales/en.json b/src/locales/en.json
@@ -5,8 +5,6 @@
     "Export to file": "Export to file",
     "Or": "Or",
     "Create new bitmap": "Create new bitmap",
-    "Import from image": "Import from image",
-    "Import from JSON": "Import from JSON",
     "Name": "Name",
     "Save": "Save",
     "Delete bitmap": "Delete bitmap",
@@ -33,7 +31,6 @@
     "Fit to image": "Fit to image",
     "Reset": "Reset",
     "Image": "Image",
-    "Close": "Close",
     "Create image for OLED display": "Create image for OLED display",
     "Cancel": "Cancel",
     "Accept": "Accept",
@@ -80,6 +77,11 @@
     "Invert color": "Invert color",
     "Created by": "Created by",
     "Import from collections": "Import from collections",
-    "Search": "Search"
+    "Search": "Search",
+    "Create": "Create",
+    "Import": "Import",
+    "From image": "From image",
+    "From collections": "From collections",
+    "From JSON": "From JSON"
   }
 }
diff --git a/src/locales/ru.json b/src/locales/ru.json
@@ -5,8 +5,6 @@
     "Export to file": "Экспортировать в файл",
     "Or": "Или",
     "Create new bitmap": "Создать новый bitmap",
-    "Import from image": "Импортировать из изображения",
-    "Import from JSON": "Импортировать из JSON",
     "Name": "Имя",
     "Save": "Сохранить",
     "Delete bitmap": "Удалить bitmap",
@@ -33,7 +31,6 @@
     "Fit to image": "По размеру изображения",
     "Reset": "Сброс",
     "Image": "Изображение",
-    "Close": "Закрыть",
     "Create image for OLED display": "Создайте изображение для OLED дисплея",
     "Cancel": "Отмена",
     "Accept": "Подтвердить",
@@ -80,6 +77,11 @@
     "Invert color": "Инвертировать цвет",
     "Created by": "Создано",
     "Import from collections": "Импортировать из набора",
-    "Search": "Поиск"
+    "Search": "Поиск",
+    "Create": "Создать",
+    "Import": "Импортировать",
+    "From image": "Из изображения",
+    "From collections": "Из коллекции",
+    "From JSON": "Из JSON"
   }
 }
diff --git a/src/pages/Home/components/ButtonList/index.tsx b/src/pages/Home/components/ButtonList/index.tsx
@@ -1,23 +1,31 @@
 import { PageUrl } from '@/constants/urls';
 import { useTranslation } from 'react-i18next';
 import { Link } from 'react-router-dom';
+import Dropdown from 'react-bootstrap/Dropdown';
 
 export const ButtonList = () => {
   const { t } = useTranslation();
   return (
-    <div className="d-flex flex-column gap-3">
+    <div className="d-flex flex-column gap-3 w-25">
       <Link to={PageUrl.CreateBitmap} className="btn btn-primary btn-lg">
-        {t('Create new bitmap')}
-      </Link>
-      <Link to={PageUrl.ImportFromImage} className="btn btn-primary btn-lg">
-        {t('Import from image')}
-      </Link>
-      <Link to={PageUrl.ImportFromCollections} className="btn btn-primary btn-lg">
-        {t('Import from collections')}
-      </Link>
-      <Link to={PageUrl.ImportFromJson} className="btn btn-primary btn-lg">
-        {t('Import from JSON')}
+        {t('Create')}
       </Link>
+      <Dropdown align="end">
+        <Dropdown.Toggle size="lg" className="w-100">
+          {t('Import')}
+        </Dropdown.Toggle>
+        <Dropdown.Menu>
+          <Dropdown.Item as={Link} to={PageUrl.ImportFromImage}>
+            {t('From image')}
+          </Dropdown.Item>
+          <Dropdown.Item as={Link} to={PageUrl.ImportFromCollections}>
+            {t('From collections')}
+          </Dropdown.Item>
+          <Dropdown.Item as={Link} to={PageUrl.ImportFromJson}>
+            {t('From JSON')}
+          </Dropdown.Item>
+        </Dropdown.Menu>
+      </Dropdown>
     </div>
   );
 };
diff --git a/src/pages/Home/index.test.tsx b/src/pages/Home/index.test.tsx
@@ -9,24 +9,51 @@ const BITMAP_ITEM_ID = 'bitmap-item';
 
 const renderHomePage = () => renderPage(<Home />, { route: { path: PageUrl.Home } });
 
-const createTestRedirect = (buttonText: string, redirectUrl: PageUrl) => async () => {
-  const { router, userEvent } = renderHomePage();
-  const button = screen.getByText(buttonText);
-  await userEvent.click(button);
-  expect(router.location.pathname).toBe(redirectUrl);
-};
+interface TestRedirectParams {
+  buttonText: string;
+  dropdownText?: string;
+  redirectUrl: PageUrl;
+}
+
+const createTestRedirect =
+  ({ buttonText, dropdownText, redirectUrl }: TestRedirectParams) =>
+  async () => {
+    const { router, userEvent } = renderHomePage();
+    if (dropdownText) {
+      const dropdown = screen.getByText(dropdownText);
+      await userEvent.click(dropdown);
+    }
+    const button = screen.getByText(buttonText);
+    await userEvent.click(button);
+    expect(router.location.pathname).toBe(redirectUrl);
+  };
 
 test('show empty', async () => {
   const { router } = renderHomePage();
   expect(screen.queryAllByTestId(BITMAP_ITEM_ID).length).toBe(0);
   expect(router.location.pathname).toBe(PageUrl.Home);
 });
 
-test('click create new bitmap', createTestRedirect('Create new bitmap', PageUrl.CreateBitmap));
+test('click create new bitmap', createTestRedirect({ buttonText: 'Create', redirectUrl: PageUrl.CreateBitmap }));
+
+test(
+  'click import from image',
+  createTestRedirect({ buttonText: 'From image', dropdownText: 'Import', redirectUrl: PageUrl.ImportFromImage }),
+);
 
-test('click import from image', createTestRedirect('Import from image', PageUrl.ImportFromImage));
+test(
+  'click import from json',
+  createTestRedirect({ buttonText: 'From JSON', dropdownText: 'Import', redirectUrl: PageUrl.ImportFromJson }),
+);
 
-test('click import from json', createTestRedirect('Import from JSON', PageUrl.ImportFromJson));
+test(
+  'click import from collections',
+  createTestRedirect({
+    buttonText: 'From collections',
+    dropdownText: 'Import',
+    redirectUrl: PageUrl.ImportFromCollections,
+  }),
+);
 
 test('show list', () => {
   const { stores } = renderHomePage();

diff --git a/src/pages/ImportFromCollections/index.tsx b/src/pages/ImportFromCollections/index.tsx
@@ -34,7 +34,7 @@ const ImportFromCollections = () => {
       <main className="d-flex flex-grow-1 flex-column gap-3">
         <h1 className="text-center">{t('Import from collections')}</h1>
         {!icons && <Loading />}
-        {icons && icons.length > 0 && (
+        {data && (
           <>
             <div className="d-flex justify-content-center mb-3">
               <InputGroup className="w-25">
@@ -45,7 +45,7 @@ const ImportFromCollections = () => {
               </InputGroup>
             </div>
             <div className="grid">
-              {icons.map((it) => {
+              {icons?.map((it) => {
                 return (
                   <Item
                     key={it.name}