From c4148f0494a745c6518de7b1fa2bf6bff008d877 Mon Sep 17 00:00:00 2001
From: Alejandro Celaya <alejandrocelaya@gmail.com>
Date: Fri, 11 Mar 2022 16:37:41 +0100
Subject: [PATCH] Fixed reactstrap 9 deprecated warnings

---
 src/common/Home.tsx                    | 2 +-
 src/servers/ServersDropdown.tsx        | 2 +-
 src/utils/DropdownBtn.tsx              | 2 +-
 src/utils/DropdownBtnMenu.tsx          | 2 +-
 src/utils/Message.tsx                  | 2 +-
 src/utils/OrderingDropdown.tsx         | 2 +-
 src/utils/PaginationDropdown.tsx       | 6 ++----
 src/visits/charts/LineChartCard.tsx    | 2 +-
 src/visits/helpers/OpenMapModalBtn.tsx | 2 +-
 test/utils/DropdownBtnMenu.test.tsx    | 2 +-
 test/utils/Message.test.tsx            | 2 +-
 11 files changed, 12 insertions(+), 14 deletions(-)

diff --git a/src/common/Home.tsx b/src/common/Home.tsx
index 6915a816..853c9d49 100644
--- a/src/common/Home.tsx
+++ b/src/common/Home.tsx
@@ -29,7 +29,7 @@ const Home = ({ servers }: HomeProps) => {
   return (
     <div className="home">
       <Card className="home__main-card">
-        <Row noGutters>
+        <Row className="g-0">
           <div className="col-md-5 d-none d-md-block">
             <div className="home__logo-wrapper">
               <div className="home__logo">
diff --git a/src/servers/ServersDropdown.tsx b/src/servers/ServersDropdown.tsx
index a373572c..cf619228 100644
--- a/src/servers/ServersDropdown.tsx
+++ b/src/servers/ServersDropdown.tsx
@@ -42,7 +42,7 @@ const ServersDropdown = ({ servers, selectedServer }: ServersDropdownProps) => {
       <DropdownToggle nav caret>
         <FontAwesomeIcon icon={serverIcon} /> <span className="ms-1">Servers</span>
       </DropdownToggle>
-      <DropdownMenu right style={{ right: 0 }}>{renderServers()}</DropdownMenu>
+      <DropdownMenu end style={{ right: 0 }}>{renderServers()}</DropdownMenu>
     </UncontrolledDropdown>
   );
 };
diff --git a/src/utils/DropdownBtn.tsx b/src/utils/DropdownBtn.tsx
index 7aeec368..1deee007 100644
--- a/src/utils/DropdownBtn.tsx
+++ b/src/utils/DropdownBtn.tsx
@@ -22,7 +22,7 @@ export const DropdownBtn: FC<DropdownBtnProps> = (
   return (
     <Dropdown isOpen={isOpen} toggle={toggle} disabled={disabled} className={dropdownClassName}>
       <DropdownToggle caret className={toggleClasses} color="primary">{text}</DropdownToggle>
-      <DropdownMenu className="w-100" right={right} style={style}>{children}</DropdownMenu>
+      <DropdownMenu className="w-100" end={right} style={style}>{children}</DropdownMenu>
     </Dropdown>
   );
 };
diff --git a/src/utils/DropdownBtnMenu.tsx b/src/utils/DropdownBtnMenu.tsx
index 71cd2b83..26d4565e 100644
--- a/src/utils/DropdownBtnMenu.tsx
+++ b/src/utils/DropdownBtnMenu.tsx
@@ -15,6 +15,6 @@ export const DropdownBtnMenu: FC<DropdownBtnMenuProps> = ({ isOpen, toggle, chil
     <DropdownToggle size="sm" caret outline className="dropdown-btn-menu__dropdown-toggle">
       &nbsp;<FontAwesomeIcon icon={menuIcon} />&nbsp;
     </DropdownToggle>
-    <DropdownMenu right={right}>{children}</DropdownMenu>
+    <DropdownMenu end={right}>{children}</DropdownMenu>
   </ButtonDropdown>
 );
diff --git a/src/utils/Message.tsx b/src/utils/Message.tsx
index 5c046132..bd1f740b 100644
--- a/src/utils/Message.tsx
+++ b/src/utils/Message.tsx
@@ -37,7 +37,7 @@ const Message: FC<MessageProps> = ({ className, children, loading = false, type
   });
 
   return (
-    <Row noGutters className={className}>
+    <Row className={classNames('g-0', className)}>
       <div className={classes}>
         <Card className={getClassForType(type)} body>
           <h3 className={classNames('text-center mb-0', getTextClassForType(type))}>
diff --git a/src/utils/OrderingDropdown.tsx b/src/utils/OrderingDropdown.tsx
index 8d112843..7010f5dd 100644
--- a/src/utils/OrderingDropdown.tsx
+++ b/src/utils/OrderingDropdown.tsx
@@ -35,7 +35,7 @@ export function OrderingDropdown<T extends string = string>(
         {isButton && order.field && `Order by: "${items[order.field]}" - "${order.dir ?? 'DESC'}"`}
       </DropdownToggle>
       <DropdownMenu
-        right={right}
+        end={right}
         className={classNames('w-100', { 'ordering-dropdown__menu--link': !isButton })}
       >
         {toPairs(items).map(([ fieldKey, fieldValue ]) => (
diff --git a/src/utils/PaginationDropdown.tsx b/src/utils/PaginationDropdown.tsx
index 933c2e0a..f98af1a9 100644
--- a/src/utils/PaginationDropdown.tsx
+++ b/src/utils/PaginationDropdown.tsx
@@ -9,10 +9,8 @@ interface PaginationDropdownProps {
 
 const PaginationDropdown = ({ toggleClassName, ranges, value, setValue }: PaginationDropdownProps) => (
   <UncontrolledDropdown>
-    <DropdownToggle caret color="link" className={toggleClassName}>
-      Paginate
-    </DropdownToggle>
-    <DropdownMenu right>
+    <DropdownToggle caret color="link" className={toggleClassName}>Paginate</DropdownToggle>
+    <DropdownMenu end>
       {ranges.map((itemsPerPage) => (
         <DropdownItem key={itemsPerPage} active={itemsPerPage === value} onClick={() => setValue(itemsPerPage)}>
           <b>{itemsPerPage}</b> items per page
diff --git a/src/visits/charts/LineChartCard.tsx b/src/visits/charts/LineChartCard.tsx
index 5ee84f78..38c47453 100644
--- a/src/visits/charts/LineChartCard.tsx
+++ b/src/visits/charts/LineChartCard.tsx
@@ -237,7 +237,7 @@ const LineChartCard = (
             <DropdownToggle caret color="link" className="btn-sm p-0">
               Group by
             </DropdownToggle>
-            <DropdownMenu right>
+            <DropdownMenu end>
               {Object.entries(STEPS_MAP).map(([ value, menuText ]) => (
                 <DropdownItem key={value} active={step === value} onClick={() => setStep(value as Step)}>
                   {menuText}
diff --git a/src/visits/helpers/OpenMapModalBtn.tsx b/src/visits/helpers/OpenMapModalBtn.tsx
index b7c19e86..32845502 100644
--- a/src/visits/helpers/OpenMapModalBtn.tsx
+++ b/src/visits/helpers/OpenMapModalBtn.tsx
@@ -42,7 +42,7 @@ const OpenMapModalBtn = ({ modalTitle, activeCities, locations = [] }: OpenMapMo
       </button>
       <UncontrolledTooltip placement="left" target={(() => buttonRef.current) as any}>Show in map</UncontrolledTooltip>
       <Dropdown isOpen={dropdownIsOpened} toggle={toggleDropdown} inNavbar>
-        <DropdownMenu right>
+        <DropdownMenu end>
           <DropdownItem onClick={openMapWithLocations(false)}>Show all locations</DropdownItem>
           <DropdownItem onClick={openMapWithLocations(true)}>Show locations in current page</DropdownItem>
         </DropdownMenu>
diff --git a/test/utils/DropdownBtnMenu.test.tsx b/test/utils/DropdownBtnMenu.test.tsx
index 3d07ca64..30ab3d74 100644
--- a/test/utils/DropdownBtnMenu.test.tsx
+++ b/test/utils/DropdownBtnMenu.test.tsx
@@ -43,6 +43,6 @@ describe('<DropdownBtnMenu />', () => {
   ])('renders menu to right when expected', (right, expectedRight) => {
     const wrapper = createWrapper({ right });
 
-    expect(wrapper.find(DropdownMenu).prop('right')).toEqual(expectedRight);
+    expect(wrapper.find(DropdownMenu).prop('end')).toEqual(expectedRight);
   });
 });
diff --git a/test/utils/Message.test.tsx b/test/utils/Message.test.tsx
index 036a6b49..578d68b6 100644
--- a/test/utils/Message.test.tsx
+++ b/test/utils/Message.test.tsx
@@ -59,6 +59,6 @@ describe('<Message />', () => {
   it.each([{ className: 'foo' }, { className: 'bar' }, {}])('renders provided classes', ({ className }) => {
     const wrapper = createWrapper({ className });
 
-    expect(wrapper.prop('className')).toEqual(className);
+    expect(wrapper.prop('className')).toEqual(`g-0${className ? ` ${className}` : ''}`);
   });
 });