fix potlock search (#397)

Author: Megha-Dev-19

apps/new/widget/page/projects/PotlockImport.jsx

@@ -120,7 +120,7 @@ const Search = useMemo(() => {
       }}
     />
   );
-}, [projects]);
+}, [projects, searchTerm]);
 
 function shuffleArray(array) {
   return array.sort(() => Math.random() - 0.5);

apps/new/widget/page/projects/SearchBar.jsx

@@ -1,4 +1,4 @@
-const { Button } = VM.require("${config_account}/widget/components") || {
+const { Button } = VM.require("${alias_old}/widget/components") || {
   Button: () => <></>,
 };
 
@@ -30,6 +30,7 @@ const SearchIcon = styled.div`
 `;
 
 const SearchBarInput = styled.input`
+  color: white;
   background: none;
   width: 100%;
   outline: none;
@@ -40,79 +41,8 @@ const SearchBarInput = styled.input`
   }
 `;
 
-const FilterButton = styled.div`
-  font-weight: 500;
-  font-size: 14px;
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-  cursor: pointer;
-  width: fit-content;
-  padding: 0.54rem 1rem;
-  border-radius: 6px;
-  border: 1px solid #7b7b7b;
-  transition: all 200ms ease-in-out;
-  &.active {
-    color: #fff;
-    background: #292929;
-  }
-`;
-
-const FilterIcon = styled.div`
-  display: flex;
-  width: 16px;
-  height: 16px;
-  align-items: center;
-  justify-content: center;
-`;
-
-const FilterMenu = styled.div`
-  position: absolute;
-  background: #fff;
-  font-size: 14px;
-  top: 110%;
-  right: 0;
-  padding: 8px;
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-  border-radius: 6px;
-  border: 1px solid rgba(41, 41, 41, 0.36);
-  box-shadow:
-    0px 12px 20px -4px rgba(123, 123, 123, 0.32),
-    0px 4px 8px -3px rgba(123, 123, 123, 0.2),
-    0px 0px 2px 0px rgba(123, 123, 123, 0.36);
-  z-index: 2;
-  opacity: 0;
-  visibility: hidden;
-  transform: translateY(100px);
-  transition: all 200ms ease-in-out;
-  &.active {
-    opacity: 1;
-    visibility: visible;
-    transform: translateY(0);
-  }
-  @media screen and (max-width: 768px) {
-    left: 0;
-    background: #fff;
-  }
-`;
-
-const FilterItem = styled.div`
-  cursor: pointer;
-  padding: 8px;
-  display: flex;
-  gap: 12px;
-  white-space: nowrap;
-  &:hover {
-    background: #292929;
-    color: #fff;
-    border-radius: 6px;
-  }
-`;
-
-const { numItems, itemName, onSearch } = props;
-const [searchTerm, setSearchTerm] = useState("");
+const { numItems, itemName, onSearch, term } = props;
+const [searchTerm, setSearchTerm] = useState(term);
 
 const onSearchChange = (value) => {
   setSearchTerm(value);
@@ -126,7 +56,7 @@ const handleKeyDown = (event) => {
 };
 
 return (
-  <>
+  <div className="d-flex gap-3 align-items-center">
     <Row>
       <SearchIcon>
         <svg
@@ -150,9 +80,9 @@ return (
         autocomplete="search"
         onKeyDown={handleKeyDown}
       />
-      <Button variant="primary" onClick={() => onSearch(searchTerm)}>
-        Search
-      </Button>
     </Row>
-  </>
+    <Button variant="primary" onClick={() => onSearch(searchTerm)}>
+      Search
+    </Button>
+  </div>
 );