Changed order and names of some setting tabs

client/src/components/Settings/GeneralSettings/CustomQueries/CustomQueries.module.css

@@ -0,0 +1,30 @@
+.QueriesGrid {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+}
+
+.QueriesGrid span {
+  color: var(--color-primary);
+}
+
+.QueriesGrid span:last-child {
+  margin-bottom: 10px;
+}
+
+.ActionIcons {
+  display: flex;
+}
+
+.ActionIcons svg {
+  width: 20px;
+}
+
+.ActionIcons svg:hover {
+  cursor: pointer;
+}
+
+.Separator {
+  grid-column: 1 / 4;
+  border-bottom: 1px solid var(--color-primary);
+  margin: 10px 0;
+}

client/src/components/Settings/GeneralSettings/CustomQueries/CustomQueries.tsx

@@ -0,0 +1,109 @@
+import { Fragment, useState } from 'react';
+
+// Redux
+import { useDispatch, useSelector } from 'react-redux';
+import { State } from '../../../../store/reducers';
+import { bindActionCreators } from 'redux';
+import { actionCreators } from '../../../../store';
+
+// Typescript
+import { Query } from '../../../../interfaces';
+
+// CSS
+import classes from './CustomQueries.module.css';
+
+// UI
+import { Modal, Icon, Button } from '../../../UI';
+
+// Components
+import { QueriesForm } from './QueriesForm';
+
+export const CustomQueries = (): JSX.Element => {
+  const { customQueries, config } = useSelector((state: State) => state.config);
+
+  const dispatch = useDispatch();
+  const { deleteQuery, createNotification } = bindActionCreators(
+    actionCreators,
+    dispatch
+  );
+
+  const [modalIsOpen, setModalIsOpen] = useState(false);
+  const [editableQuery, setEditableQuery] = useState<Query | null>(null);
+
+  const updateHandler = (query: Query) => {
+    setEditableQuery(query);
+    setModalIsOpen(true);
+  };
+
+  const deleteHandler = (query: Query) => {
+    const currentProvider = config.defaultSearchProvider;
+    const isCurrent = currentProvider === query.prefix;
+
+    if (isCurrent) {
+      createNotification({
+        title: 'Error',
+        message: 'Cannot delete active provider',
+      });
+    } else if (
+      window.confirm(`Are you sure you want to delete this provider?`)
+    ) {
+      deleteQuery(query.prefix);
+    }
+  };
+
+  return (
+    <Fragment>
+      <Modal
+        isOpen={modalIsOpen}
+        setIsOpen={() => setModalIsOpen(!modalIsOpen)}
+      >
+        {editableQuery ? (
+          <QueriesForm
+            modalHandler={() => setModalIsOpen(!modalIsOpen)}
+            query={editableQuery}
+          />
+        ) : (
+          <QueriesForm modalHandler={() => setModalIsOpen(!modalIsOpen)} />
+        )}
+      </Modal>
+
+      <div>
+        <div className={classes.QueriesGrid}>
+          {customQueries.length > 0 && (
+            <Fragment>
+              <span>Name</span>
+              <span>Prefix</span>
+              <span>Actions</span>
+
+              <div className={classes.Separator}></div>
+            </Fragment>
+          )}
+
+          {customQueries.map((q: Query, idx) => (
+            <Fragment key={idx}>
+              <span>{q.name}</span>
+              <span>{q.prefix}</span>
+              <span className={classes.ActionIcons}>
+                <span onClick={() => updateHandler(q)}>
+                  <Icon icon="mdiPencil" />
+                </span>
+                <span onClick={() => deleteHandler(q)}>
+                  <Icon icon="mdiDelete" />
+                </span>
+              </span>
+            </Fragment>
+          ))}
+        </div>
+
+        <Button
+          click={() => {
+            setEditableQuery(null);
+            setModalIsOpen(true);
+          }}
+        >
+          Add new search provider
+        </Button>
+      </div>
+    </Fragment>
+  );
+};

client/src/components/Settings/GeneralSettings/CustomQueries/QueriesForm.tsx

@@ -0,0 +1,116 @@
+import { ChangeEvent, FormEvent, useState, useEffect } from 'react';
+
+import { useDispatch } from 'react-redux';
+import { bindActionCreators } from 'redux';
+import { actionCreators } from '../../../../store';
+
+import { Query } from '../../../../interfaces';
+
+import { Button, InputGroup, ModalForm } from '../../../UI';
+
+interface Props {
+  modalHandler: () => void;
+  query?: Query;
+}
+
+export const QueriesForm = (props: Props): JSX.Element => {
+  const dispatch = useDispatch();
+  const { addQuery, updateQuery } = bindActionCreators(
+    actionCreators,
+    dispatch
+  );
+
+  const { modalHandler, query } = props;
+
+  const [formData, setFormData] = useState<Query>({
+    name: '',
+    prefix: '',
+    template: '',
+  });
+
+  const inputChangeHandler = (e: ChangeEvent<HTMLInputElement>) => {
+    const { name, value } = e.target;
+
+    setFormData({
+      ...formData,
+      [name]: value,
+    });
+  };
+
+  const formHandler = (e: FormEvent) => {
+    e.preventDefault();
+
+    if (query) {
+      updateQuery(formData, query.prefix);
+    } else {
+      addQuery(formData);
+    }
+
+    // close modal
+    modalHandler();
+
+    // clear form
+    setFormData({
+      name: '',
+      prefix: '',
+      template: '',
+    });
+  };
+
+  useEffect(() => {
+    if (query) {
+      setFormData(query);
+    } else {
+      setFormData({
+        name: '',
+        prefix: '',
+        template: '',
+      });
+    }
+  }, [query]);
+
+  return (
+    <ModalForm modalHandler={modalHandler} formHandler={formHandler}>
+      <InputGroup>
+        <label htmlFor="name">Name</label>
+        <input
+          type="text"
+          name="name"
+          id="name"
+          placeholder="Google"
+          required
+          value={formData.name}
+          onChange={(e) => inputChangeHandler(e)}
+        />
+      </InputGroup>
+
+      <InputGroup>
+        <label htmlFor="name">Prefix</label>
+        <input
+          type="text"
+          name="prefix"
+          id="prefix"
+          placeholder="g"
+          required
+          value={formData.prefix}
+          onChange={(e) => inputChangeHandler(e)}
+        />
+      </InputGroup>
+
+      <InputGroup>
+        <label htmlFor="name">Query Template</label>
+        <input
+          type="text"
+          name="template"
+          id="template"
+          placeholder="https://www.google.com/search?q="
+          required
+          value={formData.template}
+          onChange={(e) => inputChangeHandler(e)}
+        />
+      </InputGroup>
+
+      {query ? <Button>Update provider</Button> : <Button>Add provider</Button>}
+    </ModalForm>
+  );
+};