From 66b3a10858d36d4ba4a519c28f2c63706d139e9b Mon Sep 17 00:00:00 2001
From: alexsparkes <turbomarshmello@gmail.com>
Date: Fri, 21 Oct 2022 22:33:30 +0100
Subject: [PATCH] fix: missing translations

---
 .../modals/main/marketplace/Items.jsx         | 15 ++-----
 .../main/marketplace/sections/Marketplace.jsx | 40 +++++++++++++++----
 src/components/modals/main/scss/index.scss    |  9 +++++
 .../modals/main/scss/marketplace/_main.scss   |  9 ++++-
 .../modals/main/tabs/backend/Tabs.jsx         |  2 +-
 5 files changed, 53 insertions(+), 22 deletions(-)

diff --git a/src/components/modals/main/marketplace/Items.jsx b/src/components/modals/main/marketplace/Items.jsx
index 9fb8c842..d70bd755 100644
--- a/src/components/modals/main/marketplace/Items.jsx
+++ b/src/components/modals/main/marketplace/Items.jsx
@@ -19,11 +19,12 @@ export default function Items({
   toggleFunction,
   collectionFunction,
   onCollection,
+  filter,
 }) {
   const [count, setCount] = useState(8);
-  const [filter, setFilter] = useState('');
   const [cheese, setCheese] = useState('photo')
   const [filteredCategory, setFilteredCategory] = useState('');
+  console.log(filter)
   const incrementCount = () => {
     if (count !== items.length && count <= items.length) {
       if (count + 8 > items.length) {
@@ -36,19 +37,9 @@ export default function Items({
 
   return (
     <>
-      {(type === 'all' && !onCollection) || (type === 'collections' && !onCollection) ? (
+      {(type === 'all' && !onCollection && (filter === null || filter === '')) || (type === 'collections' && !onCollection &&  (filter === null || filter === '')) ? (
         <>
           <div style={{ display: 'flex', flexFlow: 'row', alignItems: 'center', gap: '30px' }}>
-            <form className="marketplaceSearch">
-              <input
-                label="Search"
-                name="filter"
-                id="filter"
-                value={filter}
-                onChange={(event) => setFilter(event.target.value)}
-              />
-            <MdSearch/>
-            </form>
           </div>
           <div
             className="collection"
diff --git a/src/components/modals/main/marketplace/sections/Marketplace.jsx b/src/components/modals/main/marketplace/sections/Marketplace.jsx
index 0bbdef3b..5ac8df33 100644
--- a/src/components/modals/main/marketplace/sections/Marketplace.jsx
+++ b/src/components/modals/main/marketplace/sections/Marketplace.jsx
@@ -7,6 +7,7 @@ import {
   MdLocalMall,
   MdOutlineKeyboardArrowRight,
   MdRefresh,
+  MdSearch,
   MdOutlineArrowForward,
 } from 'react-icons/md';
 
@@ -26,6 +27,7 @@ export default class Marketplace extends PureComponent {
       done: false,
       item: {},
       collection: false,
+      filter: '',
     };
     this.buttons = {
       uninstall: (
@@ -332,7 +334,8 @@ export default class Marketplace extends PureComponent {
                 <span className="backTitle">
                   {variables.getMessage('modals.main.navbar.marketplace')}
                 </span>
-                <MdOutlineKeyboardArrowRight /> {variables.getMessage('modals.main.marketplace.collection')}
+                <MdOutlineKeyboardArrowRight />{' '}
+                {variables.getMessage('modals.main.marketplace.collection')}
               </span>
             </div>
             <div
@@ -345,7 +348,9 @@ export default class Marketplace extends PureComponent {
                 <span className="mainTitle">{this.state.collectionTitle}</span>
                 <span className="subtitle">{this.state.collectionDescription}</span>
               </div>
-              <div className="nice-tag">Collection</div>
+              <div className="nice-tag">
+                {variables.getMessage('modals.main.marketplace.collection')}
+              </div>
             </div>
           </>
         ) : (
@@ -356,9 +361,24 @@ export default class Marketplace extends PureComponent {
               </span>
             </div>
             <div className="headerExtras marketplaceCondition">
-              <span className="link" onClick={() => this.reloadItems()}>
-                <MdRefresh /> {variables.getMessage('widgets.navbar.tooltips.refresh')}
-              </span>
+              {this.props.type !== 'collections' ? (
+                <div>
+                  <form className="marketplaceSearch">
+                    <input
+                      label="Search"
+                      placeholder="Search"
+                      name="filter"
+                      id="filter"
+                      value={this.state.filter}
+                      onChange={(event) => this.setState({ filter: event.target.value })}
+                    />
+                    <MdSearch />
+                  </form>
+                  {/*<span className="link marketplaceRefresh" onClick={() => this.reloadItems()}>
+                    <MdRefresh /> {variables.getMessage('widgets.navbar.tooltips.refresh')}
+              </span>*/}
+                </div>
+              ) : null}
               <Dropdown
                 label={variables.getMessage('modals.main.addons.sort.title')}
                 name="sortMarketplace"
@@ -367,10 +387,10 @@ export default class Marketplace extends PureComponent {
                 <option value="a-z">{variables.getMessage('modals.main.addons.sort.a_z')}</option>
                 <option value="z-a">{variables.getMessage('modals.main.addons.sort.z_a')}</option>
               </Dropdown>
-        </div>
+            </div>
           </>
         )}
-        {this.props.type === 'collections' && !this.state.collection ? (
+        {(this.props.type === 'collections' && !this.state.collection) ? (
           this.state.items.map((item) => (
             <>
               {!item.news ? (
@@ -403,10 +423,14 @@ export default class Marketplace extends PureComponent {
           <Items
             type={this.props.type}
             items={this.state.items}
-            collection={this.state.collections[Math.floor(Math.random() * this.state.collections.length)] || []}
+            collection={
+              this.state.collections[Math.floor(Math.random() * this.state.collections.length)] ||
+              []
+            }
             onCollection={this.state.collection}
             toggleFunction={(input) => this.toggle('item', input)}
             collectionFunction={(input) => this.toggle('collection', input)}
+            filter={this.state.filter}
           />
         )}
       </>
diff --git a/src/components/modals/main/scss/index.scss b/src/components/modals/main/scss/index.scss
index 942adaef..228219c5 100644
--- a/src/components/modals/main/scss/index.scss
+++ b/src/components/modals/main/scss/index.scss
@@ -142,6 +142,15 @@ h5 {
   display: flex;
   flex-flow: column;
   gap: -1px;
+  padding: 10px 0;
+  div:nth-child(1) {
+    display: flex;
+    flex-flow: column;
+    gap: 10px;
+  }
+  form {
+    margin-top: 10px;
+  }
   .link {
     display: flex;
     flex-flow: row;
diff --git a/src/components/modals/main/scss/marketplace/_main.scss b/src/components/modals/main/scss/marketplace/_main.scss
index c014635f..0408f37e 100644
--- a/src/components/modals/main/scss/marketplace/_main.scss
+++ b/src/components/modals/main/scss/marketplace/_main.scss
@@ -471,12 +471,19 @@ a.collectionButton {
   }
 }
 
+.marketplaceRefresh {
+  display: flex;
+  flex-flow: row;
+  gap: 5px;
+  align-items: center;
+}
+
 .marketplaceSearch {
   display: flex;
   align-items: center;
   padding: 10px 30px;
   border-radius: 10px;
-  font-size: 16px;
+  font-size: 18px;
   @include themed() {
     background: t($modal-sidebarActive);
     box-shadow: 0 0 0 3px t($modal-sidebarActive);
diff --git a/src/components/modals/main/tabs/backend/Tabs.jsx b/src/components/modals/main/tabs/backend/Tabs.jsx
index 8a4fc06d..4b8748a0 100644
--- a/src/components/modals/main/tabs/backend/Tabs.jsx
+++ b/src/components/modals/main/tabs/backend/Tabs.jsx
@@ -59,7 +59,7 @@ export default class Tabs extends PureComponent {
 
     return (
       <div style={{ display: 'flex', width: '100%', minHeight: '100%' }}>
-        <ul className="sidebar" style={{ display: marketplaceActive === ' navbar-item-active' || addonsActive === ' navbar-item-active' ? 'none' : 'block'}}>
+        <ul className="sidebar">
           {this.props.children.map((tab, index) => (
             <Tab
               currentTab={this.state.currentTab}