diff --git a/src/components/BrowserTab.tsx b/src/components/BrowserTab.tsx index c46c52db..891b5936 100644 --- 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 ( <> - - }> - - {browserTabs.activeTabIndex !== null && ( + + + }> + {}} 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} /> - )} - - + + + ); } +interface BrowserTabContainerProps { + active: boolean; +} + +const BrowserTabContainer = styled.View` + 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 index 5500c841..07ede3a8 100644 --- 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 index dec1c2b3..746ec0fa 100644 --- 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 = () => { 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 index 41643f66..726985e6 100644 --- 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 ( - - + {/* */} ); @@ -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 index 9a2929e5..4d0ccf12 100644 --- 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 | null; - tabIndex: number; + tabRef?: React.RefObject | 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 | null; // Previous Tab previousTabId: null | string; - tabIncrement: number; + tabIdIncrement: number; }; -export let browserTabsState = atom({ +export const browserTabsState = atom({ key: 'browserTabsState', default: { 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 index 7edb3d1e..7560bf69 100644 --- 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)]; } diff --git a/src/utils/tabs.ts b/src/utils/tabs.ts index 5e203d57..030f8418 100644 --- a/src/utils/tabs.ts +++ b/src/utils/tabs.ts @@ -1,20 +1,14 @@ -import React from 'react'; import type { BrowserTabsState, BrowserTabState } from 'src/store'; -/** - * TODO - * - Consider the memory/performance cost of this - */ export const newTab = (tabUri: string, previousTabs: BrowserTabsState) => { - console.log('\n\nnewTab', previousTabs.tabIncrement, '\n\n'); + console.log('\n\nnewTab', previousTabs.tabIdIncrement, '\n\n'); const newBrowsertab: BrowserTabState = { - tabRef: React.createRef(), - tabIndex: previousTabs.tabIncrement, + // tabRef: React.createRef(), tabActive: true, tabMounted: true, - tabId: `tab-id-index-${previousTabs.tabIncrement}`, - tabTitle: `Tab ${previousTabs.tabIncrement + 1}`, + tabId: `tab-id-index-${previousTabs.tabIdIncrement}`, + tabTitle: null, tabThumbnail: null, tabLastActive: null, tabUri: tabUri, @@ -25,13 +19,13 @@ export const newTab = (tabUri: string, previousTabs: BrowserTabsState) => { }; if (previousTabs.tabs.length) { + console.log('Do previous tabs have length?', previousTabs.tabs.length); previousTabs.previousTabId = previousTabs.activeTabId; } // Set new tab as active ID, Index and Ref previousTabs.activeTabId = newBrowsertab.tabId; - previousTabs.activeTabIndex = previousTabs.tabIncrement; - previousTabs.activeTabRef = newBrowsertab.tabRef; + previousTabs.activeTabIndex = previousTabs.tabIdIncrement; if (previousTabs.tabs.length) { const previousTabIndex = previousTabs.tabs.findIndex( @@ -40,54 +34,65 @@ export const newTab = (tabUri: string, previousTabs: BrowserTabsState) => { previousTabs.tabs[previousTabIndex].tabActive = false; } previousTabs.tabs = [...previousTabs.tabs, newBrowsertab]; - previousTabs.tabIncrement++; + previousTabs.tabIdIncrement++; return { ...previousTabs, }; }; export const removeTab = (tabId: string, previousTabs: BrowserTabsState) => { - const deleteTabByIndex = previousTabs.tabs.findIndex( + const tabToRemoveByIndex = previousTabs.tabs.findIndex( (tab) => tab.tabId === tabId, ); + // If only one tab set activeTabId, previousTabId and activeTabIndex to null + if (previousTabs.tabs.length === 1) { + previousTabs.activeTabIndex = null; + previousTabs.activeTabId = null; + previousTabs.previousTabId = null; + } + // If there is more than 1 tab if (previousTabs.tabs.length > 1) { const activeIndex = - deleteTabByIndex === 0 ? deleteTabByIndex + 1 : deleteTabByIndex - 1; - + tabToRemoveByIndex === 0 + ? tabToRemoveByIndex + 1 + : tabToRemoveByIndex - 1; previousTabs.activeTabIndex = activeIndex; previousTabs.activeTabId = previousTabs.tabs[activeIndex].tabId; - previousTabs.activeTabRef = previousTabs.tabs[activeIndex].tabRef; previousTabs.tabs[activeIndex].tabActive = true; - } else { - previousTabs.activeTabId = null; - previousTabs.activeTabRef = null; - previousTabs.previousTabId = null; } return { ...previousTabs, tabs: [ - ...previousTabs.tabs.slice(0, deleteTabByIndex), - ...previousTabs.tabs.slice(deleteTabByIndex + 1), + ...previousTabs.tabs.slice(0, tabToRemoveByIndex), + ...previousTabs.tabs.slice(tabToRemoveByIndex + 1), ], }; }; export const switchTab = (tabId: string, previousTabs: BrowserTabsState) => { - if (previousTabs.tabs.length) { + const newTabId = tabId; + const previousTabId = previousTabs.activeTabId; + + console.log('switchTab'); + // If there is only one tab, do nothing! + if (previousTabs.tabs.length === 1) { + console.log('Only one tab, so do nothing'); + } + if (previousTabs.tabs.length >= 2) { + // Get index of new tab to switch to + const newActiveTabIndex = previousTabs.tabs.findIndex( + (tab) => tab.tabId === newTabId, + ); + previousTabs.activeTabId = previousTabs.tabs[newActiveTabIndex].tabId; + previousTabs.activeTabIndex = newActiveTabIndex; + previousTabs.tabs[newActiveTabIndex].tabActive = true; + // Get index of previously selected tab const previousTabIndex = previousTabs.tabs.findIndex( - (tab) => tab.tabId === previousTabs.previousTabId, + (tab) => tab.tabId === previousTabId, ); - console.log('previousTabIndex', previousTabIndex); + previousTabs.previousTabId = previousTabs.tabs[previousTabIndex].tabId; previousTabs.tabs[previousTabIndex].tabActive = false; - previousTabs.previousTabId = previousTabs.activeTabId; - const newTabIndex = previousTabs.tabs.findIndex( - (tab) => tab.tabId === tabId, - ); - previousTabs.tabs[newTabIndex].tabActive = true; - previousTabs.activeTabIndex = newTabIndex; - previousTabs.activeTabRef = previousTabs.tabs[newTabIndex].tabRef; } - previousTabs.activeTabId = tabId; return { ...previousTabs, }; diff --git a/src/views/BrowserView.tsx b/src/views/BrowserView.tsx index 0a9c78e8..4db68160 100644 --- a/src/views/BrowserView.tsx +++ b/src/views/BrowserView.tsx @@ -16,16 +16,17 @@ export default function Browser() { const browserTabs = useRecoilValue(browserTabsState); useEffect(() => { - console.log('Open Browser Tabs', browserTabs.tabs.length); - }, [browserTabs.tabs.length]); + console.log('\n\n\n\n\n\n\n\n\n\n'); - useEffect(() => { - // console.log( - // 'Active and Previous Tab IDs', - // browserTabs.activeTabId, - // browserTabs.previousTabId, - // ); - // console.log('New tab', browserTabs.tabs[browserTabs.tabs.length - 1]); + console.log('\nbrowserTabs.tabs.length:', browserTabs.tabs.length); + + console.log( + '\nactiveTabId and previousTabId:', + browserTabs.activeTabId, + browserTabs.previousTabId, + ); + + console.log('\n\n\n\n\n\n\n\n\n\n'); }, [browserTabs]); return ( @@ -33,12 +34,8 @@ export default function Browser() { {browserTabs.tabs.map((browserTab) => { - const { tabMounted, tabId, tabActive } = browserTab; - return tabMounted ? ( - - - - ) : null; + const { tabId } = browserTab; + return ; })} @@ -47,22 +44,11 @@ export default function Browser() { ); } -interface BrowserTabProps { - active: boolean; -} - const View = styled.View` flex: 1; background-color: ${(props) => props.theme.colors.background}; `; -const BrowserTabContainer = styled.View` - display: ${(props) => (props.active ? 'flex' : 'none')}; - position: absolute; - top: 0; - right: 0; - bottom: 0; - left: 0; -`; + const KeyboardAvoidingView = styled.KeyboardAvoidingView` flex: 1; `; diff --git a/src/views/TabsView.tsx b/src/views/TabsView.tsx index de85b602..306f0b19 100644 --- a/src/views/TabsView.tsx +++ b/src/views/TabsView.tsx @@ -20,16 +20,17 @@ export default function Tabs() { const goBack = () => screenNavigation.goBack(); const _renderItem: any = ({ item }: { item: BrowserTabState }) => { - const { tabIndex, tabId, tabTitle, tabUriValue } = item; + const { tabId, tabTitle, tabUriValue } = item; return ( { setBrowserTabs(switchTab(tabId, browserTabs)); goBack(); }}> - {tabTitle.length ? tabTitle : '[No title]'} + {tabTitle ? tabTitle : '[No title]'} + {/* {tabTitle} */} {tabUriValue} @@ -74,9 +75,9 @@ export default function Tabs() { { - setBrowserTabs(newTab('https://metamask.com/', browserTabs)); + setBrowserTabs(newTab('https://metamask.io/', browserTabs)); }}> - Ext: Add New Tab + Add New Tab (MetaMask) {browserTabs.tabs.length ? (