Create custom select, update tests

src/components/app.tsx

@@ -27,7 +27,7 @@ const DetailsContainer = styled.div`
 `;
 
 const AppName = styled.div`
-  a:hover & {
+  a:hover {
     text-decoration: underline;
   }
 `;

src/components/appCategory.tsx

@@ -24,14 +24,14 @@ const AppCategory = ({ name, items }: IAppCategoryProps) => (
   <CategoryContainer>
     {name && <CategoryHeadline>{name}</CategoryHeadline>}
     <ItemList>
-      {items.map((app, idx) => (
-        <Item key={[app.name, idx].join("")}>
+      {items.map(({ name, icon, displayURL, newTab, url }, index) => (
+        <Item key={[name, index].join("")}>
           <App
-            name={app.name}
-            icon={app.icon}
-            url={app.url}
-            displayURL={app.displayURL}
-            newTab={app.newTab}
+            name={name}
+            icon={icon}
+            url={url}
+            displayURL={displayURL}
+            newTab={newTab}
           />
         </Item>
       ))}

src/components/appList.tsx

@@ -19,8 +19,12 @@ const AppList = ({ categories, apps }: IAppListProps) => {
       <ListContainer>
         <Headline>Applications</Headline>
         {categories &&
-          categories.map(({ name, items }, idx) => (
-            <AppCategory key={[name, idx].join("")} name={name} items={items} />
+          categories.map(({ name, items }, index) => (
+            <AppCategory
+              key={[name, index].join("")}
+              name={name}
+              items={items}
+            />
           ))}
         {apps && (
           <AppCategory

src/components/bookmarks.tsx

@@ -50,8 +50,8 @@ export const BookmarkGroup = ({ name, items }: IBookmarkGroupProps) => (
   <Item>
     <GroupContainer>
       <SubHeadline>{name}</SubHeadline>
-      {items.map(({ name, url }, idx) => (
-        <Bookmark key={[name, idx].join("")} href={url}>
+      {items.map(({ name, url }, index) => (
+        <Bookmark key={[name, index].join("")} href={url}>
           {name}
         </Bookmark>
       ))}
@@ -68,8 +68,8 @@ const BookmarkList = ({ groups }: IBookmarkListProps) => (
   <ListContainer>
     <Headline>Bookmarks</Headline>
     <ItemList>
-      {groups.map(({ name, items }, idx) => (
-        <BookmarkGroup key={[name, idx].join("")} name={name} items={items} />
+      {groups.map(({ name, items }, index) => (
+        <BookmarkGroup key={[name, index].join("")} name={name} items={items} />
       ))}
     </ItemList>
   </ListContainer>

src/components/elements.tsx

@@ -42,6 +42,7 @@ export const Item = styled.li`
 
 export const Button = styled.button`
   text-transform: uppercase;
+  font-family: Roboto, sans-serif;
   font-weight: 400;
   border: 1px solid ${selectedTheme.mainColor};
   color: ${selectedTheme.mainColor};

src/components/select.tsx

@@ -0,0 +1,40 @@
+import React from "react";
+
+export interface IItemProps {
+  label: string;
+  value: any;
+}
+
+export interface ISelectProps {
+  items: Array<IItemProps>;
+  onChange: (item: any) => void;
+  className?: string;
+}
+
+const update = (
+  items: Array<IItemProps>,
+  onChange: (item: any) => void,
+  e: React.ChangeEvent<HTMLSelectElement>,
+) => {
+  onChange(items.find((item) => item.value.toString() === e.target.value));
+};
+
+const Select = ({ items, onChange, className }: ISelectProps) => (
+  <select
+    data-testid="select"
+    onChange={(e) => update(items, onChange, e)}
+    className={className}
+  >
+    {items.map(({ label, value }, index) => (
+      <option
+        data-testid={"option-" + index}
+        key={[label, index].join("")}
+        value={value.toString()}
+      >
+        {label}
+      </option>
+    ))}
+  </select>
+);
+
+export default Select;

src/components/settings.tsx

@@ -1,7 +1,7 @@
 import { useState } from "react";
 import styled from "styled-components";
 
-import Select, { ValueType } from "react-select";
+import Select, { IItemProps } from "./select";
 
 import { ISearchProps } from "./searchBar";
 import selectedTheme, { setTheme, IThemeProps } from "../lib/theme";
@@ -55,63 +55,21 @@ const Code = styled.p`
   color: ${selectedTheme.accentColor};
 `;
 
-export const SelectorStyle: any = {
-  container: (base: any): any => ({
-    ...base,
-    margin: "0 2px",
-  }),
-  control: (base: any): any => ({
-    ...base,
-    fontWeight: 500,
-    color: selectedTheme.mainColor,
-    textTransform: "uppercase",
-    width: "12rem",
-    background: "none",
-    borderRadius: 0,
-    border: "1px solid",
-    borderColor: selectedTheme.mainColor,
-    boxShadow: "none",
-    "&:hover": {
-      border: "1px solid",
-      borderColor: selectedTheme.mainColor,
-    },
-  }),
-  dropdownIndicator: (base: any): any => ({
-    ...base,
-    color: selectedTheme.mainColor,
-    "&:hover": {
-      color: selectedTheme.mainColor,
-    },
-  }),
-  indicatorSeparator: () => ({
-    display: "none",
-  }),
-  menu: (base: any): any => ({
-    ...base,
-    backgroundColor: selectedTheme.backgroundColor,
-    border: "1px solid " + selectedTheme.mainColor,
-    borderRadius: 0,
-    boxShadow: "none",
-    margin: "4px 0",
-  }),
-  option: (base: any): any => ({
-    ...base,
-    fontWeight: 500,
-    color: selectedTheme.mainColor,
-    textTransform: "uppercase",
-    borderRadius: 0,
-    boxShadow: "none",
-    backgroundColor: selectedTheme.backgroundColor,
-    "&:hover": {
-      backgroundColor: selectedTheme.mainColor,
-      color: selectedTheme.backgroundColor,
-    },
-  }),
-  singleValue: (base: any): any => ({
-    ...base,
-    color: selectedTheme.mainColor,
-  }),
-};
+const ThemeSelect = styled(Select)`
+  -webkit-appearance: button;
+  -moz-appearance: button;
+
+  text-transform: uppercase;
+  font-family: Roboto, sans-serif;
+  font-weight: 400;
+  border: 1px solid ${selectedTheme.mainColor};
+  color: ${selectedTheme.mainColor};
+  background: none;
+
+  & > option {
+    background-color: ${selectedTheme.backgroundColor};
+  }
+`;
 
 interface ISettingsProps {
   themes: Array<IThemeProps> | undefined;
@@ -133,15 +91,10 @@ const Settings = ({ themes, search }: ISettingsProps) => {
           <Section>
             <SectionHeadline>Theme:</SectionHeadline>
             <FormContainer>
-              <Select
-                classNamePrefix="list"
-                options={themes}
-                defaultValue={selectedTheme}
-                onChange={(e: ValueType<IThemeProps, false>) => {
-                  if (e !== null && e !== undefined) setNewTheme(e);
-                }}
-                styles={SelectorStyle}
-              />
+              <ThemeSelect
+                items={themes}
+                onChange={(theme: IThemeProps) => setNewTheme(theme)}
+              ></ThemeSelect>
               <Button
                 data-testid="button-submit"
                 onClick={() => {
@@ -174,10 +127,10 @@ const Settings = ({ themes, search }: ISettingsProps) => {
                       <HeadCell>Search Provider</HeadCell>
                       <HeadCell>Prefix</HeadCell>
                     </TableRow>
-                    {search.providers.map((provider, index) => (
-                      <TableRow key={provider.name + index}>
-                        <TableCell>{provider.name}</TableCell>
-                        <TableCell>{provider.prefix}</TableCell>
+                    {search.providers.map(({ name, prefix }, index) => (
+                      <TableRow key={name + index}>
+                        <TableCell>{name}</TableCell>
+                        <TableCell>{prefix}</TableCell>
                       </TableRow>
                     ))}
                   </tbody>