Edge
This is a React component that represents a browser window. The component has an address bar, a navigation bar, and an iframe element that displays a web page. The user can type a URL into the address bar or click on one of the navigation bar buttons to load a page.
The component uses Redux to manage state. It uses the useSelector hook to retrieve state from the store, and the useDispatch hook to dispatch actions to the store.
The component also uses the useState hook to manage its own state. It keeps track of the URL that is currently displayed, whether the user is typing in the address bar, and the user's browsing history.
The component defines several functions to handle events. The action function is called when the user clicks on a navigation bar button. It sets the URL to the one associated with the button. If the user types a URL into the address bar, the typing function is called to update the URL state. If the URL is not valid, it defaults to a Bing search.
The component renders a ToolBar component and a div with class windowScreen. The windowScreen div contains an overTool div and a restWindow div. The overTool div displays the navigation bar and the restWindow div contains the iframe element and the address bar.
The address bar contains an Icon component that displays a left arrow. When clicked, it calls the action function with a payload of 4, which sets the URL to the one in the user's browsing history.