fix(tabs): fixed new tab, remove tab and switch tab

localhost-international · Jul 12, 2021 · fc65d6d · fc65d6d
1 parent c6d5bd1
commit fc65d6d
Show file tree

Hide file tree

Showing 9 changed files with 147 additions and 151 deletions.
diff --git a/src/components/BrowserTab.tsx b/src/components/BrowserTab.tsx
@@ -1,6 +1,6 @@
-import React, { useEffect, useState } from 'react';
+import React, { useState } from 'react';
 import { SafeAreaView } from 'react-native-safe-area-context';
-import { useRecoilState } from 'recoil';
+import { useSetRecoilState } from 'recoil';
 import { WebView } from 'react-native-webview';
 import styled from 'styled-components/native';
 
@@ -12,12 +12,11 @@ interface BrowserTabProps {
 }
 
 export default function BrowserTab({ tabState }: BrowserTabProps) {
-  const [browserTabs, setBrowserTabs] = useRecoilState(browserTabsState);
+  const setBrowserTabs = useSetRecoilState(browserTabsState);
 
   const [refreshing, setRefreshing] = useState(false);
 
-  // Do I need this?
-  const { tabRef } = tabState;
+  const { tabRef, tabId, tabActive, tabUriCurrent } = tabState;
 
   const config = {
     detectorTypes: 'all',
@@ -36,42 +35,35 @@ export default function BrowserTab({ tabState }: BrowserTabProps) {
     }
   };
 
-  useEffect(() => {
-    // console.log('\n\ntabUriCurrent', tabUriCurrent);
-  }, [browserTabs]);
-
   return (
     <>
-      <ScrollView
-        showsVerticalScrollIndicator={false}
-        showsHorizontalScrollIndicator={false}
-        refreshControl={
-          <RefreshControl refreshing={refreshing} onRefresh={webViewReload} />
-        }>
-        <SafeAreaViewContainer>
-          {browserTabs.activeTabIndex !== null && (
+      <BrowserTabContainer active={tabActive}>
+        <ScrollView
+          showsVerticalScrollIndicator={false}
+          showsHorizontalScrollIndicator={false}
+          refreshControl={
+            <RefreshControl refreshing={refreshing} onRefresh={webViewReload} />
+          }>
+          <SafeAreaViewContainer>
             <WebViewContainer
-              ref={tabRef}
-              userAgent="Cartographer v0.1.0; Mozilla/5.0 (iPhone; CPU iPhone OS 13_2_3 like Mac OS X)"
+              // ref={tabRef}
+              // userAgent="Cartographer v0.1.0; Mozilla/5.0 (iPhone; CPU iPhone OS 13_2_3 like Mac OS X)"
               originWhitelist={['*']}
-              // source={tabUriCurrent}
               source={
-                browserTabs.tabs[browserTabs.activeTabIndex].tabUriCurrent
+                // browserTabs?.tabs[browserTabs.activeTabIndex].tabUriCurrent
+                tabUriCurrent
               }
               onLoadStart={() => {}}
               onNavigationStateChange={(currentNavState) => {
-                // console.log('onNavigationStateChange', currentNavState);
-
                 setBrowserTabs((previous) => {
-                  // console.log('\nonNavigationStateChange', previous);
-                  if (previous.activeTabIndex !== null) {
-                    previous.tabs[previous.activeTabIndex].tabUriValue =
-                      currentNavState.url;
-                    previous.tabs[previous.activeTabIndex].tabUri =
-                      currentNavState.url;
-                    previous.tabs[previous.activeTabIndex].tabTitle =
-                      currentNavState.title;
-                  }
+                  const tabIndex = previous.tabs.findIndex(
+                    (tab) => tab.tabId === tabId,
+                  );
+
+                  previous.tabs[tabIndex].tabUriValue = currentNavState.url;
+                  previous.tabs[tabIndex].tabUri = currentNavState.url;
+                  previous.tabs[tabIndex].tabTitle = currentNavState.title;
+
                   return {
                     ...previous,
                   };
@@ -97,13 +89,26 @@ export default function BrowserTab({ tabState }: BrowserTabProps) {
               allowsInlineMediaPlayback={true}
               allowsFullscreenVideo={false}
             />
-          )}
-        </SafeAreaViewContainer>
-      </ScrollView>
+          </SafeAreaViewContainer>
+        </ScrollView>
+      </BrowserTabContainer>
     </>
   );
 }
 
+interface BrowserTabContainerProps {
+  active: boolean;
+}
+
+const BrowserTabContainer = styled.View<BrowserTabContainerProps>`
+  display: ${(props) => (props.active ? 'flex' : 'none')};
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+`;
+
 const ScrollView = styled.ScrollView.attrs(() => ({
   contentContainerStyle: {
     flex: 1,

diff --git a/src/components/Navigation/NavigationButtons.tsx b/src/components/Navigation/NavigationButtons.tsx
@@ -23,9 +23,22 @@ const NavigationButtons = () => {
 
   const [browserTabs, setBrowserTabs] = useRecoilState(browserTabsState);
 
-  const webViewReload = () => browserTabs.activeTabRef?.current?.reload();
-  const webViewGoBack = () => browserTabs.activeTabRef?.current?.goBack();
-  const webViewGoForward = () => browserTabs.activeTabRef?.current?.goForward();
+  const webViewReload = () => {
+    if (browserTabs.tabs.length && browserTabs.activeTabIndex !== null) {
+      browserTabs.tabs[browserTabs.activeTabIndex].tabRef?.current?.reload();
+    }
+  };
+  const webViewGoBack = () => {
+    if (browserTabs.tabs.length && browserTabs.activeTabIndex !== null) {
+      browserTabs.tabs[browserTabs.activeTabIndex].tabRef?.current?.goBack();
+    }
+  };
+  const webViewGoForward = () => {
+    if (browserTabs.tabs.length && browserTabs.activeTabIndex !== null) {
+      browserTabs.tabs[browserTabs.activeTabIndex].tabRef?.current?.goForward();
+    }
+  };
+
   const viewTabs = () => screenNavigation.navigate('Tabs');
   const viewSettings = () => screenNavigation.navigate('Settings');
 

diff --git a/src/components/Navigation/NavigationComboInput.tsx b/src/components/Navigation/NavigationComboInput.tsx
@@ -19,7 +19,7 @@ const AddressTextInput = () => {
   const [shareVisible, shareVisibility] = useState(true);
 
   const shareCurrentUri = () => {
-    if (browserTabs.activeTabIndex !== null) {
+    if (browserTabs.tabs.length && browserTabs.activeTabIndex !== null) {
       const sharingMessage =
         browserTabs.tabs[browserTabs.activeTabIndex].tabTitle;
       const sharingUri = browserTabs.tabs[browserTabs.activeTabIndex].tabUri;
@@ -42,7 +42,7 @@ const AddressTextInput = () => {
     <AddressBar>
       <URLSearchInput
         value={
-          browserTabs.activeTabIndex !== null
+          browserTabs.tabs.length && browserTabs.activeTabIndex !== null
             ? browserTabs.tabs[browserTabs.activeTabIndex].tabUriValue
             : ''
         }
@@ -126,4 +126,8 @@ const Icon = styled.Pressable.attrs({
   color: ${(props) => props.theme.addressBar.color};
 `;
 
+// const NoTabsOpenMessage = styled.Text`
+//   color: ${(props) => props.theme.colors.text};
+// `;
+
 export default AddressTextInput;
diff --git a/src/components/Navigation/index.tsx b/src/components/Navigation/index.tsx
@@ -1,29 +1,13 @@
-import React, { useEffect } from 'react';
+import React from 'react';
 import styled from 'styled-components/native';
 
-import { useRecoilValue } from 'recoil';
-
-import NavigationTextInput from 'src/components/Navigation/NavigationComboInput';
+// import NavigationTextInput from 'src/components/Navigation/NavigationComboInput';
 import NavigationButtons from 'src/components/Navigation/NavigationButtons';
 
-import { browserTabsState } from 'src/store';
-
 export default function Navigation() {
-  const browserTabs = useRecoilValue(browserTabsState);
-
-  useEffect(() => {
-    console.log('Active Tab ID', browserTabs.activeTabId);
-  }, [browserTabs.activeTabId]);
-
   return (
     <NavigationContainer>
-      <Button
-        onPress={() => {
-          browserTabs.activeTabRef?.current?.reload();
-        }}>
-        <ButtonText>Debug</ButtonText>
-      </Button>
-      <NavigationTextInput />
+      {/* <NavigationTextInput /> */}
       <NavigationButtons />
     </NavigationContainer>
   );
@@ -38,15 +22,3 @@ const NavigationContainer = styled.View`
   display: flex;
   background: ${(props) => props.theme.colors.background};
 `;
-
-/////
-
-const Button = styled.Pressable`
-  background: blue;
-  color: white;
-  padding: 20px;
-`;
-const ButtonText = styled.Text`
-  color: white;
-  font-weight: 500;
-`;
diff --git a/src/store/index.ts b/src/store/index.ts
@@ -35,14 +35,13 @@ type WebViewUrl = { uri: string };
 type WebViewHtml = { html: string };
 
 export type BrowserTabState = {
-	tabRef: React.RefObject<WebView> | null;
-	tabIndex: number;
+	tabRef?: React.RefObject<WebView> | null;
 	tabActive: boolean;
 	tabMounted: boolean;
 	tabId: string;
-	tabTitle: string;
-	tabThumbnail: null | string;
-	tabLastActive: null | Date;
+	tabTitle: string | null;
+	tabThumbnail: string | null;
+	tabLastActive: Date | null;
 	tabUri: string; // TODO - Initial tab Uri for new tabs?
 	tabUriValue: string;
 	tabUriCurrent: WebViewUrl | WebViewHtml;
@@ -52,20 +51,18 @@ export type BrowserTabsState = {
 	// Active Tab
 	activeTabId: null | string;
 	activeTabIndex: null | number;
-	activeTabRef: React.RefObject<WebView> | null;
 	// Previous Tab
 	previousTabId: null | string;
-	tabIncrement: number;
+	tabIdIncrement: number;
 };
-export let browserTabsState = atom({
+export const browserTabsState = atom({
 	key: 'browserTabsState',
 	default: <BrowserTabsState>{
 		tabs: [],
 		activeTabId: null,
 		activeTabIndex: null,
-		activeTabRef: null,
 		previousTabId: null,
-		tabIncrement: 0,
+		tabIdIncrement: 0,
 	},
 	dangerouslyAllowMutability: true,
 });
diff --git a/src/utils/debug.ts b/src/utils/debug.ts
@@ -1,13 +1,26 @@
 export function randomSite(): string {
 	const sites = [
 		'https://duckduckgo.com/',
-		'https://recoiljs.org/',
-		'https://openzeppelin.com/',
+		'https://bing.com/',
+		'https://youtube.com/',
 		'https://status.im/',
 		'https://beta.catalog.works/',
-		'https://foundation.app/',
-		'https://mirror.xyz/',
 		'https://web3summit.com/',
+		'https://tmall.com/',
+		'https://yahoo.co.jp/',
+		'https://aparat.com/',
+		'https://yandex.ru/',
+		'https://www.tg4.ie/ga/',
+		// 'https://qq.com/',
+		// 'https://www.naver.com/',
+		// 'https://sohu.com/',
+		// 'https://www.sogou.com/',
+		// 'https://360.cn/',
+		// 'https://jd.com/',
+		// 'https://foundation.app/',
+		// 'https://mirror.xyz/',
+		// 'https://recoiljs.org/',
+		// 'https://openzeppelin.com/',
 	];
 	return sites[Math.floor(Math.random() * sites.length)];
 }