feat: add empty list handling

ylabio · Sep 10, 2024 · 0da9362 · 0da9362
1 parent 030a4ca
commit 0da9362
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 13 deletions.
diff --git a/src/app.js b/src/app.js
@@ -20,21 +20,28 @@ function App({ store }) {
         <button onClick={() => store.addItem()}>Добавить</button>
       </div>
       <div className="App-center">
-        <div className="List">
-          {list.map(item => (
-            <div key={item.code} className="List-item">
-              <div
-                className={'Item' + (item.selected ? ' Item_selected' : '')}
-                onClick={() => store.selectItem(item.code)}
-              >
-                <div className="Item-code">{item.code}</div>
-                <div className="Item-title">{item.title} {item.timesClicked !== 0 ? `| ${getTimesClickedText(item.timesClicked)}` : ''}</div>
-                <div className="Item-actions">
-                  <button onClick={() => store.deleteItem(item.code)}>Удалить</button>
+      <div className="List">
+          {list.length !== 0 ? (
+            list.map(item => (
+              <div key={item.code} className="List-item">
+                <div
+                  className={'Item' + (item.selected ? ' Item_selected' : '')}
+                  onClick={() => store.selectItem(item.code)}
+                >
+                  <div className="Item-code">{item.code}</div>
+                  <div className="Item-title">
+                    {item.title}{' '}
+                    {item.timesClicked !== 0 ? `| ${getTimesClickedText(item.timesClicked)}` : ''}
+                  </div>
+                  <div className="Item-actions">
+                    <button onClick={() => store.deleteItem(item.code)}>Удалить</button>
+                  </div>
                 </div>
               </div>
-            </div>
-          ))}
+            ))
+          ) : (
+            <p className='List-text'>Нет созданных элементов</p>
+          )}
         </div>
       </div>
     </div>

diff --git a/src/styles.css b/src/styles.css
@@ -59,3 +59,7 @@ body {
   justify-content: flex-end;
   padding: 20px 20px 20px 10px;
 }
+
+.List-text {
+  padding-left: 20px;
+}