Finished feature 695

package.json

@@ -36,6 +36,8 @@
     "react-scripts": "4.0.3",
     "react-select": "^4.3.1",
     "react-singleton-hook": "^3.4.0",
+    "react-spring": "^8.0.27",
+    "react-swipeable": "^7.0.0",
     "react-toastify": "^9.0.3",
     "redux": "^4.1.0",
     "redux-persist": "^6.0.0",

src/AppRoutes.js

@@ -1,6 +1,6 @@
 /* eslint-disable */
 import React from "react";
-import { Redirect, Route, Switch } from "react-router-dom";
+import { Redirect, Route, Switch, useLocation } from "react-router-dom";
 
 import {
   LOGIN_PAGE,
@@ -28,6 +28,7 @@ import {
   ADMIN_SUBCATEGORIES_PAGE,
   // POLICY_PRIVACY_PAGE,
 } from "./constants/pages";
+// import SlideRoutes from "react-slide-routes";
 import LoginPage from "./pages/LoginPage/LoginPage";
 import AdminLoginPage from "./pages/AdminLoginPage/AdminLoginPage";
 import HomePage from "./pages/HomePage/HomePageMUI";
@@ -53,6 +54,7 @@ import AdminHomePage from "./pages/AdminHomePage/AdminHomePage";
 // import PrivacyPolicyPage from "./pages/PrivacyPolicy/PrivacyPolicyPage";
 
 const AppRoutes = () => {
+  // const location = useLocation();
   return (
     <Switch>
       <Route exact path={BASE_PAGE} component={HomePage} />
@@ -78,8 +80,10 @@ const AppRoutes = () => {
           return <HomePage key={props.match.params.id} />;
         }}
       />
-      <PrivateRoute path={CHAT_MESSAGE_PAGE} component={ChatMessagesPage} />
-      <PrivateRoute path={CHAT_PAGE} component={ChatPage} />
+      {/* <SlideRoutes location={location}> */}
+        <PrivateRoute exact path={CHAT_PAGE} component={ChatPage} />
+        <PrivateRoute path={CHAT_MESSAGE_PAGE} component={ChatMessagesPage} />
+      {/* </SlideRoutes> */}
       <PrivateRoute path={MY_OFFERS_PAGE} component={MyOffers} />
       <Redirect from="*" to={NOT_FOUND_PAGE} />
     </Switch>

src/components/Admin/Sidebar/Sidebar.styled.js

@@ -14,7 +14,7 @@ export const SidebarContainer = styled(Box)`
   @media (max-width: 1536px) {
     width: 25%;
   }
-  @media (max-width: 600px) {
+  @media (max-width: 900px) {
     display: none;
   }
 `;

src/components/Cards/ChatCard/ChatCard.js

@@ -10,9 +10,6 @@ import {
 import MobileOfferDetails from "./MobileOfferDetails/MobileOfferDetails";
 import useIsMobile from "../../../hooks/useIsMobile";
 import { getImageUrl, variants } from "../../../util/helpers/imageUrlGetter";
-import history from "../../../store/utils/history";
-import { replaceInRoute } from "../../../util/helpers/routeHelpers";
-import { CHAT_MESSAGE_PAGE } from "../../../constants/pages";
 
 // Chat card is shown only on mobile phones (route /messages)
 const ChatCard = (props) => {
@@ -23,11 +20,7 @@ const ChatCard = (props) => {
   }, [props.chat]);
 
   const routeToItem = () => {
-    history.push(
-      replaceInRoute(CHAT_MESSAGE_PAGE, {
-        idChat: chat?.chat?._id,
-      })
-    );
+    props.navigateToChat(chat?.chat?._id);
   };
 
   return (
@@ -52,6 +45,7 @@ const ChatCard = (props) => {
 
 ChatCard.propTypes = {
   chat: PropTypes.any,
+  navigateToChat: PropTypes.func,
 };
 ChatCard.defaultProps = {
   halfwidth: false,

src/components/Cards/ChatCard/ChatCard.styled.js

@@ -10,15 +10,19 @@ export const ChatCardContainer = styled(Container)`
   box-sizing: border-box;
   margin: 10px 0;
   background-color: ${(props) =>
-    props.sponsored === "true" ? selectedTheme.colors.backgroundSponsoredColor : "white"};
+    props.sponsored === "true"
+      ? selectedTheme.colors.backgroundSponsoredColor
+      : "white"};
   border-radius: 4px;
   ${(props) =>
-    props.sponsored === "true" && `border: 1px solid ${selectedTheme.colors.borderSponsoredColor};`}
+    props.sponsored === "true" &&
+    `border: 1px solid ${selectedTheme.colors.borderSponsoredColor};`}
   padding: 16px;
   max-width: 2000px;
   height: 180px;
   position: relative;
   gap: 18px;
+
   @media (max-width: 550px) {
     max-height: 108px;
     margin: 0;

src/components/Cards/CreateOfferCard/ThirdPart/ThirdPartCreateOffer.styled.js

@@ -1,6 +1,6 @@
 import { Box } from "@mui/material";
 import styled from "styled-components";
-import { PrimaryButton } from "../../../Buttons/PrimaryButton/PrimaryButton";
+import { PrimaryAnimatedButton } from "../../../Styles/globalStyleComponents";
 import ItemDetailsCard from "../../ItemDetailsCard/ItemDetailsCard";
 
 export const CreateOfferFormContainer = styled(Box)`
@@ -11,7 +11,7 @@ export const CreateOfferFormContainer = styled(Box)`
 export const PreviewCard = styled(ItemDetailsCard)`
   width: auto;
 `;
-export const PublishButton = styled(PrimaryButton)`
+export const PublishButton = styled(PrimaryAnimatedButton)`
   width: 332px;
   margin-top: 16px;
   /* position: absolute;

src/components/Cards/ProfileCard/BigProfileCard/BigProfileCard.js

@@ -42,7 +42,7 @@ const BigProfileCard = (props) => {
       type: "deleteUser",
     });
   };
-  console.log(props.profile);
+  // console.log(props.profile);
   const blockUser = () => {
     setDeleteOrEditModal({
       show: true,

src/components/Cards/ProfileCard/EditProfile/EditProfile.js

@@ -12,6 +12,7 @@ import {
   DetailsInfo,
   ButtonsContainer,
   ProfileImagePicker,
+  FinishButton,
 } from "./EditProfile.styled";
 import selectedTheme from "../../../../themes";
 import { useFormik } from "formik";
@@ -46,6 +47,8 @@ import {
   ADMIN_USERS_PAGE,
   PROFILE_PAGE,
 } from "../../../../constants/pages";
+import { selectIsLoadingByActionType } from "../../../../store/selectors/loadingSelectors";
+import { PROFILE_EDIT_ADMIN_SCOPE, PROFILE_EDIT_SCOPE } from "../../../../store/actions/profile/profileActionConstants";
 
 const EditProfile = (props) => {
   const [profileImage, setProfileImage] = useState(props.profile.image);
@@ -53,6 +56,11 @@ const EditProfile = (props) => {
   const [showDetails, setShowDetails] = useState(true);
   const { t } = useTranslation();
   const dispatch = useDispatch();
+  const isLoadingEdit = useSelector(
+    selectIsLoadingByActionType(
+      props.isAdmin ? PROFILE_EDIT_ADMIN_SCOPE : PROFILE_EDIT_SCOPE
+    )
+  );
   const { isMobile } = useIsMobile();
   const userId = useSelector(selectUserId);
   const locations = useSelector((state) => state.locations.locations);
@@ -66,6 +74,7 @@ const EditProfile = (props) => {
     if (routeMatches(ADMIN_USERS_PAGE) || routeMatches(ADMIN_HOME_PAGE))
       dispatch(fetchAllProfilesAsAdmin());
     props.reFetchProfile();
+    props.closeModalHandler();
   };
 
   const handleSubmit = (values) => {
@@ -87,7 +96,6 @@ const EditProfile = (props) => {
         })
       );
     }
-    props.closeModalHandler();
   };
   const initialValues = useMemo(
     () => editProfileInitialValues(props?.profile),
@@ -144,7 +152,7 @@ const EditProfile = (props) => {
         {showBasic && (
           <BasicInfo>
             <FirmNameField formik={formik} />
-            <PIBField formik={formik} />
+            <PIBField formik={formik} isAdmin={props.isAdmin} />
             <LocationField formik={formik} />
           </BasicInfo>
         )}
@@ -174,16 +182,17 @@ const EditProfile = (props) => {
               </SaveButton>
             </>
           )}
-          <SaveButton
+          <FinishButton
             type="submit"
             variant="contained"
             height={isMobile ? "44px" : "48px"}
             width={isMobile ? "155px" : "335px"}
             buttoncolor={selectedTheme.colors.primaryPurple}
             textcolor="white"
+            isLoading={isLoadingEdit}
           >
             {t("common.save")}
-          </SaveButton>
+          </FinishButton>
         </ButtonsContainer>
       </EditProfileContainer>
     </>

src/components/Cards/ProfileCard/EditProfile/EditProfile.styled.js

@@ -4,6 +4,7 @@ import ImagePicker from "../../../ImagePicker/ImagePicker";
 import { PrimaryButton } from "../../../Buttons/PrimaryButton/PrimaryButton";
 import { Label } from "../../../CheckBox/Label";
 import selectedTheme from "../../../../themes";
+import { PrimaryAnimatedButton } from "../../../Styles/globalStyleComponents";
 
 export const EditProfileContainer = styled(Box)`
   background-color: #fff;
@@ -124,6 +125,10 @@ export const SaveButton = styled(PrimaryButton)`
   font-size: 12px;
   letter-spacing: 1.5px;
 `;
+export const FinishButton = styled(PrimaryAnimatedButton)`
+  font-size: 12px;
+  letter-spacing: 1.5px;
+`
 
 export const ButtonsContainer = styled(Box)`
   display: flex;

src/components/Cards/ProfileCard/EditProfile/PIBField/PIBField.js

@@ -12,11 +12,14 @@ const PIBField = (props) => {
         name="firmPIB"
         type="number"
         value={props.formik.values.firmPIB}
-        onChange={props.formik.handleChange}
+        onChange={(event) => {
+          console.dir(event.target);
+          props.formik.setFieldValue("firmPIB", event.target.value)
+        }}
         error={props.formik.touched.firmPIB && props.formik.errors.firmPIB}
         margin="normal"
         fullWidth
-        disabled
+        disabled={!props.isAdmin}
       />
     </>
   );
@@ -24,6 +27,7 @@ const PIBField = (props) => {
 
 PIBField.propTypes = {
   formik: PropTypes.any,
+  isAdmin: PropTypes.bool,
 };
 
 export default PIBField;

src/components/ChatColumn/ChatColumn.js

@@ -1,7 +1,9 @@
 import React, { useState, useEffect } from "react";
+import PropTypes from "prop-types";
 import ChatCard from "../Cards/ChatCard/ChatCard";
 import {
   ChatColumnContainer,
+  ChatPagingText,
   HeaderBack,
   HeaderSelect,
   ListContainer,
@@ -26,6 +28,9 @@ import { addMesageListener, removeMessageListener } from "../../socket/socket";
 import { selectIsLoadingByActionType } from "../../store/selectors/loadingSelectors";
 import { CHAT_SCOPE } from "../../store/actions/chat/chatActionConstants";
 import SkeletonChatColumn from "./SkeletonChatColumn/SkeletonChatColumn";
+import Paging from "../Paging/Paging";
+import usePaging from "../../hooks/useOffers/usePaging";
+import useIsMobile from "../../hooks/useIsMobile";
 
 export const DownArrow = (props) => {
   <IconStyled {...props}>
@@ -33,18 +38,28 @@ export const DownArrow = (props) => {
   </IconStyled>;
 };
 
-export const ChatColumn = () => {
+export const ChatColumn = (props) => {
   const dispatch = useDispatch();
   const sorting = useSorting();
   const { t } = useTranslation();
+  const { isMobile } = useIsMobile();
   const [sortOption, setSortOption] = useState(sortEnum.INITIAL);
   const chats = useSelector(selectLatestChats);
+  const paging = usePaging();
   const isLoadingChats = useSelector(selectIsLoadingByActionType(CHAT_SCOPE));
   useEffect(() => {
-    dispatch(fetchChats());
-  }, []);
+    dispatch(
+      fetchChats({
+        currentPage: paging.currentPage,
+      })
+    );
+  }, [paging.currentPage]);
 
   useEffect(() => {
+    if (!isMobile) {
+      history.goBack();
+      return;
+    }
     addMesageListener(({ succeed, data }) => {
       if (succeed) {
         dispatch(
@@ -73,6 +88,7 @@ export const ChatColumn = () => {
       }
     }
   };
+  const handleChangePage = (newPage) => paging.changePage(newPage);
 
   return (
     <>
@@ -112,13 +128,31 @@ export const ChatColumn = () => {
           </TitleSortContainer>
           <ListContainer>
             {chats.map((item, index) => (
-              <ChatCard key={index} chat={item} />
+              <ChatCard key={index} chat={item} navigateToChat={props.navigateToChat} />
             ))}
           </ListContainer>
+          <Paging
+            elementsPerPage={6}
+            customPaging
+            current={paging.currentPage}
+            pages={
+              chats.length === 6 ? paging.currentPage + 1 : paging.currentPage
+            }
+            changePage={handleChangePage}
+          >
+            <ChatPagingText>
+              {(paging.currentPage - 1) * 6 + 1}-
+              {(paging.currentPage - 1) * 6 + chats.length}
+            </ChatPagingText>
+          </Paging>
         </ChatColumnContainer>
       )}
     </>
   );
 };
 
+ChatColumn.propTypes = {
+  navigateToChat: PropTypes.func,
+}
+
 export default ChatColumn;

src/components/ChatColumn/ChatColumn.styled.js

@@ -1,4 +1,4 @@
-import { Box } from "@mui/material";
+import { Box, Typography } from "@mui/material";
 import { Container } from "@mui/system";
 import styled from "styled-components";
 import selectedTheme from "../../themes";
@@ -7,7 +7,9 @@ import Option from "../Select/Option/Option";
 import Select from "../Select/Select";
 
 export const ChatColumnContainer = styled(Container)`
-  margin-bottom: 40px;
+  margin-bottom: 10px;
+  padding-bottom:60px;
+  position: relative;
 `;
 
 export const ListContainer = styled(Box)`
@@ -72,3 +74,15 @@ export const HeaderBack = styled(Header)`
     top: -12px;
   }
 `;
+export const ChatPagingText = styled(Typography)`
+  font-family: ${selectedTheme.fonts.textFont};
+  color: ${selectedTheme.colors.primaryPurple};
+  position: relative;
+  top: 6px;
+  margin-left: 36px;
+  margin-right: 36px;
+  font-style: normal;
+  font-weight: 700;
+  font-size: 16px;
+  line-height: 21px;
+`;

src/components/DirectChat/MiniChatColumn/MiniChatColumn.js

@@ -1,6 +1,10 @@
 import React, { useEffect, useMemo } from "react";
 import PropTypes from "prop-types";
-import { MiniChatColumnContainer, MinIChatColumnList } from "./MiniChatColumn.styled";
+import {
+  ChatPagingText,
+  MiniChatColumnContainer,
+  MinIChatColumnList,
+} from "./MiniChatColumn.styled";
 import MiniChatCard from "../../Cards/MiniChatCard/MiniChatCard";
 import { useDispatch, useSelector } from "react-redux";
 import {
@@ -14,6 +18,8 @@ import { selectOffer } from "../../../store/selectors/offersSelectors";
 import SkeletonMiniChatColumn from "./SkeletonMiniChatColumn/SkeletonMiniChatColumn";
 import { selectIsLoadingByActionType } from "../../../store/selectors/loadingSelectors";
 import { CHAT_SCOPE } from "../../../store/actions/chat/chatActionConstants";
+import usePaging from "../../../hooks/useOffers/usePaging";
+import Paging from "../../Paging/Paging";
 
 const MiniChatColumn = () => {
   const chats = useSelector(selectLatestChats);
@@ -21,6 +27,7 @@ const MiniChatColumn = () => {
   const offer = useSelector(selectOffer);
   const location = useLocation();
   const dispatch = useDispatch();
+  const paging = usePaging();
   const isLoadingMiniChat = useSelector(
     selectIsLoadingByActionType(CHAT_SCOPE)
   );
@@ -40,8 +47,13 @@ const MiniChatColumn = () => {
   }, [offer, location.state]);
 
   useEffect(() => {
-    dispatch(fetchChats());
-  }, []);
+    dispatch(
+      fetchChats({
+        currentPage: paging.currentPage,
+      })
+    );
+  }, [paging.currentPage]);
+  const handleChangePage = (newPage) => paging.changePage(newPage);
   return (
     <>
       {isLoadingMiniChat || isLoadingMiniChat === undefined ? (
@@ -63,6 +75,20 @@ const MiniChatColumn = () => {
               );
             })}
           </MinIChatColumnList>
+          <Paging
+            elementsPerPage={6}
+            customPaging
+            current={paging.currentPage}
+            pages={
+              chats.length === 6 ? paging.currentPage + 1 : paging.currentPage
+            }
+            changePage={handleChangePage}
+          >
+            <ChatPagingText>
+              {(paging.currentPage - 1) * 6 + 1}-
+              {(paging.currentPage - 1) * 6 + chats.length}
+            </ChatPagingText>
+          </Paging>
         </MiniChatColumnContainer>
       )}
     </>

src/components/DirectChat/MiniChatColumn/MiniChatColumn.styled.js

@@ -1,13 +1,16 @@
-import { Box } from "@mui/material";
+import { Box, Typography } from "@mui/material";
 import styled from "styled-components";
+import selectedTheme from "../../../themes";
 
 export const MiniChatColumnContainer = styled(Box)`
+  position: relative;
+  padding-bottom: 50px;
   @media (max-width: 600px) {
     display: none;
   }
 `;
 export const MinIChatColumnList = styled(Box)`
-  max-height: calc(100vh - 173px);
+  /* max-height: calc(100vh - 173px); */
   overflow-y: auto;
   padding-right: 5px;
   &::-webkit-scrollbar {
@@ -22,3 +25,15 @@ export const MinIChatColumnList = styled(Box)`
   scrollbar-width: thin;
   scrollbar-color: #ddd;
 `;
+export const ChatPagingText = styled(Typography)`
+  font-family: ${selectedTheme.fonts.textFont};
+  color: ${selectedTheme.colors.primaryPurple};
+  position: relative;
+  top: 6px;
+  margin-left: 36px;
+  margin-right: 36px;
+  font-style: normal;
+  font-weight: 700;
+  font-size: 16px;
+  line-height: 21px;
+`;

src/components/Header/DrawerContainer/DrawerContainer.js

@@ -10,7 +10,8 @@ import { useImperativeHandle } from "react";
 const DrawerContainer = forwardRef((props, ref) => {
   const [openDrawer, setOpenDrawer] = useState(false);
   const { isMobile } = useIsMobile();
-
+  console.log("openDrawer", openDrawer)
+  console.log("isMobile", isMobile)
   useImperativeHandle(ref, () => ({
     handleToggleDrawer,
   }));

src/components/MarketPlace/Header/Header.js

@@ -105,7 +105,7 @@ const Header = (props) => {
 
   const handleChangeSelect = (event) => {
     console.log(sorting);
-    if (!props.users) sorting?.changeSorting(event.target.value);
+    sorting?.changeSorting(event.target.value);
   };
   const handleClickCategory = () => {
     props?.offers?.filters?.locations.clear();

src/components/MarketPlace/MarketPlace.js

@@ -7,7 +7,7 @@ import Offers from "./Offers/Offers";
 const MarketPlace = (props) => {
   const [isGrid, setIsGrid] = useState(false);
   const offers = props.offers;
-
+  console.log("MARKETPLACE")
   return (
     <MarketPlaceContainer>
       <Header

src/components/Paging/Paging.js

@@ -33,36 +33,40 @@ const Paging = (props) => {
         <ArrowIcon side="left" />
       </Arrow>
 
-      {threeDotsBefore && (
-        <React.Fragment>
-          <PageNumber onClick={() => props.changePage(1)}>1</PageNumber>
-          {props.current - 3 !== 1 && <ThreeDots>...</ThreeDots>}
-        </React.Fragment>
-      )}
-
-      {/* Pages */}
-      {pagesAsArray.map((item, index) => {
-        const pageNum = props.current - 2 + moving++;
-        if (pageNum > pages) return;
-        if (pageNum < 1) return;
-        return (
-          <PageNumber
-            current={pageNum === props.current}
-            key={index}
-            onClick={() => props.changePage(pageNum)}
-          >
-            {pageNum}
-          </PageNumber>
-        );
-      })}
-
-      {threeDotsAfter && (
-        <React.Fragment>
-          {props.current + 3 !== pages && <ThreeDots>...</ThreeDots>}
-          <PageNumber onClick={() => props.changePage(pages)}>
-            {pages}
-          </PageNumber>
-        </React.Fragment>
+      {props.customPaging ? (
+        props.children
+      ) : (
+        <>
+          {threeDotsBefore && (
+            <React.Fragment>
+              <PageNumber onClick={() => props.changePage(1)}>1</PageNumber>
+              {props.current - 3 !== 1 && <ThreeDots>...</ThreeDots>}
+            </React.Fragment>
+          )}
+          {/* Pages */}
+          {pagesAsArray.map((item, index) => {
+            const pageNum = props.current - 2 + moving++;
+            if (pageNum > pages) return;
+            if (pageNum < 1) return;
+            return (
+              <PageNumber
+                current={pageNum === props.current}
+                key={index}
+                onClick={() => props.changePage(pageNum)}
+              >
+                {pageNum}
+              </PageNumber>
+            );
+          })}
+          {threeDotsAfter && (
+            <React.Fragment>
+              {props.current + 3 !== pages && <ThreeDots>...</ThreeDots>}
+              <PageNumber onClick={() => props.changePage(pages)}>
+                {pages}
+              </PageNumber>
+            </React.Fragment>
+          )}{" "}
+        </>
       )}
 
       {/* Right arrow */}
@@ -83,6 +87,10 @@ Paging.propTypes = {
   pages: PropTypes.number,
   current: PropTypes.number,
   changePage: PropTypes.func,
+  customPaging: PropTypes.bool,
+};
+Paging.defaultProps = {
+  elementsPerPage: 10,
 };
 
 export default Paging;

src/components/Styles/globalStyleComponents.js

@@ -1,6 +1,7 @@
 import { Box } from "@mui/material";
-import styled, { keyframes } from "styled-components";
+import styled, { css, keyframes } from "styled-components";
 import selectedTheme from "../../themes";
+import { PrimaryButton } from "../Buttons/PrimaryButton/PrimaryButton";
 
 const SkeletonBackgroundAnimation = keyframes`
   0% {
@@ -34,7 +35,7 @@ export const ButtonLoadingAnimation = keyframes`
   100% {
     background-color: ${selectedTheme.colors.primaryPurple};
   }
-`
+`;
 export const ButtonLoadingEllipseAnimation = keyframes`
   0% {
     left: -24px;
@@ -45,7 +46,7 @@ export const ButtonLoadingEllipseAnimation = keyframes`
   100% {
     left: -48px;
   }
-`
+`;
 
 export const BackgroundTransition = styled(Box)`
   border-radius: 4px;
@@ -56,3 +57,52 @@ export const ItemsTransition = styled(Box)`
   border-radius: 4px;
   animation: ${SkeletonItemAnimation} 1.6s infinite;
 `;
+export const transitionOnLoadFromLeft = keyframes`
+  0% {
+    transform: translateX(-100%);
+  }
+  100% {
+    transform: translateX(0);
+  }
+`;
+export const transitionOnLoadFromRight = keyframes`
+  0% {
+    transform: translateX(100%);
+  }
+  100% {
+    transform: translateX(0);
+  }
+`;
+export const PrimaryAnimatedButton = styled(PrimaryButton)`
+  ${(props) =>
+    props.isLoading &&
+    css`
+      cursor: default;
+    `}
+  & button {
+    position: relative;
+    /* background-color: green !important; */
+    animation: ${(props) =>
+      props.isLoading
+        ? css`
+            ${ButtonLoadingAnimation} 2.2s infinite;
+          `
+        : ""};
+    /* animation: ${ButtonLoadingAnimation} 2s infinite; */
+  }
+  ${(props) =>
+    props.isLoading &&
+    css`
+      & button::after {
+        content: "";
+        width: 47px;
+        height: 96px;
+        background-color: green;
+        position: absolute;
+        top: -24px;
+        background-color: ${selectedTheme.colors.borderSponsoredColor};
+        filter: blur(45px);
+        animation: ${ButtonLoadingEllipseAnimation} 2.2s infinite;
+      }
+    `}
+`;

src/enums/sortEnum.js

@@ -55,4 +55,21 @@ export const sortCategoriesEnum = {
         mainText: "Najstarije dodate",
         queryString: "oldest"
     }
+}
+export const sortUsersEnum = {
+    INITIAL: {
+        value: 0,
+        mainText: "Sortiraj po",
+        queryString: ""
+    },
+    NEW: {
+        value: 1,
+        mainText: "Najskorije registrovan",
+        queryString: "newest"
+    },
+    OLD: {
+        value: 2,
+        mainText: "Najstarije registrovan",
+        queryString: "oldest"
+    }
 }

src/hooks/useOffers/useOffers.js

@@ -52,7 +52,7 @@ const useOffers = () => {
   }, []);
 
   useEffect(() => {
-    if (!queryStringHook.historyStateCleared) {
+    if (!queryStringHook.historyStateCleared && history.location.state) {
       clearFiltersAndApply();
       dispatch(setHeaderString(makeHeaderStringHelper({})));
       history.location.state = {};
@@ -138,10 +138,23 @@ const useOffers = () => {
     console.log("applyfilters");
     setFiltersCleared(true);
   };
+  // const applySorting = () => {
+  //   filters.apply();
+  //   console.log("ovde");
+  //   const newQueryString = makeQueryStringHelper(
+  //     filters,
+  //     paging,
+  //     search,
+  //     sorting
+  //   );
+  //   paging.changePage(1);
+  //   newQueryString.set(KEY_PAGE, 1);
+  //   dispatch(setQueryString(convertQueryStringForBackend(newQueryString)));
+  // };
 
   const clearFiltersAndApply = () => {
     clear();
-    console.log('clearfiltersandapply filterscleared')
+    console.log("clearfiltersandapply filterscleared");
     setFiltersCleared(true);
   };
 
@@ -161,7 +174,7 @@ const useOffers = () => {
   const clearOnlyFiltersAndApply = () => {
     filters.clear();
     paging.changePage(1);
-    console.log('clearonlyfiltersandapply filterscleared')
+    console.log("clearonlyfiltersandapply filterscleared");
 
     setFiltersCleared(true);
   };

src/layouts/AdminLayout/AdminLayout.js

@@ -8,10 +8,10 @@ const AdminLayout = (props) => {
     <AdminLayoutContainer className={props.className}>
       {props.children}
       <Grid container maxHeight="xl">
-        <LeftCard item xs={0} sm={3} md={3} lg={3} xl={2.4}>
+        <LeftCard item xs={0} sm={0} md={3} lg={4} xl={3}>
           {props.leftCard}
         </LeftCard>
-        <Content item xs={12} sm={9} md={9} lg={9} xl={9.6}>
+        <Content item xs={12} sm={12} md={9} lg={8} xl={9}>
           {props.content}
         </Content>
       </Grid>

src/layouts/ChatGridLayout/ChatGridLayout.styled.js

@@ -1,9 +1,9 @@
-import { Grid } from "@mui/material";
-import { Container } from "@mui/system";
+import { Box, Grid } from "@mui/material";
+// import { Container } from "@mui/system";
 import styled from "styled-components";
 
 
-export const ChatGridLayoutContainer = styled(Container)`
+export const ChatGridLayoutContainer = styled(Box)`
     margin-top: 120px;
     margin-left: 0;
     margin-right: 0;

src/layouts/ChatLayout/ChatLayout.styled.js

@@ -1,9 +1,8 @@
-import { Grid } from "@mui/material";
-import { Container } from "@mui/system";
+import { Box, Grid } from "@mui/material";
 import styled from "styled-components";
 
 
-export const ChatLayoutContainer = styled(Container)`
+export const ChatLayoutContainer = styled(Box)`
 `;
 
 export const ChatContent = styled(Grid)`

src/pages/AdminHomePage/AdminUsersPage/AdminUsersPage.js

@@ -1,7 +1,10 @@
 import React, { useEffect, useMemo } from "react";
 import PropTypes from "prop-types";
 import { useDispatch, useSelector } from "react-redux";
-import { selectAllProfiles } from "../../../store/selectors/profileSelectors";
+import {
+  selectAllProfiles,
+  selectTotalProfiles,
+} from "../../../store/selectors/profileSelectors";
 import { fetchAllProfilesAsAdmin } from "../../../store/actions/profile/profileActions";
 import {
   AdminUsersHeader,
@@ -11,20 +14,43 @@ import {
 } from "./AdminUsersPage.styled";
 import BigProfileCard from "../../../components/Cards/ProfileCard/BigProfileCard/BigProfileCard";
 import { useTranslation } from "react-i18next";
+import usePaging from "../../../hooks/useOffers/usePaging";
+import { useState } from "react";
+import Paging from "../../../components/Paging/Paging";
+import useSorting from "../../../hooks/useOffers/useSorting";
+import { sortUsersEnum } from "../../../enums/sortEnum";
 
 const AdminUsersPage = () => {
   const dispatch = useDispatch();
+  const [searchValue, setSearchValue] = useState("");
   const { t } = useTranslation();
+  const paging = usePaging();
+  const sorting = useSorting(() => {}, sortUsersEnum);
   const allUsers = useSelector(selectAllProfiles);
+  const totalUsers = useSelector(selectTotalProfiles);
   const allUsersToShow = useMemo(
     () => (Array.isArray(allUsers) ? allUsers : []),
     [allUsers]
   );
   useEffect(() => {
-    dispatch(fetchAllProfilesAsAdmin());
-  }, []);
+    dispatch(
+      fetchAllProfilesAsAdmin({
+        currentPage: paging.currentPage,
+        searchValue: searchValue,
+        sortOption: sorting.selectedSortOptionLocally
+      })
+    );
+  }, [paging.currentPage, searchValue, sorting.selectedSortOptionLocally]);
+
+  const handleChangePage = (newPage) => {
+    paging.changePage(newPage);
+  };
 
-  const handleSearch = () => {};
+  const handleSearch = (data) => {
+    console.log(data);
+    paging.changePage(1);
+    setSearchValue(data);
+  };
 
   return (
     <AdminUsersPageContainer>
@@ -36,18 +62,23 @@ const AdminUsersPage = () => {
         />
         <AdminUsersHeader
           myOffers
-          hideSorting
           category
           hideGrid
           isAdmin
           users
           hideBackButton
+          sorting={sorting}
         />
         <AdminUsersList>
           {allUsersToShow.map((singleUser) => (
             <BigProfileCard key={singleUser._id} profile={singleUser} />
           ))}
         </AdminUsersList>
+        <Paging
+          totalElements={totalUsers}
+          current={paging.currentPage}
+          changePage={handleChangePage}
+        />
       </>
     </AdminUsersPageContainer>
   );

src/pages/Chat/Chat.js

@@ -1,12 +1,25 @@
 import React from "react";
+import { useHistory } from "react-router-dom";
 import { ChatColumn } from "../../components/ChatColumn/ChatColumn";
+import { CHAT_MESSAGE_PAGE } from "../../constants/pages";
 import ChatLayout from "../../layouts/ChatLayout/ChatLayout";
+import { replaceInRoute } from "../../util/helpers/routeHelpers";
 import { ChatPageContainer } from "./Chat.styled";
 
 export const ChatPage = () => {
+  const history = useHistory();
+  const navigateToChat = (chatId) => {
+    setTimeout(() => {
+      history.push(
+        replaceInRoute(CHAT_MESSAGE_PAGE, {
+          idChat: chatId,
+        })
+      );
+    }, 120);
+  };
   return (
     <ChatPageContainer>
-      <ChatLayout content={<ChatColumn />} />
+      <ChatLayout content={<ChatColumn navigateToChat={navigateToChat} />} />
     </ChatPageContainer>
   );
 };

src/pages/Chat/Chat.styled.js

@@ -1,11 +1,11 @@
 import { Container } from "@mui/system";
 import styled from "styled-components";
-
-
+import { transitionOnLoadFromLeft } from "../../components/Styles/globalStyleComponents";
 
 export const ChatPageContainer = styled(Container)`
-      padding: 0;
+  padding: 0;
   margin: 0;
+  animation: 0.2s ease 0s 1 ${transitionOnLoadFromLeft};
   margin-top: 80px;
   height: 100%;
   width: 100%;
@@ -13,7 +13,9 @@ export const ChatPageContainer = styled(Container)`
   flex: 1;
   display: flex;
   flex-direction: column;
+  position: relative;
+  left: 0px;
   @media (max-width: 600px) {
     margin-top: 100px;
   }
-`;
+`;

src/pages/ChatMessages/ChatMessages.js

@@ -2,10 +2,32 @@ import React from "react";
 import DirectChat from "../../components/DirectChat/DirectChat";
 import MiniChatColumn from "../../components/DirectChat/MiniChatColumn/MiniChatColumn";
 import ChatGridLayout from "../../layouts/ChatGridLayout/ChatGridLayout";
-
+import { useSwipeable } from "react-swipeable";
+import {
+  ChatMessagesPageContainer,
+  SwiperContainer,
+} from "./ChatMessages.styled";
+import { useHistory } from "react-router-dom";
 export const ChatMessagesPage = () => {
+  const history = useHistory();
+  console.log("rerender");
+  const goBack = () => {
+    history.goBack();
+  };
+  const handlersBox = useSwipeable({
+    onSwipedRight: () => setTimeout(goBack, 0),
+    trackMouse: false,
+    // preventDefaultTouchmoveEvent: true
+  });
   return (
-    <ChatGridLayout content={<DirectChat />} leftCard={<MiniChatColumn />} />
+    <SwiperContainer {...handlersBox}>
+      <ChatMessagesPageContainer>
+        <ChatGridLayout
+          content={<DirectChat />}
+          leftCard={<MiniChatColumn />}
+        />
+      </ChatMessagesPageContainer>
+    </SwiperContainer>
   );
 };
 

src/pages/ChatMessages/ChatMessages.styled.js

@@ -1,17 +1,10 @@
 import { Container } from "@mui/system";
 import styled from "styled-components";
-
+import { transitionOnLoadFromRight } from "../../components/Styles/globalStyleComponents";
 
 export const ChatMessagesPageContainer = styled(Container)`
-  padding: 0;
-  margin: 0;
-  margin-top: 80px;
-  height: 100%;
-  width: 100%;
-  max-width: none;
-  flex: 1;
-  display: flex;
   @media (max-width: 600px) {
-    margin-top: 80px;
+    animation: 0.2s ease 0s 1 ${transitionOnLoadFromRight};
   }
-`;
+`;
+export const SwiperContainer = styled.div``;

src/pages/RegisterPages/Register/ThirdPart/ThirdPartOfRegistration.js

@@ -1,7 +1,6 @@
 import React, { useEffect } from "react";
 import PropTypes from "prop-types";
 import {
-  FinishRegistrationButton,
   FormContainer,
   RegisterDescription,
 } from "./ThirdPartOfRegistration.styled";
@@ -15,6 +14,7 @@ import { fetchLocations } from "../../../../store/actions/locations/locationsAct
 import thirdPartInitialValues from "../../../../initialValues/registerInitialValues/thirdPartInitialValues";
 import ErrorMessage from "./ErrorMessage/ErrorMessage";
 import thirdPartValidation from "../../../../validations/registerValidations/thirdPartValidation";
+import { PrimaryAnimatedButton } from "../../../../components/Styles/globalStyleComponents";
 
 const ThirdPartOfRegistration = (props) => {
   const { t } = useTranslation();
@@ -96,7 +96,7 @@ const ThirdPartOfRegistration = (props) => {
 
       <ErrorMessage formik={formik} />
 
-      <FinishRegistrationButton
+      <PrimaryAnimatedButton
         type="submit"
         variant="contained"
         height="48px"
@@ -105,7 +105,7 @@ const ThirdPartOfRegistration = (props) => {
         isLoading={props.isLoading}
       >
         {t("common.continue")}
-      </FinishRegistrationButton>
+      </PrimaryAnimatedButton>
     </FormContainer>
   );
 };

src/pages/RegisterPages/Register/ThirdPart/ThirdPartOfRegistration.styled.js

@@ -1,10 +1,5 @@
 import { Typography } from "@mui/material";
-import styled, { css } from "styled-components";
-import { PrimaryButton } from "../../../../components/Buttons/PrimaryButton/PrimaryButton";
-import {
-  ButtonLoadingAnimation,
-  ButtonLoadingEllipseAnimation,
-} from "../../../../components/Styles/globalStyleComponents";
+import styled from "styled-components";
 import selectedTheme from "../../../../themes";
 
 export const FormContainer = styled.form`
@@ -28,32 +23,4 @@ export const RegisterDescription = styled(Typography)`
     margin-top: 14px;
   }
 `;
-export const FinishRegistrationButton = styled(PrimaryButton)`
-  ${props => props.isLoading && css`
-    cursor: default;
-  `}
-  & button {
-    position: relative;
-    /* background-color: green !important; */
-    animation: ${(props) =>
-      props.isLoading
-        ? css`
-            ${ButtonLoadingAnimation} 2.2s infinite;
-          `
-        : ""};
-    /* animation: ${ButtonLoadingAnimation} 2s infinite; */
-  }
-  ${props => props.isLoading && css`
-  & button::after {
-    content: "";
-    width: 47px;
-    height: 96px;
-    background-color: green;
-    position: absolute;
-    top: -24px;
-    background-color: ${selectedTheme.colors.borderSponsoredColor};
-    filter: blur(45px);
-    animation: ${ButtonLoadingEllipseAnimation} 2.2s infinite;
-  }
-  `}
-`;
+

src/request/chatRequest.js

@@ -3,7 +3,9 @@ import apiEndpoints from "./apiEndpoints";
 
 export const attemptFetchChats = (payload) => {
   return getRequest(
-    replaceInUrl(apiEndpoints.chat.getUserChats, { userId: payload })
+    replaceInUrl(apiEndpoints.chat.getUserChats + "?" + payload.queryString, {
+      userId: payload.userId,
+    })
   );
 };
 export const attemptFetchHeaderChats = (payload) => {

src/request/profileRequest.js

@@ -12,8 +12,8 @@ export const attemptFetchProfile = (payload) =>
 
 export const attemptFetchAllProfiles = () =>
   getRequest(apiEndpoints.users.getAllProfiles);
-export const attemptFetchAllProfilesAsAdmin = () =>
-  getRequest(apiEndpoints.users.getAllProfilesAsAdmin);
+export const attemptFetchAllProfilesAsAdmin = (payload) =>
+  getRequest(apiEndpoints.users.getAllProfilesAsAdmin + "?" + payload);
 
 export const attemptEditProfile = (payload, requestData) =>
   putRequest(apiEndpoints.users.editProfile + "/" + payload, requestData);

src/socket/socket.js

@@ -1,8 +1,8 @@
 import io from "socket.io-client";
 
-// export const socket = io("https://trampa-api-test.dilig.net/", {
+export const socket = io("https://trampa-api-test.dilig.net/", {
 // export const socket = io("http://localhost:3001/", {
-export const socket = io(process.env.REACT_APP_BASE_API_URL, {
+// export const socket = io(process.env.REACT_APP_BASE_API_URL, {
   transports: ["websocket"],
   reconnectionAttempts: 5,
 });

src/store/actions/profile/profileActionConstants.js

@@ -30,12 +30,12 @@ export const PROFILE_SET = createSetType("PROFILE_SET");
 export const PROFILE_MINE_SET = createSetType("PROFILE_MINE_SET");
 export const PROFILE_ALL_SET = createSetType("PROFILE_ALL_SET");
 
-const PROFILE_EDIT_SCOPE = "PROFILE_EDIT_SCOPE";
+export const PROFILE_EDIT_SCOPE = "PROFILE_EDIT_SCOPE";
 export const PROFILE_EDIT = createFetchType(PROFILE_EDIT_SCOPE);
 export const PROFILE_EDIT_SUCCESS = createSuccessType(PROFILE_EDIT_SCOPE);
 export const PROFILE_EDIT_ERROR = createErrorType(PROFILE_EDIT_SCOPE);
 
-const PROFILE_EDIT_ADMIN_SCOPE = "PROFILE_EDIT_ADMIN_SCOPE";
+export const PROFILE_EDIT_ADMIN_SCOPE = "PROFILE_EDIT_ADMIN_SCOPE";
 export const PROFILE_EDIT_ADMIN = createFetchType(PROFILE_EDIT_ADMIN_SCOPE);
 export const PROFILE_EDIT_ADMIN_SUCCESS = createSuccessType(PROFILE_EDIT_ADMIN_SCOPE);
 export const PROFILE_EDIT_ADMIN_ERROR = createErrorType(PROFILE_EDIT_ADMIN_SCOPE);

src/store/saga/chatSaga.js

@@ -33,11 +33,18 @@ import { selectSelectedChat } from "../selectors/chatSelectors";
 import { selectExchange } from "../selectors/exchangeSelector";
 import { selectUserId } from "../selectors/loginSelectors";
 import { sendMessage as SendMessageSocket } from "../../socket/socket";
+import { KEY_PAGE, KEY_SIZE } from "../../constants/queryStringConstants";
 
-function* fetchChats() {
+function* fetchChats({ payload }) {
   try {
     const userId = yield select(selectUserId);
-    const data = yield call(attemptFetchChats, userId);
+    const queryObject = new URLSearchParams();
+    queryObject.set(KEY_SIZE, "6");
+    queryObject.set(KEY_PAGE, payload.currentPage);
+    const data = yield call(attemptFetchChats, {
+      userId,
+      queryString: queryObject.toString(),
+    });
     yield call(console.dir, data);
     yield put(setChats([...data.data]));
     yield put(fetchChatsSuccess());

src/store/saga/profileSaga.js

@@ -1,4 +1,11 @@
 import { all, call, put, takeLatest, select } from "@redux-saga/core/effects";
+import {
+  KEY_NAME,
+  KEY_PAGE,
+  KEY_SIZE,
+  KEY_SORT_DATE,
+} from "../../constants/queryStringConstants";
+import { sortUsersEnum } from "../../enums/sortEnum";
 import {
   attemptEditProfile,
   attemptEditProfileAsAdmin,
@@ -67,10 +74,24 @@ function* fetchAllProfiles() {
   }
 }
 
-function* fetchAllProfilesAsAdmin() {
+function* fetchAllProfilesAsAdmin({ payload }) {
   try {
-    const data = yield call(attemptFetchAllProfilesAsAdmin);
-    if (data) yield put(setAllProfiles(data.data.users));
+    yield call(console.log, payload);
+    const queryObject = new URLSearchParams();
+    queryObject.set(KEY_SIZE, "10");
+    if (payload?.searchValue && payload?.searchValue?.length !== 0)
+      queryObject.set(KEY_NAME, payload.searchValue);
+    if (payload?.sortOption?.value === sortUsersEnum.OLD.value)
+      queryObject.set(KEY_SORT_DATE, "false");
+    if (payload?.sortOption?.value === sortUsersEnum.NEW.value)
+      queryObject.set(KEY_SORT_DATE, "true");
+
+    queryObject.set(KEY_PAGE, payload.currentPage);
+    const data = yield call(
+      attemptFetchAllProfilesAsAdmin,
+      queryObject.toString()
+    );
+    if (data) yield put(setAllProfiles(data.data));
     yield put(fetchAllProfilesAsAdminSuccess());
   } catch (e) {
     yield put(fetchAllProfilesAsAdminError());

src/store/selectors/profileSelectors.js

@@ -20,5 +20,9 @@ export const selectMineProfilePicture = createSelector(
 );
 export const selectAllProfiles = createSelector(
   profileSelector,
-  (state) => state.allProfiles
+  (state) => state.allProfiles?.users
 );
+export const selectTotalProfiles = createSelector(
+  profileSelector,
+  state => state.allProfiles?.total
+)

yarn.lock

@@ -2,12 +2,12 @@
 # yarn lockfile v1
 
 
-"@babel/code-frame@^7.0.0", "@babel/code-frame@^7.10.4", "@babel/code-frame@^7.12.13", "@babel/code-frame@^7.5.5":
-  "integrity" "sha512-HV1Cm0Q3ZrpCR93tkWOYiuYIgLxZXZFVG2VgK+MBWjUqZTundupbfx2aXarXuw5Ko5aMcjtJgbSs4vUGBS5v6g=="
-  "resolved" "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.12.13.tgz"
-  "version" "7.12.13"
+"@babel/code-frame@^7.0.0", "@babel/code-frame@^7.10.4", "@babel/code-frame@^7.12.13", "@babel/code-frame@^7.18.6", "@babel/code-frame@^7.5.5":
+  "integrity" "sha512-TDCmlK5eOvH+eH7cdAFlNXeVJqWIQ7gW9tY1GJIpUtFb6CmjVyq2VM3u71bOyR8CRihcCgMUYoDNyLXao3+70Q=="
+  "resolved" "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.18.6.tgz"
+  "version" "7.18.6"
   dependencies:
-    "@babel/highlight" "^7.12.13"
+    "@babel/highlight" "^7.18.6"
 
 "@babel/code-frame@7.10.4":
   "integrity" "sha512-vG6SvB6oYEhvgisZNFRmRCUkLz11c7rp+tbNTynGqc6mS1d5ATd/sGyV6W0KZZnXRKMTzZDRgQT3Ou9jhpAfUg=="
@@ -71,23 +71,16 @@
     "semver" "^5.4.1"
     "source-map" "^0.5.0"
 
-"@babel/generator@^7.12.1", "@babel/generator@^7.14.2", "@babel/generator@^7.14.3":
-  "integrity" "sha512-bn0S6flG/j0xtQdz3hsjJ624h3W0r3llttBMfyHX3YrZ/KtLYr15bjA0FXkgW7FpvrDuTuElXeVjiKlYRpnOFA=="
-  "resolved" "https://registry.npmjs.org/@babel/generator/-/generator-7.14.3.tgz"
-  "version" "7.14.3"
+"@babel/generator@^7.12.1", "@babel/generator@^7.14.3", "@babel/generator@^7.19.4":
+  "integrity" "sha512-DxbNz9Lz4aMZ99qPpO1raTbcrI1ZeYh+9NR9qhfkQIbFtVEqotHojEBxHzmxhVONkGt6VyrqVQcgpefMy9pqcg=="
+  "resolved" "https://registry.npmjs.org/@babel/generator/-/generator-7.19.5.tgz"
+  "version" "7.19.5"
   dependencies:
-    "@babel/types" "^7.14.2"
+    "@babel/types" "^7.19.4"
+    "@jridgewell/gen-mapping" "^0.3.2"
     "jsesc" "^2.5.1"
-    "source-map" "^0.5.0"
 
-"@babel/helper-annotate-as-pure@^7.10.4", "@babel/helper-annotate-as-pure@^7.12.13":
-  "integrity" "sha512-7YXfX5wQ5aYM/BOlbSccHDbuXXFPxeoUmfWtz8le2yTkTZc+BxsiEnENFoi2SlmA8ewDkG2LgIMIVzzn2h8kfw=="
-  "resolved" "https://registry.npmjs.org/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.12.13.tgz"
-  "version" "7.12.13"
-  dependencies:
-    "@babel/types" "^7.12.13"
-
-"@babel/helper-annotate-as-pure@^7.16.0":
+"@babel/helper-annotate-as-pure@^7.10.4", "@babel/helper-annotate-as-pure@^7.12.13", "@babel/helper-annotate-as-pure@^7.16.0", "@babel/helper-annotate-as-pure@^7.18.6":
   "integrity" "sha512-duORpUiYrEpzKIop6iNbjnwKLAKnJ47csTyRACyEmWj0QdUrm5aqNJGHSSEQSUAvNW0ojX0dOmK9dZduvkfeXA=="
   "resolved" "https://registry.npmjs.org/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.18.6.tgz"
   "version" "7.18.6"
@@ -112,17 +105,18 @@
     "browserslist" "^4.16.6"
     "semver" "^6.3.0"
 
-"@babel/helper-create-class-features-plugin@^7.12.1", "@babel/helper-create-class-features-plugin@^7.13.0", "@babel/helper-create-class-features-plugin@^7.14.0", "@babel/helper-create-class-features-plugin@^7.14.3", "@babel/helper-create-class-features-plugin@^7.14.4":
-  "integrity" "sha512-idr3pthFlDCpV+p/rMgGLGYIVtazeatrSOQk8YzO2pAepIjQhCN3myeihVg58ax2bbbGK9PUE1reFi7axOYIOw=="
-  "resolved" "https://registry.npmjs.org/@babel/helper-create-class-features-plugin/-/helper-create-class-features-plugin-7.14.4.tgz"
-  "version" "7.14.4"
+"@babel/helper-create-class-features-plugin@^7.12.1", "@babel/helper-create-class-features-plugin@^7.13.0", "@babel/helper-create-class-features-plugin@^7.14.0", "@babel/helper-create-class-features-plugin@^7.14.3", "@babel/helper-create-class-features-plugin@^7.19.0":
+  "integrity" "sha512-NRz8DwF4jT3UfrmUoZjd0Uph9HQnP30t7Ash+weACcyNkiYTywpIjDBgReJMKgr+n86sn2nPVVmJ28Dm053Kqw=="
+  "resolved" "https://registry.npmjs.org/@babel/helper-create-class-features-plugin/-/helper-create-class-features-plugin-7.19.0.tgz"
+  "version" "7.19.0"
   dependencies:
-    "@babel/helper-annotate-as-pure" "^7.12.13"
-    "@babel/helper-function-name" "^7.14.2"
-    "@babel/helper-member-expression-to-functions" "^7.13.12"
-    "@babel/helper-optimise-call-expression" "^7.12.13"
-    "@babel/helper-replace-supers" "^7.14.4"
-    "@babel/helper-split-export-declaration" "^7.12.13"
+    "@babel/helper-annotate-as-pure" "^7.18.6"
+    "@babel/helper-environment-visitor" "^7.18.9"
+    "@babel/helper-function-name" "^7.19.0"
+    "@babel/helper-member-expression-to-functions" "^7.18.9"
+    "@babel/helper-optimise-call-expression" "^7.18.6"
+    "@babel/helper-replace-supers" "^7.18.9"
+    "@babel/helper-split-export-declaration" "^7.18.6"
 
 "@babel/helper-create-regexp-features-plugin@^7.12.13":
   "integrity" "sha512-JIB2+XJrb7v3zceV2XzDhGIB902CmKGSpSl4q2C6agU9SNLG/2V1RtFRGPG1Ajh9STj3+q6zJMOC+N/pp2P9DA=="
@@ -146,6 +140,11 @@
     "resolve" "^1.14.2"
     "semver" "^6.1.2"
 
+"@babel/helper-environment-visitor@^7.18.9":
+  "integrity" "sha512-3r/aACDJ3fhQ/EVgFy0hpj8oHyHpQc+LPtJoY9SzTThAsStm4Ptegq92vqKoE3vD706ZVFWITnMnxucw+S9Ipg=="
+  "resolved" "https://registry.npmjs.org/@babel/helper-environment-visitor/-/helper-environment-visitor-7.18.9.tgz"
+  "version" "7.18.9"
+
 "@babel/helper-explode-assignable-expression@^7.12.13":
   "integrity" "sha512-qS0peLTDP8kOisG1blKbaoBg/o9OSa1qoumMjTK5pM+KDTtpxpsiubnCGP34vK8BXGcb2M9eigwgvoJryrzwWA=="
   "resolved" "https://registry.npmjs.org/@babel/helper-explode-assignable-expression/-/helper-explode-assignable-expression-7.13.0.tgz"
@@ -153,36 +152,27 @@
   dependencies:
     "@babel/types" "^7.13.0"
 
-"@babel/helper-function-name@^7.12.13", "@babel/helper-function-name@^7.14.2":
-  "integrity" "sha512-NYZlkZRydxw+YT56IlhIcS8PAhb+FEUiOzuhFTfqDyPmzAhRge6ua0dQYT/Uh0t/EDHq05/i+e5M2d4XvjgarQ=="
-  "resolved" "https://registry.npmjs.org/@babel/helper-function-name/-/helper-function-name-7.14.2.tgz"
-  "version" "7.14.2"
-  dependencies:
-    "@babel/helper-get-function-arity" "^7.12.13"
-    "@babel/template" "^7.12.13"
-    "@babel/types" "^7.14.2"
-
-"@babel/helper-get-function-arity@^7.12.13":
-  "integrity" "sha512-DjEVzQNz5LICkzN0REdpD5prGoidvbdYk1BVgRUOINaWJP2t6avB27X1guXK1kXNrX0WMfsrm1A/ZBthYuIMQg=="
-  "resolved" "https://registry.npmjs.org/@babel/helper-get-function-arity/-/helper-get-function-arity-7.12.13.tgz"
-  "version" "7.12.13"
+"@babel/helper-function-name@^7.12.13", "@babel/helper-function-name@^7.14.2", "@babel/helper-function-name@^7.19.0":
+  "integrity" "sha512-WAwHBINyrpqywkUH0nTnNgI5ina5TFn85HKS0pbPDfxFfhyR/aNQEn4hGi1P1JyT//I0t4OgXUlofzWILRvS5w=="
+  "resolved" "https://registry.npmjs.org/@babel/helper-function-name/-/helper-function-name-7.19.0.tgz"
+  "version" "7.19.0"
   dependencies:
-    "@babel/types" "^7.12.13"
+    "@babel/template" "^7.18.10"
+    "@babel/types" "^7.19.0"
 
-"@babel/helper-hoist-variables@^7.13.0":
-  "integrity" "sha512-1eMtTrXtrwscjcAeO4BVK+vvkxaLJSPFz1w1KLawz6HLNi9bPFGBNwwDyVfiu1Tv/vRRFYfoGaKhmAQPGPn5Wg=="
-  "resolved" "https://registry.npmjs.org/@babel/helper-hoist-variables/-/helper-hoist-variables-7.13.16.tgz"
-  "version" "7.13.16"
+"@babel/helper-hoist-variables@^7.13.0", "@babel/helper-hoist-variables@^7.18.6":
+  "integrity" "sha512-UlJQPkFqFULIcyW5sbzgbkxn2FKRgwWiRexcuaR8RNJRy8+LLveqPjwZV/bwrLZCN0eUHD/x8D0heK1ozuoo6Q=="
+  "resolved" "https://registry.npmjs.org/@babel/helper-hoist-variables/-/helper-hoist-variables-7.18.6.tgz"
+  "version" "7.18.6"
   dependencies:
-    "@babel/traverse" "^7.13.15"
-    "@babel/types" "^7.13.16"
+    "@babel/types" "^7.18.6"
 
-"@babel/helper-member-expression-to-functions@^7.13.12":
-  "integrity" "sha512-48ql1CLL59aKbU94Y88Xgb2VFy7a95ykGRbJJaaVv+LX5U8wFpLfiGXJJGUozsmA1oEh/o5Bp60Voq7ACyA/Sw=="
-  "resolved" "https://registry.npmjs.org/@babel/helper-member-expression-to-functions/-/helper-member-expression-to-functions-7.13.12.tgz"
-  "version" "7.13.12"
+"@babel/helper-member-expression-to-functions@^7.18.9":
+  "integrity" "sha512-RxifAh2ZoVU67PyKIO4AMi1wTenGfMR/O/ae0CCRqwgBAt5v7xjdtRw7UoSbsreKrQn5t7r89eruK/9JjYHuDg=="
+  "resolved" "https://registry.npmjs.org/@babel/helper-member-expression-to-functions/-/helper-member-expression-to-functions-7.18.9.tgz"
+  "version" "7.18.9"
   dependencies:
-    "@babel/types" "^7.13.12"
+    "@babel/types" "^7.18.9"
 
 "@babel/helper-module-imports@^7.0.0", "@babel/helper-module-imports@^7.12.1", "@babel/helper-module-imports@^7.12.13", "@babel/helper-module-imports@^7.13.12":
   "integrity" "sha512-4cVvR2/1B693IuOvSI20xqqa/+bl7lqAMR59R4iu39R9aOX8/JoYY1sFaNvUMyMBGnHdwvJgUrzNLoUZxXypxA=="
@@ -212,17 +202,17 @@
     "@babel/traverse" "^7.14.2"
     "@babel/types" "^7.14.2"
 
-"@babel/helper-optimise-call-expression@^7.12.13":
-  "integrity" "sha512-BdWQhoVJkp6nVjB7nkFWcn43dkprYauqtk++Py2eaf/GRDFm5BxRqEIZCiHlZUGAVmtwKcsVL1dC68WmzeFmiA=="
-  "resolved" "https://registry.npmjs.org/@babel/helper-optimise-call-expression/-/helper-optimise-call-expression-7.12.13.tgz"
-  "version" "7.12.13"
+"@babel/helper-optimise-call-expression@^7.12.13", "@babel/helper-optimise-call-expression@^7.18.6":
+  "integrity" "sha512-HP59oD9/fEHQkdcbgFCnbmgH5vIQTJbxh2yf+CdM89/glUNnuzr87Q8GIjGEnOktTROemO0Pe0iPAYbqZuOUiA=="
+  "resolved" "https://registry.npmjs.org/@babel/helper-optimise-call-expression/-/helper-optimise-call-expression-7.18.6.tgz"
+  "version" "7.18.6"
   dependencies:
-    "@babel/types" "^7.12.13"
+    "@babel/types" "^7.18.6"
 
-"@babel/helper-plugin-utils@^7.0.0", "@babel/helper-plugin-utils@^7.10.4", "@babel/helper-plugin-utils@^7.12.13", "@babel/helper-plugin-utils@^7.13.0", "@babel/helper-plugin-utils@^7.8.0", "@babel/helper-plugin-utils@^7.8.3":
-  "integrity" "sha512-ZPafIPSwzUlAoWT8DKs1W2VyF2gOWthGd5NGFMsBcMMol+ZhK+EQY/e6V96poa6PA/Bh+C9plWN0hXO1uB8AfQ=="
-  "resolved" "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.13.0.tgz"
-  "version" "7.13.0"
+"@babel/helper-plugin-utils@^7.0.0", "@babel/helper-plugin-utils@^7.10.4", "@babel/helper-plugin-utils@^7.12.13", "@babel/helper-plugin-utils@^7.13.0", "@babel/helper-plugin-utils@^7.18.6", "@babel/helper-plugin-utils@^7.19.0", "@babel/helper-plugin-utils@^7.8.0", "@babel/helper-plugin-utils@^7.8.3":
+  "integrity" "sha512-40Ryx7I8mT+0gaNxm8JGTZFUITNqdLAgdg0hXzeVZxVD6nFsdhQvip6v8dqkRHzsz1VFpFAaOCHNn0vKBL7Czw=="
+  "resolved" "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.19.0.tgz"
+  "version" "7.19.0"
 
 "@babel/helper-remap-async-to-generator@^7.13.0":
   "integrity" "sha512-pUQpFBE9JvC9lrQbpX0TmeNIy5s7GnZjna2lhhcHC7DzgBs6fWn722Y5cfwgrtrqc7NAJwMvOa0mKhq6XaE4jg=="
@@ -233,15 +223,16 @@
     "@babel/helper-wrap-function" "^7.13.0"
     "@babel/types" "^7.13.0"
 
-"@babel/helper-replace-supers@^7.12.13", "@babel/helper-replace-supers@^7.13.12", "@babel/helper-replace-supers@^7.14.4":
-  "integrity" "sha512-zZ7uHCWlxfEAAOVDYQpEf/uyi1dmeC7fX4nCf2iz9drnCwi1zvwXL3HwWWNXUQEJ1k23yVn3VbddiI9iJEXaTQ=="
-  "resolved" "https://registry.npmjs.org/@babel/helper-replace-supers/-/helper-replace-supers-7.14.4.tgz"
-  "version" "7.14.4"
+"@babel/helper-replace-supers@^7.12.13", "@babel/helper-replace-supers@^7.13.12", "@babel/helper-replace-supers@^7.14.4", "@babel/helper-replace-supers@^7.18.9":
+  "integrity" "sha512-T7ahH7wV0Hfs46SFh5Jz3s0B6+o8g3c+7TMxu7xKfmHikg7EAZ3I2Qk9LFhjxXq8sL7UkP5JflezNwoZa8WvWw=="
+  "resolved" "https://registry.npmjs.org/@babel/helper-replace-supers/-/helper-replace-supers-7.19.1.tgz"
+  "version" "7.19.1"
   dependencies:
-    "@babel/helper-member-expression-to-functions" "^7.13.12"
-    "@babel/helper-optimise-call-expression" "^7.12.13"
-    "@babel/traverse" "^7.14.2"
-    "@babel/types" "^7.14.4"
+    "@babel/helper-environment-visitor" "^7.18.9"
+    "@babel/helper-member-expression-to-functions" "^7.18.9"
+    "@babel/helper-optimise-call-expression" "^7.18.6"
+    "@babel/traverse" "^7.19.1"
+    "@babel/types" "^7.19.0"
 
 "@babel/helper-simple-access@^7.13.12":
   "integrity" "sha512-7FEjbrx5SL9cWvXioDbnlYTppcZGuCY6ow3/D5vMggb2Ywgu4dMrpTJX0JdQAIcRRUElOIxF3yEooa9gUb9ZbA=="
@@ -257,27 +248,27 @@
   dependencies:
     "@babel/types" "^7.12.1"
 
-"@babel/helper-split-export-declaration@^7.12.13":
-  "integrity" "sha512-tCJDltF83htUtXx5NLcaDqRmknv652ZWCHyoTETf1CXYJdPC7nohZohjUgieXhv0hTJdRf2FjDueFehdNucpzg=="
-  "resolved" "https://registry.npmjs.org/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.12.13.tgz"
-  "version" "7.12.13"
+"@babel/helper-split-export-declaration@^7.12.13", "@babel/helper-split-export-declaration@^7.18.6":
+  "integrity" "sha512-bde1etTx6ZyTmobl9LLMMQsaizFVZrquTEHOqKeQESMKo4PlObf+8+JA25ZsIpZhT/WEd39+vOdLXAFG/nELpA=="
+  "resolved" "https://registry.npmjs.org/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.18.6.tgz"
+  "version" "7.18.6"
   dependencies:
-    "@babel/types" "^7.12.13"
+    "@babel/types" "^7.18.6"
 
-"@babel/helper-validator-identifier@^7.12.11", "@babel/helper-validator-identifier@^7.14.0":
-  "integrity" "sha512-V3ts7zMSu5lfiwWDVWzRDGIN+lnCEUdaXgtVHJgLb1rGaA6jMrtB9EmE7L18foXJIE8Un/A/h6NJfGQp/e1J4A=="
-  "resolved" "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.14.0.tgz"
-  "version" "7.14.0"
+"@babel/helper-string-parser@^7.19.4":
+  "integrity" "sha512-nHtDoQcuqFmwYNYPz3Rah5ph2p8PFeFCsZk9A/48dPc/rGocJ5J3hAAZ7pb76VWX3fZKu+uEr/FhH5jLx7umrw=="
+  "resolved" "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.19.4.tgz"
+  "version" "7.19.4"
 
-"@babel/helper-validator-identifier@^7.18.6":
-  "integrity" "sha512-MmetCkz9ej86nJQV+sFCxoGGrUbU3q02kgLciwkrt9QqEB7cP39oKEY0PakknEO0Gu20SskMRi+AYZ3b1TpN9g=="
-  "resolved" "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.18.6.tgz"
-  "version" "7.18.6"
+"@babel/helper-validator-identifier@^7.12.11", "@babel/helper-validator-identifier@^7.14.0", "@babel/helper-validator-identifier@^7.18.6", "@babel/helper-validator-identifier@^7.19.1":
+  "integrity" "sha512-awrNfaMtnHUr653GgGEs++LlAvW6w+DcPrOliSMXWCKo597CwL5Acf/wWdNkf/tfEQE3mjkeD1YOVZOUV/od1w=="
+  "resolved" "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.19.1.tgz"
+  "version" "7.19.1"
 
 "@babel/helper-validator-option@^7.12.1", "@babel/helper-validator-option@^7.12.17":
-  "integrity" "sha512-TopkMDmLzq8ngChwRlyjR6raKD6gMSae4JdYDB8bByKreQgG0RBTuKe9LRxW3wFtUnjxOPRKBDwEH6Mg5KeDfw=="
-  "resolved" "https://registry.npmjs.org/@babel/helper-validator-option/-/helper-validator-option-7.12.17.tgz"
-  "version" "7.12.17"
+  "integrity" "sha512-XO7gESt5ouv/LRJdrVjkShckw6STTaB7l9BrpBaAHDeF5YZT+01PCwmR0SJHnkW6i8OwW/EVWRShfi4j2x+KQw=="
+  "resolved" "https://registry.npmjs.org/@babel/helper-validator-option/-/helper-validator-option-7.18.6.tgz"
+  "version" "7.18.6"
 
 "@babel/helper-wrap-function@^7.13.0":
   "integrity" "sha512-1UX9F7K3BS42fI6qd2A4BjKzgGjToscyZTdp1DjknHLCIvpgne6918io+aL5LXFcER/8QWiwpoY902pVEqgTXA=="
@@ -298,19 +289,19 @@
     "@babel/traverse" "^7.14.0"
     "@babel/types" "^7.14.0"
 
-"@babel/highlight@^7.10.4", "@babel/highlight@^7.12.13":
-  "integrity" "sha512-YSCOwxvTYEIMSGaBQb5kDDsCopDdiUGsqpatp3fOlI4+2HQSkTmEVWnVuySdAC5EWCqSWWTv0ib63RjR7dTBdg=="
-  "resolved" "https://registry.npmjs.org/@babel/highlight/-/highlight-7.14.0.tgz"
-  "version" "7.14.0"
+"@babel/highlight@^7.10.4", "@babel/highlight@^7.18.6":
+  "integrity" "sha512-u7stbOuYjaPezCuLj29hNW1v64M2Md2qupEKP1fHc7WdOA3DgLh37suiSrZYY7haUB7iBeQZ9P1uiRF359do3g=="
+  "resolved" "https://registry.npmjs.org/@babel/highlight/-/highlight-7.18.6.tgz"
+  "version" "7.18.6"
   dependencies:
-    "@babel/helper-validator-identifier" "^7.14.0"
+    "@babel/helper-validator-identifier" "^7.18.6"
     "chalk" "^2.0.0"
     "js-tokens" "^4.0.0"
 
-"@babel/parser@^7.1.0", "@babel/parser@^7.12.13", "@babel/parser@^7.12.3", "@babel/parser@^7.14.2", "@babel/parser@^7.14.3", "@babel/parser@^7.7.0":
-  "integrity" "sha512-ArliyUsWDUqEGfWcmzpGUzNfLxTdTp6WU4IuP6QFSp9gGfWS6boxFCkJSJ/L4+RG8z/FnIU3WxCk6hPL9SSWeA=="
-  "resolved" "https://registry.npmjs.org/@babel/parser/-/parser-7.14.4.tgz"
-  "version" "7.14.4"
+"@babel/parser@^7.1.0", "@babel/parser@^7.12.3", "@babel/parser@^7.14.3", "@babel/parser@^7.18.10", "@babel/parser@^7.19.4", "@babel/parser@^7.7.0":
+  "integrity" "sha512-qpVT7gtuOLjWeDTKLkJ6sryqLliBaFpAtGeqw5cs5giLldvh+Ch0plqnUMKoVAUS6ZEueQQiZV+p5pxtPitEsA=="
+  "resolved" "https://registry.npmjs.org/@babel/parser/-/parser-7.19.4.tgz"
+  "version" "7.19.4"
 
 "@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining@^7.13.12":
   "integrity" "sha512-d0u3zWKcoZf379fOeJdr1a5WPDny4aOFZ6hlfKivgK0LY7ZxNfoaHL2fWwdGtHyVvra38FC+HVYkO+byfSA8AQ=="
@@ -541,11 +532,11 @@
     "@babel/helper-plugin-utils" "^7.8.3"
 
 "@babel/plugin-syntax-flow@^7.12.1":
-  "integrity" "sha512-J/RYxnlSLXZLVR7wTRsozxKT8qbsx1mNKJzXEEjQ0Kjx1ZACcyHgbanNWNCFtc36IzuWhYWPpvJFFoexoOWFmA=="
-  "resolved" "https://registry.npmjs.org/@babel/plugin-syntax-flow/-/plugin-syntax-flow-7.12.13.tgz"
-  "version" "7.12.13"
+  "integrity" "sha512-LUbR+KNTBWCUAqRG9ex5Gnzu2IOkt8jRJbHHXFT9q+L9zm7M/QQbEqXyw1n1pohYvOyWC8CjeyjrSaIwiYjK7A=="
+  "resolved" "https://registry.npmjs.org/@babel/plugin-syntax-flow/-/plugin-syntax-flow-7.18.6.tgz"
+  "version" "7.18.6"
   dependencies:
-    "@babel/helper-plugin-utils" "^7.12.13"
+    "@babel/helper-plugin-utils" "^7.18.6"
 
 "@babel/plugin-syntax-import-meta@^7.8.3":
   "integrity" "sha512-Yqfm+XDx0+Prh3VSeEQCPU81yC+JWZ2pDPFSS4ZdpfZhp4MkFMaDC1UqseovEKwSUpnIL7+vK+Clp7bfh0iD7g=="
@@ -624,12 +615,12 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.12.13"
 
-"@babel/plugin-syntax-typescript@^7.12.13":
-  "integrity" "sha512-cHP3u1JiUiG2LFDKbXnwVad81GvfyIOmCD6HIEId6ojrY0Drfy2q1jw7BwN7dE84+kTnBjLkXoL3IEy/3JPu2w=="
-  "resolved" "https://registry.npmjs.org/@babel/plugin-syntax-typescript/-/plugin-syntax-typescript-7.12.13.tgz"
-  "version" "7.12.13"
+"@babel/plugin-syntax-typescript@^7.18.6":
+  "integrity" "sha512-mAWAuq4rvOepWCBid55JuRNvpTNf2UGVgoz4JV0fXEKolsVZDzsa4NqCef758WZJj/GDu0gVGItjKFiClTAmZA=="
+  "resolved" "https://registry.npmjs.org/@babel/plugin-syntax-typescript/-/plugin-syntax-typescript-7.18.6.tgz"
+  "version" "7.18.6"
   dependencies:
-    "@babel/helper-plugin-utils" "^7.12.13"
+    "@babel/helper-plugin-utils" "^7.18.6"
 
 "@babel/plugin-transform-arrow-functions@^7.12.1", "@babel/plugin-transform-arrow-functions@^7.13.0":
   "integrity" "sha512-96lgJagobeVmazXFaDrbmCLQxBysKu7U6Do3mLsx27gf5Dk85ezysrs2BZUpXD703U/Su1xTBDxxar2oa4jAGg=="
@@ -944,13 +935,13 @@
     "@babel/helper-plugin-utils" "^7.12.13"
 
 "@babel/plugin-transform-typescript@^7.12.1":
-  "integrity" "sha512-WYdcGNEO7mCCZ2XzRlxwGj3PgeAr50ifkofOUC/+IN/GzKLB+biDPVBUAQN2C/dVZTvEXCp80kfQ1FFZPrwykQ=="
-  "resolved" "https://registry.npmjs.org/@babel/plugin-transform-typescript/-/plugin-transform-typescript-7.14.4.tgz"
-  "version" "7.14.4"
+  "integrity" "sha512-z6fnuK9ve9u/0X0rRvI9MY0xg+DOUaABDYOe+/SQTxtlptaBB/V9JIUxJn6xp3lMBeb9qe8xSFmHU35oZDXD+w=="
+  "resolved" "https://registry.npmjs.org/@babel/plugin-transform-typescript/-/plugin-transform-typescript-7.19.3.tgz"
+  "version" "7.19.3"
   dependencies:
-    "@babel/helper-create-class-features-plugin" "^7.14.4"
-    "@babel/helper-plugin-utils" "^7.13.0"
-    "@babel/plugin-syntax-typescript" "^7.12.13"
+    "@babel/helper-create-class-features-plugin" "^7.19.0"
+    "@babel/helper-plugin-utils" "^7.19.0"
+    "@babel/plugin-syntax-typescript" "^7.18.6"
 
 "@babel/plugin-transform-unicode-escapes@^7.12.1", "@babel/plugin-transform-unicode-escapes@^7.12.13":
   "integrity" "sha512-0bHEkdwJ/sN/ikBHfSmOXPypN/beiGqjo+o4/5K+vxEFNPRPdImhviPakMKG4x96l85emoa0Z6cDflsdBusZbw=="
@@ -1170,7 +1161,7 @@
     "core-js-pure" "^3.0.0"
     "regenerator-runtime" "^0.13.4"
 
-"@babel/runtime@^7.1.2", "@babel/runtime@^7.10.2", "@babel/runtime@^7.11.2", "@babel/runtime@^7.12.0", "@babel/runtime@^7.12.1", "@babel/runtime@^7.5.5", "@babel/runtime@^7.6.3", "@babel/runtime@^7.7.2", "@babel/runtime@^7.8.4", "@babel/runtime@^7.8.7", "@babel/runtime@^7.9.2", "@babel/runtime@7.12.1":
+"@babel/runtime@^7.1.2", "@babel/runtime@^7.10.2", "@babel/runtime@^7.11.2", "@babel/runtime@^7.12.0", "@babel/runtime@^7.12.1", "@babel/runtime@^7.3.1", "@babel/runtime@^7.5.5", "@babel/runtime@^7.6.3", "@babel/runtime@^7.7.2", "@babel/runtime@^7.8.4", "@babel/runtime@^7.8.7", "@babel/runtime@^7.9.2", "@babel/runtime@7.12.1":
   "integrity" "sha512-J5AIf3vPj3UwXaAzb5j1xM4WAQDX3EMgemF8rjCP3SoW09LfRKAXQKt6CoVYl230P6iWdRcBbnLDDdnqWxZSCA=="
   "resolved" "https://registry.npmjs.org/@babel/runtime/-/runtime-7.12.1.tgz"
   "version" "7.12.1"
@@ -1219,43 +1210,38 @@
   dependencies:
     "regenerator-runtime" "^0.13.4"
 
-"@babel/template@^7.10.4", "@babel/template@^7.12.13", "@babel/template@^7.3.3":
-  "integrity" "sha512-/7xxiGA57xMo/P2GVvdEumr8ONhFOhfgq2ihK3h1e6THqzTAkHbkXgB0xI9yeTfIUoH3+oAeHhqm/I43OTbbjA=="
-  "resolved" "https://registry.npmjs.org/@babel/template/-/template-7.12.13.tgz"
-  "version" "7.12.13"
-  dependencies:
-    "@babel/code-frame" "^7.12.13"
-    "@babel/parser" "^7.12.13"
-    "@babel/types" "^7.12.13"
-
-"@babel/traverse@^7.1.0", "@babel/traverse@^7.12.1", "@babel/traverse@^7.13.0", "@babel/traverse@^7.13.15", "@babel/traverse@^7.14.0", "@babel/traverse@^7.14.2", "@babel/traverse@^7.4.5", "@babel/traverse@^7.7.0":
-  "integrity" "sha512-TsdRgvBFHMyHOOzcP9S6QU0QQtjxlRpEYOy3mcCO5RgmC305ki42aSAmfZEMSSYBla2oZ9BMqYlncBaKmD/7iA=="
-  "resolved" "https://registry.npmjs.org/@babel/traverse/-/traverse-7.14.2.tgz"
-  "version" "7.14.2"
-  dependencies:
-    "@babel/code-frame" "^7.12.13"
-    "@babel/generator" "^7.14.2"
-    "@babel/helper-function-name" "^7.14.2"
-    "@babel/helper-split-export-declaration" "^7.12.13"
-    "@babel/parser" "^7.14.2"
-    "@babel/types" "^7.14.2"
+"@babel/template@^7.10.4", "@babel/template@^7.12.13", "@babel/template@^7.18.10", "@babel/template@^7.3.3":
+  "integrity" "sha512-TI+rCtooWHr3QJ27kJxfjutghu44DLnasDMwpDqCXVTal9RLp3RSYNh4NdBrRP2cQAoG9A8juOQl6P6oZG4JxA=="
+  "resolved" "https://registry.npmjs.org/@babel/template/-/template-7.18.10.tgz"
+  "version" "7.18.10"
+  dependencies:
+    "@babel/code-frame" "^7.18.6"
+    "@babel/parser" "^7.18.10"
+    "@babel/types" "^7.18.10"
+
+"@babel/traverse@^7.1.0", "@babel/traverse@^7.12.1", "@babel/traverse@^7.13.0", "@babel/traverse@^7.14.0", "@babel/traverse@^7.14.2", "@babel/traverse@^7.19.1", "@babel/traverse@^7.4.5", "@babel/traverse@^7.7.0":
+  "integrity" "sha512-w3K1i+V5u2aJUOXBFFC5pveFLmtq1s3qcdDNC2qRI6WPBQIDaKFqXxDEqDO/h1dQ3HjsZoZMyIy6jGLq0xtw+g=="
+  "resolved" "https://registry.npmjs.org/@babel/traverse/-/traverse-7.19.4.tgz"
+  "version" "7.19.4"
+  dependencies:
+    "@babel/code-frame" "^7.18.6"
+    "@babel/generator" "^7.19.4"
+    "@babel/helper-environment-visitor" "^7.18.9"
+    "@babel/helper-function-name" "^7.19.0"
+    "@babel/helper-hoist-variables" "^7.18.6"
+    "@babel/helper-split-export-declaration" "^7.18.6"
+    "@babel/parser" "^7.19.4"
+    "@babel/types" "^7.19.4"
     "debug" "^4.1.0"
     "globals" "^11.1.0"
 
-"@babel/types@^7.0.0", "@babel/types@^7.12.1", "@babel/types@^7.12.13", "@babel/types@^7.12.6", "@babel/types@^7.13.0", "@babel/types@^7.13.12", "@babel/types@^7.13.16", "@babel/types@^7.14.0", "@babel/types@^7.14.2", "@babel/types@^7.14.4", "@babel/types@^7.3.0", "@babel/types@^7.3.3", "@babel/types@^7.4.4", "@babel/types@^7.7.0":
-  "integrity" "sha512-lCj4aIs0xUefJFQnwwQv2Bxg7Omd6bgquZ6LGC+gGMh6/s5qDVfjuCMlDmYQ15SLsWHd9n+X3E75lKIhl5Lkiw=="
-  "resolved" "https://registry.npmjs.org/@babel/types/-/types-7.14.4.tgz"
-  "version" "7.14.4"
-  dependencies:
-    "@babel/helper-validator-identifier" "^7.14.0"
-    "to-fast-properties" "^2.0.0"
-
-"@babel/types@^7.18.6":
-  "integrity" "sha512-WwMLAg2MvJmt/rKEVQBBhIVffMmnilX4oe0sRe7iPOHIGsqpruFHHdrfj4O1CMMtgMtCU4oPafZjDPCRgO57Wg=="
-  "resolved" "https://registry.npmjs.org/@babel/types/-/types-7.18.9.tgz"
-  "version" "7.18.9"
+"@babel/types@^7.0.0", "@babel/types@^7.12.1", "@babel/types@^7.12.13", "@babel/types@^7.12.6", "@babel/types@^7.13.0", "@babel/types@^7.13.12", "@babel/types@^7.14.0", "@babel/types@^7.14.2", "@babel/types@^7.14.4", "@babel/types@^7.18.10", "@babel/types@^7.18.6", "@babel/types@^7.18.9", "@babel/types@^7.19.0", "@babel/types@^7.19.4", "@babel/types@^7.3.0", "@babel/types@^7.3.3", "@babel/types@^7.4.4", "@babel/types@^7.7.0":
+  "integrity" "sha512-M5LK7nAeS6+9j7hAq+b3fQs+pNfUtTGq+yFFfHnauFA8zQtLRfmuipmsKDKKLuyG+wC8ABW43A153YNawNTEtw=="
+  "resolved" "https://registry.npmjs.org/@babel/types/-/types-7.19.4.tgz"
+  "version" "7.19.4"
   dependencies:
-    "@babel/helper-validator-identifier" "^7.18.6"
+    "@babel/helper-string-parser" "^7.19.4"
+    "@babel/helper-validator-identifier" "^7.19.1"
     "to-fast-properties" "^2.0.0"
 
 "@bcoe/v8-coverage@^0.2.3":
@@ -1635,6 +1621,38 @@
     "@types/yargs" "^15.0.0"
     "chalk" "^4.0.0"
 
+"@jridgewell/gen-mapping@^0.3.2":
+  "integrity" "sha512-mh65xKQAzI6iBcFzwv28KVWSmCkdRBWoOh+bYQGW3+6OZvbbN3TqMGo5hqYxQniRcH9F2VZIoJCm4pa3BPDK/A=="
+  "resolved" "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.2.tgz"
+  "version" "0.3.2"
+  dependencies:
+    "@jridgewell/set-array" "^1.0.1"
+    "@jridgewell/sourcemap-codec" "^1.4.10"
+    "@jridgewell/trace-mapping" "^0.3.9"
+
+"@jridgewell/resolve-uri@3.1.0":
+  "integrity" "sha512-F2msla3tad+Mfht5cJq7LSXcdudKTWCVYUgw6pLFOOHSTtZlj6SWNYAp+AhuqLmWdBO2X5hPrLcu8cVP8fy28w=="
+  "resolved" "https://registry.npmjs.org/@jridgewell/resolve-uri/-/resolve-uri-3.1.0.tgz"
+  "version" "3.1.0"
+
+"@jridgewell/set-array@^1.0.1":
+  "integrity" "sha512-xnkseuNADM0gt2bs+BvhO0p78Mk762YnZdsuzFV018NoG1Sj1SCQvpSqa7XUaTam5vAGasABV9qXASMKnFMwMw=="
+  "resolved" "https://registry.npmjs.org/@jridgewell/set-array/-/set-array-1.1.2.tgz"
+  "version" "1.1.2"
+
+"@jridgewell/sourcemap-codec@^1.4.10", "@jridgewell/sourcemap-codec@1.4.14":
+  "integrity" "sha512-XPSJHWmi394fuUuzDnGz1wiKqWfo1yXecHQMRf2l6hztTO+nPru658AyDngaBe7isIxEkRsPR3FZh+s7iVa4Uw=="
+  "resolved" "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.14.tgz"
+  "version" "1.4.14"
+
+"@jridgewell/trace-mapping@^0.3.9":
+  "integrity" "sha512-MCNzAp77qzKca9+W/+I0+sEpaUnZoeasnghNeVc41VZCEKaCH73Vq3BZZ/SzWIgrqE4H4ceI+p+b6C0mHf9T4g=="
+  "resolved" "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.17.tgz"
+  "version" "0.3.17"
+  dependencies:
+    "@jridgewell/resolve-uri" "3.1.0"
+    "@jridgewell/sourcemap-codec" "1.4.14"
+
 "@mui/base@5.0.0-alpha.84":
   "integrity" "sha512-uDx+wGVytS+ZHiWHyzUyijY83GSIXJpzSJ0PGc/8/s+8nBzeHvaPKrAyJz15ASLr52hYRA6PQGqn0eRAsB7syQ=="
   "resolved" "https://registry.npmjs.org/@mui/base/-/base-5.0.0-alpha.84.tgz"
@@ -6212,9 +6230,9 @@
     "url-parse-lax" "^3.0.0"
 
 "graceful-fs@^4.1.11", "graceful-fs@^4.1.15", "graceful-fs@^4.1.2", "graceful-fs@^4.1.3", "graceful-fs@^4.1.6", "graceful-fs@^4.2.0", "graceful-fs@^4.2.4":
-  "integrity" "sha512-nTnJ528pbqxYanhpDYsi4Rd8MAeaBA67+RZ10CM1m3bTAVFEDcd5AuA4a6W5YkGZ1iNXHzZz8T6TBKLeBuNriQ=="
-  "resolved" "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.6.tgz"
-  "version" "4.2.6"
+  "integrity" "sha512-9ByhssR2fPVsNZj478qUUbKfmL0+t5BDVyjShtyZZLiK7ZDAArFFfopyOTj0M05wE2tJPisA4iTnnXl2YoPvOA=="
+  "resolved" "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.10.tgz"
+  "version" "4.2.10"
 
 "growly@^1.3.0":
   "integrity" "sha1-8QdIy+dq+WS3yWyTxrzCivEgwIE="
@@ -8663,11 +8681,6 @@
     "util" "^0.11.0"
     "vm-browserify" "^1.0.1"
 
-"node-modules-regexp@^1.0.0":
-  "integrity" "sha1-jZ2+KJZKSsVxLpExZCEHxx6Q7EA="
-  "resolved" "https://registry.npmjs.org/node-modules-regexp/-/node-modules-regexp-1.0.0.tgz"
-  "version" "1.0.0"
-
 "node-notifier@^8.0.0":
   "integrity" "sha512-oJP/9NAdd9+x2Q+rfphB2RJCHjod70RcRLjosiPMMu5gjIfwVnOUGq2nbTjTUbmy0DJ/tFIVT30+Qe3nzl4TJg=="
   "resolved" "https://registry.npmjs.org/node-notifier/-/node-notifier-8.0.2.tgz"
@@ -9258,11 +9271,9 @@
   "version" "2.0.4"
 
 "pirates@^4.0.1":
-  "integrity" "sha512-WuNqLTbMI3tmfef2TKxlQmAiLHKtFhlsCZnPIpuv2Ow0RDVO8lfy1Opf4NUzlMXLjPl+Men7AuVdX6TA+s+uGA=="
-  "resolved" "https://registry.npmjs.org/pirates/-/pirates-4.0.1.tgz"
-  "version" "4.0.1"
-  dependencies:
-    "node-modules-regexp" "^1.0.0"
+  "integrity" "sha512-8V9+HQPupnaXMA23c5hvl69zXvTwTzyAYasnkb0Tts4XvO4CliqONMOnvlq26rkhLC3nWDFBJf73LU1e1VZLaQ=="
+  "resolved" "https://registry.npmjs.org/pirates/-/pirates-4.0.5.tgz"
+  "version" "4.0.5"
 
 "pkg-dir@^2.0.0":
   "integrity" "sha1-9tXREJ4Z1j7fQo4L1X4Sd3YVM0s="
@@ -10573,6 +10584,19 @@
   "resolved" "https://registry.npmjs.org/react-singleton-hook/-/react-singleton-hook-3.4.0.tgz"
   "version" "3.4.0"
 
+"react-spring@^8.0.27":
+  "integrity" "sha512-nDpWBe3ZVezukNRandTeLSPcwwTMjNVu1IDq9qA/AMiUqHuRN4BeSWvKr3eIxxg1vtiYiOLy4FqdfCP5IoP77g=="
+  "resolved" "https://registry.npmjs.org/react-spring/-/react-spring-8.0.27.tgz"
+  "version" "8.0.27"
+  dependencies:
+    "@babel/runtime" "^7.3.1"
+    "prop-types" "^15.5.8"
+
+"react-swipeable@^7.0.0":
+  "integrity" "sha512-NI7KGfQ6gwNFN0Hor3vytYW3iRfMMaivGEuxcADOOfBCx/kqwXE8IfHFxEcxSUkxCYf38COLKYd9EMYZghqaUA=="
+  "resolved" "https://registry.npmjs.org/react-swipeable/-/react-swipeable-7.0.0.tgz"
+  "version" "7.0.0"
+
 "react-themeable@^1.1.0":
   "integrity" "sha512-kl5tQ8K+r9IdQXZd8WLa+xxYN04lLnJXRVhHfdgwsUJr/SlKJxIejoc9z9obEkx1mdqbTw1ry43fxEUwyD9u7w=="
   "resolved" "https://registry.npmjs.org/react-themeable/-/react-themeable-1.1.0.tgz"
@@ -13356,9 +13380,9 @@
     "async-limiter" "~1.0.0"
 
 "ws@^7.4.5":
-  "integrity" "sha512-YmhHDO4MzaDLB+M9ym/mDA5z0naX8j7SIlT8f8z+I0VtzsRbekxEutHSme7NPS2qE8StCYQNUnfWdXta/Yu85A=="
-  "resolved" "https://registry.npmjs.org/ws/-/ws-7.4.6.tgz"
-  "version" "7.4.6"
+  "integrity" "sha512-F+P9Jil7UiSKSkppIiD94dN07AwvFixvLIj1Og1Rl9GGMuNipJnV9JzjD6XuqmAeiswGvUmNLjr5cFuXwNS77Q=="
+  "resolved" "https://registry.npmjs.org/ws/-/ws-7.5.9.tgz"
+  "version" "7.5.9"
 
 "ws@~8.2.3":
   "integrity" "sha512-wBuoj1BDpC6ZQ1B7DWQBYVLphPWkm8i9Y0/3YdHjHKHiohOJ1ws+3OccDWtH+PoC9DZD5WOTrJvNbWvjS6JWaA=="