fix: sidebar minimized on load (#635)

* fix: SideNavigationBar not expanded by default * fix: buy tokens icon and texts * feat(sidebar): Remember Sidebar expanded state * refactor(sidebar): Remove SidebarContextProvider handle state using redux * Update packages/components/navigation/BuyTokens.tsx Co-authored-by: WaDadidou <[email protected]> * fix(sidebar): on Mobile: set sidebar as not expanded --------- Co-authored-by: WaDadidou <[email protected]>
TERITORI · Jul 12, 2023 · bdd2e17 · bdd2e17
1 parent 9dc8637
commit bdd2e17
Show file tree

Hide file tree

Showing 5 changed files with 48 additions and 63 deletions.
diff --git a/App.tsx b/App.tsx
@@ -19,7 +19,6 @@ import { Navigator } from "./packages/components/navigation/Navigator";
 import { DropdownsContextProvider } from "./packages/context/DropdownsProvider";
 import { FeedbacksContextProvider } from "./packages/context/FeedbacksProvider";
 import { SearchBarContextProvider } from "./packages/context/SearchBarProvider";
-import { SidebarContextProvider } from "./packages/context/SidebarProvider";
 import { TNSMetaDataListContextProvider } from "./packages/context/TNSMetaDataListProvider";
 import { TNSContextProvider } from "./packages/context/TNSProvider";
 import { TransactionModalsProvider } from "./packages/context/TransactionModalsProvider";
@@ -62,10 +61,8 @@ export default function App() {
                           <TNSContextProvider>
                             <TNSMetaDataListContextProvider>
                               <MenuProvider>
-                                <SidebarContextProvider>
-                                  <StatusBar style="inverted" />
-                                  <Navigator />
-                                </SidebarContextProvider>
+                                <StatusBar style="inverted" />
+                                <Navigator />
                               </MenuProvider>
                             </TNSMetaDataListContextProvider>
                           </TNSContextProvider>

diff --git a/packages/components/navigation/BuyTokens.tsx b/packages/components/navigation/BuyTokens.tsx
@@ -1,30 +1,32 @@
 import React from "react";
-import { Linking, TouchableOpacity } from "react-native";
+import { Linking, TextStyle, TouchableOpacity } from "react-native";
 import { CreditCardIcon } from "react-native-heroicons/outline";
 
 import { primaryColor } from "../../utils/style/colors";
-import { fontBold16 } from "../../utils/style/fonts";
 import { layout } from "../../utils/style/layout";
 import { BrandText } from "../BrandText";
 
-export const BuyTokens: React.FC = () => {
+export const BuyTokens: React.FC<{
+  flexDirection: "row" | "column";
+  textStyle: TextStyle;
+}> = ({ flexDirection, textStyle }) => {
   return (
     <TouchableOpacity
       style={{
         justifyContent: "center",
         alignItems: "center",
         marginBottom: layout.padding_x1,
-        flexDirection: "row",
+        flexDirection,
       }}
       onPress={() => {
         Linking.openURL("https://frontier.osmosis.zone/?from=OSMO&to=TORI");
       }}
     >
       <CreditCardIcon
         color={primaryColor}
-        style={{ marginRight: layout.padding_x1 }}
+        style={{ marginRight: flexDirection === "row" ? layout.padding_x1 : 0 }}
       />
-      <BrandText style={fontBold16}>Buy Tokens</BrandText>
+      <BrandText style={textStyle}>Buy Tokens</BrandText>
     </TouchableOpacity>
   );
 };
diff --git a/packages/components/navigation/Sidebar.tsx b/packages/components/navigation/Sidebar.tsx
@@ -22,6 +22,7 @@ import useSelectedWallet from "../../hooks/useSelectedWallet";
 import { NetworkKind } from "../../networks";
 import { useAppNavigation } from "../../utils/navigation";
 import { neutral17, neutral33 } from "../../utils/style/colors";
+import { fontBold16, fontBold9 } from "../../utils/style/fonts";
 import {
   smallSidebarWidth,
   fullSidebarWidth,
@@ -146,7 +147,10 @@ export const Sidebar: React.FC = () => {
       />
       <View>
         <SidebarSeparator />
-        <BuyTokens />
+        <BuyTokens
+          flexDirection={isSidebarExpanded ? "row" : "column"}
+          textStyle={isSidebarExpanded ? fontBold16 : fontBold9}
+        />
         <SidebarSeparator />
 
         {selectedNetworkKind === NetworkKind.Cosmos &&

diff --git a/packages/context/SidebarProvider.tsx b/packages/context/SidebarProvider.tsx
@@ -1,47 +1,33 @@
-import React, {
-  createContext,
-  useContext,
-  useState,
-  useEffect,
-  useMemo,
-} from "react";
-import { useWindowDimensions } from "react-native";
+import { useEffect, useMemo } from "react";
 import { useSelector } from "react-redux";
 
+import { useIsMobile } from "../hooks/useIsMobile";
 import { getValuesFromId, SEPARATOR } from "../screens/DAppStore/query/util";
 import {
   selectAvailableApps,
   selectCheckedApps,
   setSelectedApps,
 } from "../store/slices/dapps-store";
+import {
+  selectSidebarExpanded,
+  setSidebarExpanded,
+} from "../store/slices/settings";
 import { useAppDispatch } from "../store/store";
 import { SIDEBAR_LIST } from "../utils/sidebar";
 
-interface DefaultValue {
-  isSidebarExpanded: boolean;
-  toggleSidebar: () => void;
-  dynamicSidebar: { [p: string]: any };
-}
-
-const defaultValue: DefaultValue = {
-  isSidebarExpanded: false,
-  toggleSidebar: () => {},
-  dynamicSidebar: {},
-};
-
-const SidebarContext = createContext(defaultValue);
-
-const MOBILE_WIDTH = 768;
-
-export const SidebarContextProvider: React.FC = ({ children }) => {
-  // The entered isSidebarExpanded
-  const [isSidebarExpanded, setIsSidebarExpanded] = useState<boolean>(
-    defaultValue.isSidebarExpanded
-  );
-
+export const useSidebar = () => {
+  const isSidebarExpanded = useSelector(selectSidebarExpanded);
   const selectedApps = useSelector(selectCheckedApps);
   const availableApps = useSelector(selectAvailableApps);
   const dispatch = useAppDispatch();
+  // on mobile sidebar is not expanded on load
+  const isMobile = useIsMobile();
+  useEffect(() => {
+    if (isMobile) {
+      dispatch(setSidebarExpanded(false));
+    }
+  }, [dispatch, isMobile]);
+
   useEffect(() => {
     if (selectedApps.length === 0 && Object.values(availableApps).length > 0) {
       dispatch(
@@ -87,27 +73,14 @@ export const SidebarContextProvider: React.FC = ({ children }) => {
 
     return dynamicAppsSelection;
   }, [availableApps, selectedApps]);
-  const { width: windowWidth } = useWindowDimensions();
 
-  useEffect(() => {
-    setIsSidebarExpanded(
-      windowWidth >= MOBILE_WIDTH ? defaultValue.isSidebarExpanded : false
-    );
-  }, [windowWidth]);
-
-  const toggleSidebar = () => setIsSidebarExpanded(!isSidebarExpanded);
+  const toggleSidebar = () => {
+    dispatch(setSidebarExpanded(!isSidebarExpanded));
+  };
 
-  return (
-    <SidebarContext.Provider
-      value={{
-        isSidebarExpanded,
-        toggleSidebar,
-        dynamicSidebar,
-      }}
-    >
-      {children}
-    </SidebarContext.Provider>
-  );
+  return {
+    isSidebarExpanded,
+    toggleSidebar,
+    dynamicSidebar,
+  };
 };
-
-export const useSidebar = () => useContext(SidebarContext);
diff --git a/packages/store/slices/settings.ts b/packages/store/slices/settings.ts
@@ -10,6 +10,7 @@ interface Settings {
   isAdenaConnected: boolean;
   alreadyVisited: boolean;
   areTestnetsEnabled: boolean;
+  sideBarExpanded: boolean;
 }
 
 const initialState: Settings = {
@@ -20,6 +21,7 @@ const initialState: Settings = {
   isAdenaConnected: false,
   alreadyVisited: false,
   areTestnetsEnabled: false,
+  sideBarExpanded: true,
 };
 
 export const selectSelectedNetworkId = (state: RootState) =>
@@ -37,6 +39,9 @@ export const selectIsAdenaConnected = (state: RootState) =>
 export const selectAreTestnetsEnabled = (state: RootState) =>
   state.settings.areTestnetsEnabled;
 
+export const selectSidebarExpanded = (state: RootState) =>
+  state.settings.sideBarExpanded;
+
 export const selectNFTStorageAPI = (state: RootState) =>
   state.settings.NFTStorageAPI;
 
@@ -59,6 +64,9 @@ const settingsSlice = createSlice({
     setAreTestnetsEnabled: (state, action: PayloadAction<boolean>) => {
       state.areTestnetsEnabled = action.payload;
     },
+    setSidebarExpanded: (state, action: PayloadAction<boolean>) => {
+      state.sideBarExpanded = action.payload;
+    },
     setNFTStorageAPI: (state, action: PayloadAction<string>) => {
       state.NFTStorageAPI = action.payload;
     },
@@ -71,6 +79,7 @@ export const {
   setIsKeplrConnected,
   setIsAdenaConnected,
   setAreTestnetsEnabled,
+  setSidebarExpanded,
   setNFTStorageAPI,
 } = settingsSlice.actions;