Merge pull request #171 from dataswift/dev

V4.2.3

.gitignore

@@ -26,3 +26,4 @@ yarn-debug.log*
 yarn-error.log*
 
 .eslintcache
+.vscode

package.json

@@ -1,6 +1,6 @@
 {
   "name": "rumpel-react",
-  "version": "4.2.2",
+  "version": "4.2.3",
   "private": true,
   "dependencies": {
     "@dataswift/hat-js": "^0.3.2",

src/app.config.ts

@@ -7,7 +7,7 @@ const externalLinks = {
 };
 
 export const config = {
-  version: '4.2.2',
+  version: '4.2.3',
   name: environment.appName,
   tokenApp: environment.tokenName,
   tokenExpiryTime: 3,

src/components/PrivateSpace/PrivateSpace.scss

@@ -23,7 +23,6 @@
       flex-direction: column;
       position: relative;
       z-index: 1;
-      height: 100%;
       overflow: auto;
 
       @media (max-width: 730px) {

src/components/PrivateSpace/PrivateSpace.tsx

@@ -1,12 +1,12 @@
 import React, { ReactNode, useEffect, useRef, useState } from 'react';
-import { useLocation } from "react-router-dom";
-import { NavigationHeader } from "../headers/NavigationHeader/NavigationHeader";
-import { SideMenu } from "../SideMenu/SideMenu";
+import { useLocation } from 'react-router-dom';
+import { NavigationHeader } from '../headers/NavigationHeader/NavigationHeader';
+import { SideMenu } from '../SideMenu/SideMenu';
 import './PrivateSpace.scss';
 
 type Props = {
-    children: ReactNode;
-}
+  children: ReactNode;
+};
 
 export const PrivateSpace: React.FC<Props> = ({ children }) => {
   const [hideSideMenu, setHideSideMenu] = useState(false);
@@ -18,7 +18,7 @@ export const PrivateSpace: React.FC<Props> = ({ children }) => {
       setHideSideMenu(true);
     }
   }, []);
-    
+
   useEffect(() => {
     content.current?.scrollTo(0, 0);
   }, [pathname]);
@@ -31,13 +31,14 @@ export const PrivateSpace: React.FC<Props> = ({ children }) => {
 
   return (
     <div className={'private-space'}>
-      <NavigationHeader toggleSideMenu={() => setHideSideMenu(!hideSideMenu)}/>
+      <NavigationHeader toggleSideMenu={() => setHideSideMenu(!hideSideMenu)} />
       <div className={'private-space-wrapper'}>
-        <SideMenu hideSideMenu={hideSideMenu} onSideMenuClick={onSideMenuClick}/>
+        <SideMenu hideSideMenu={hideSideMenu} onSideMenuClick={onSideMenuClick} />
         <div
           className={`private-space-content ${hideSideMenu && 'side-menu-hidden'}`}
           id={'private-space-content'}
-          ref={content}>
+          ref={content}
+        >
           {children}
         </div>
       </div>

src/components/headers/NavigationHeader/NavigationHeader.scss

@@ -37,6 +37,7 @@
 }
 
 .nav-header {
+  position: fixed;
   height: 60px;
-  box-shadow: 0 3px 5px -1px rgba(0,0,0,.2), 0 6px 10px 0 rgba(0,0,0,.14), 0 1px 18px 0 rgba(0,0,0,.12);
+  box-shadow: 0 3px 5px -1px rgba(0, 0, 0, 0.2), 0 6px 10px 0 rgba(0, 0, 0, 0.14), 0 1px 18px 0 rgba(0, 0, 0, 0.12);
 }

src/features/feed/Feed.scss

@@ -1,4 +1,4 @@
-@import "../../assets/styles/branding";
+@import '../../assets/styles/branding';
 
 .she-feed {
   overflow: auto;
@@ -16,9 +16,10 @@
     color: $ds-dusty-gray-color;
     max-width: 500px;
 
-    &:before, &:after {
+    &:before,
+    &:after {
       background-color: #e0e0e0;
-      content: " ";
+      content: ' ';
       display: inline-block;
       height: 1px;
       position: relative;
@@ -97,8 +98,8 @@
 .feed-user-actions {
   display: flex;
   flex-direction: column;
-  position: -webkit-sticky; /* Safari */
-  position: sticky;
+  position: -webkit-fixed; /* Safari */
+  position: fixed;
   margin: auto auto 0; /* Fix the issue with the small feed height */
   bottom: 0;
   left: 0;
@@ -120,7 +121,7 @@
       cursor: pointer;
       border: 1px solid transparent;
       text-transform: uppercase;
-      flex:  1 1 auto;
+      flex: 1 1 auto;
       padding: 0;
       background-color: transparent;
       color: $app-accent-color;
@@ -130,7 +131,7 @@
       align-items: center;
 
       &:not(:last-child) {
-        border-right: 1px solid rgba(0, 0, 0, 0.20);
+        border-right: 1px solid rgba(0, 0, 0, 0.2);
         border-radius: 0;
       }
     }

src/features/feed/Feed.tsx

@@ -1,19 +1,19 @@
-import React, { useEffect, useState } from "react";
+import React, { useEffect, useState } from 'react';
 import './Feed.scss';
-import { FeedUserActions } from "./FeedUserActions";
-import { FeedFilteredData } from "./FeedFilteredDataList";
-import { InfiniteScrolling } from "../../components/InfiniteScrolling/InfiniteScrolling";
-import { resetSheFeedValues } from "./feedSlice";
-import { useDispatch } from "react-redux";
+import { FeedUserActions } from './FeedUserActions';
+import { FeedFilteredData } from './FeedFilteredDataList';
+import { InfiniteScrolling } from '../../components/InfiniteScrolling/InfiniteScrolling';
+import { resetSheFeedValues } from './feedSlice';
+import { useDispatch } from 'react-redux';
 
 const Feed: React.FC = () => {
-  const [feedState, setFeedState] = useState("infinite-scrolling");
+  const [feedState, setFeedState] = useState('infinite-scrolling');
   const [selectedDates, setSelectedDates] = useState({ since: 0, until: 0 });
   const dispatch = useDispatch();
 
   useEffect(() => {
     if (selectedDates.since) {
-      setFeedState("filtering");
+      setFeedState('filtering');
     }
   }, [selectedDates]);
 
@@ -27,18 +27,14 @@ const Feed: React.FC = () => {
 
   const onRefreshClick = () => {
     dispatch(resetSheFeedValues());
-    setFeedState("infinite-scrolling");
+    setFeedState('infinite-scrolling');
   };
 
   return (
     <div className={'feed-wrapper'}>
-      {feedState === 'filtering' && (
-        <FeedFilteredData selectedDates={selectedDates}/>
-      )}
+      {feedState === 'filtering' && <FeedFilteredData selectedDates={selectedDates} />}
 
-      {feedState === 'infinite-scrolling' && (
-        <InfiniteScrolling />
-      )}
+      {feedState === 'infinite-scrolling' && <InfiniteScrolling />}
       <FeedUserActions
         onSelectedDates={(since, until) => setSelectedDates({ since: since, until: until })}
         onRefresh={onRefreshClick}