diff --git a/src/app-components/BrowserApp.tsx b/src/app-components/BrowserApp.tsx new file mode 100644 index 0000000..1559eff --- /dev/null +++ b/src/app-components/BrowserApp.tsx @@ -0,0 +1,122 @@ +import { FormEvent, useRef, useState } from 'react' +import { GenericAppProps } from '../types/genericAppProps' +import { useHandleClose } from '../hooks/useHandleClose' +import { + BrowserHistoryEntry, + useBrowserHistory, +} from '../hooks/useBrowserHistory' +import { QueueListIcon } from '@heroicons/react/24/outline' + +type ViewState = 'browser' | 'history' + +export const BrowserApp = ({ + shouldClose, + onCloseConfirm, +}: GenericAppProps) => { + const [address, setAddress] = useState('https://www.google.com/search?igu=1') + // TODO: Should be handeled by tabs later on + const [viewState, setViewState] = useState('browser') + const [addressInputVal, setAddressInputVal] = useState( + 'https://www.google.com/search?igu=1', + ) + const history = useBrowserHistory() + + const iframeRef = useRef(null) + + useHandleClose(shouldClose, () => {}, onCloseConfirm) + + const handleClick = async () => { + updateAddress() + } + + const updateAddress = () => { + if (!addressInputVal) { + return + } + + let sanitizedAddress = addressInputVal + if (addressInputVal.slice(0, 5) !== 'https') { + sanitizedAddress = 'https://' + addressInputVal + } + + // Only add new entry if address changed + if (sanitizedAddress !== address) { + history.addEntry(sanitizedAddress) + } + + setAddress(sanitizedAddress) + setViewState('browser') + } + + const handleHistoryButtonClick = () => { + if (viewState !== 'history') { + setViewState('history') + } + } + + const handleSubmit = (event: FormEvent) => { + event.preventDefault() // Prevent page reload + + updateAddress() + iframeRef.current?.contentWindow?.focus() + } + + const handleHistoryEntryClick = (url: string) => { + setAddress(url) + setViewState('browser') + } + + return ( +
+
+
handleSubmit(e)} className="w-3/4"> + setAddressInputVal(event.target.value)} + className="w-full rounded-full p-2" + /> +
+ + +
+ {viewState === 'history' && ( + + )} + {viewState === 'browser' && ( +