From 7ac91eff2f012e92b2f4042555530af1c3de41c5 Mon Sep 17 00:00:00 2001 From: Shohieb Date: Wed, 28 Dec 2022 11:45:12 +0900 Subject: [PATCH] [MINI-5837] Apply state on toolbar (#237) * fix[MINI-5837] apply state on toolbar * fix[MINI-5837] handle when it's undefined * fix[MINI-5837] lint --- js-miniapp-sample/src/components/ToolBar.js | 14 +- js-miniapp-sample/src/routes.js | 142 ++++++++++++++------ 2 files changed, 110 insertions(+), 46 deletions(-) diff --git a/js-miniapp-sample/src/components/ToolBar.js b/js-miniapp-sample/src/components/ToolBar.js index d775eed23..4682a2e37 100644 --- a/js-miniapp-sample/src/components/ToolBar.js +++ b/js-miniapp-sample/src/components/ToolBar.js @@ -10,6 +10,7 @@ import MenuIcon from '@material-ui/icons/Menu'; import { connect } from 'react-redux'; import { useLocation, useNavigate, useParams } from 'react-router-dom'; +import { navLinks } from '../routes'; import Drawer from './Drawer'; const useStyles = makeStyles((theme) => ({ @@ -25,7 +26,6 @@ const useStyles = makeStyles((theme) => ({ })); type ToolBarProps = { - title: string, showDrawer: Boolean, actions: any, onShrinkToggle: Function, @@ -37,6 +37,14 @@ const ToolBar = (props: ToolBarProps) => { const classes = useStyles(); const [showDrawerState, setDrawer] = useState(props.showDrawer ?? false); + const location = useLocation(); + const [title, setTitle] = useState(''); + useEffect(() => { + const navLinkLabel: { navLink: string, label: string } = navLinks.find( + (item) => item.navLink === location.pathname + ) ?? { navLink: location.pathname, label: 'Sample MiniApp' }; + setTitle(navLinkLabel.label); + }, [location.pathname]); useEffect( () => { setDrawer(props.showDrawer); @@ -84,7 +92,7 @@ const ToolBar = (props: ToolBarProps) => { )} - {props.title} + {title}
{props.actions}
@@ -112,7 +120,7 @@ function withRouter(Component) { } const mapStateToProps = (state, props) => { - return { ...props, title: state.home.title }; + return { ...props }; }; export default connect(mapStateToProps)(withRouter(ToolBar)); diff --git a/js-miniapp-sample/src/routes.js b/js-miniapp-sample/src/routes.js index bd0c6040b..00605b60c 100644 --- a/js-miniapp-sample/src/routes.js +++ b/js-miniapp-sample/src/routes.js @@ -44,11 +44,67 @@ import UuidFetcher from './pages/uuid-sdk'; import WebLocation from './pages/web-location'; import WindowActions from './pages/window-actions'; +//default root location when using ios +const iosHomeNavLink = { navLink: '/index.html', label: 'Home' }; +//default root location when using android +const androidHomeNavLink = { navLink: '/miniapp/index.html', label: 'Home' } +//default supposed root location +//todo fix this +const homeNavLink = { navLink: '/', label: 'Home' }; +const landingNavLink = { navLink: '/landing', label: 'Home' }; +const localStorageNavLink = { navLink: '/local_storage', label: 'Local Storage' }; +const fetchUniqueIdNavLink = { navLink: '/fetch_id', label: 'Fetch Unique ID from SDK' }; +const inAppPurchaseNavLink = { navLink: '/inapp_purchases', label: 'InApp Purchases' }; +const deviceLocationNavLink = { navLink: '/device_location', label: 'Device Location' }; +const authTokenNavLink = { navLink: '/auth_token', label: 'Auth token from Mobile' }; +const userDetailNavLink = { navLink: '/user_detail', label: 'User Details' }; +const messageNavLink = { navLink: '/chatbot', label: 'Message' }; +const windowActionNavLink = { navLink: '/window_actions', label: 'Window Actions' }; +const uriSchemesNavLink = { navLink: '/uri_schemes', label: 'URI Schemes' }; +const eventListenerNavLink = { navLink: '/event_listener', label: 'Event Listener' }; +const mediaNavLink = { navLink: '/media', label: 'Media' }; +const shareNavLink = { navLink: '/share', label: 'Share' }; +const adsNavLink = { navLink: '/ads', label: 'Ads' }; +const cameraNavLink = { navLink: '/camera', label: 'Camera' }; +const fileDownloadNavLink = { navLink: '/file_download', label: 'File Download' }; +const fileUploadNavLink = { navLink: '/file_upload', label: 'File Upload' }; +const gifsNavLink = { navLink: '/gifs', label: "GIF's & WebP" }; +const secureStorageNavLink = { navLink: '/secure-storage', label: 'SecureStorage' }; +const closeAlertNavLink = { navLink: '/close-confirm-alert', label: 'Close Alert' }; +const universalBridgeNavLink = { navLink: '/universal-bridge', label: 'Universal Bridge' }; + +const navLinks = [ + iosHomeNavLink, + androidHomeNavLink, + homeNavLink, + landingNavLink, + localStorageNavLink, + fetchUniqueIdNavLink, + inAppPurchaseNavLink, + deviceLocationNavLink, + authTokenNavLink, + userDetailNavLink, + messageNavLink, + windowActionNavLink, + uriSchemesNavLink, + eventListenerNavLink, + mediaNavLink, + shareNavLink, + adsNavLink, + cameraNavLink, + fileDownloadNavLink, + fileUploadNavLink, + gifsNavLink, + secureStorageNavLink, + closeAlertNavLink, + universalBridgeNavLink, +]; + const homeItem = [ { icon: , - label: 'Home', - navLink: '/landing', + label: landingNavLink.label, + navLink: landingNavLink.navLink, element: , }, ]; @@ -56,122 +112,122 @@ const homeItem = [ const appItems = [ { icon: , - label: 'Local Storage', - navLink: '/local_storage', + label: localStorageNavLink.label, + navLink: localStorageNavLink.navLink, element: , }, { icon: , - label: 'Fetch Unique ID from SDK', - navLink: '/fetch_id', + label: fetchUniqueIdNavLink.label, + navLink: fetchUniqueIdNavLink.navLink, element: , }, { icon: , - label: 'InApp Purchases', - navLink: '/inapp_purchases', + label: inAppPurchaseNavLink.label, + navLink: inAppPurchaseNavLink.navLink, element: , }, { icon: , - label: 'Device Location', - navLink: '/device_location', + label: deviceLocationNavLink.label, + navLink: deviceLocationNavLink.navLink, element: , }, { icon: , - label: 'Auth token from Mobile', - navLink: '/auth_token', + label: authTokenNavLink.label, + navLink: authTokenNavLink.navLink, element: , }, { icon: , - label: 'User Details', - navLink: '/user_detail', + label: userDetailNavLink.label, + navLink: userDetailNavLink.navLink, element: , }, { icon: , - label: 'Message', - navLink: '/chatbot', + label: messageNavLink.label, + navLink: messageNavLink.navLink, element: , }, { icon: , - label: 'Window Actions', - navLink: '/window_actions', + label: windowActionNavLink.label, + navLink: windowActionNavLink.navLink, element: , }, { icon: , - label: 'URI Schemes', - navLink: '/uri_schemes', + label: uriSchemesNavLink.label, + navLink: uriSchemesNavLink.navLink, element: , }, { icon: , - label: 'Event Listener', - navLink: '/event_listener', + label: eventListenerNavLink.label, + navLink: eventListenerNavLink.navLink, element: , }, { icon: , - label: 'Media', - navLink: '/media', + label: mediaNavLink.label, + navLink: mediaNavLink.navLink, element: , }, { icon: , - label: 'Share', - navLink: '/share', + label: shareNavLink.label, + navLink: shareNavLink.navLink, element: , }, { icon: , - label: 'Ads', - navLink: '/ads', + label: adsNavLink.label, + navLink: adsNavLink.navLink, element: , }, { icon: , - label: 'Camera', - navLink: '/camera', + label: cameraNavLink.label, + navLink: cameraNavLink.navLink, element: , }, { icon: , - label: 'File Download', - navLink: '/file_download', + label: fileDownloadNavLink.label, + navLink: fileDownloadNavLink.navLink, element: , }, { icon: , - label: 'File Upload', - navLink: '/file_upload', + label: fileUploadNavLink.label, + navLink: fileUploadNavLink.navLink, element: , }, { icon: , - label: "GIF's & WebP", - navLink: '/gifs', + label: gifsNavLink.label, + navLink: gifsNavLink.navLink, element: , }, { icon: , - label: 'SecureStorage', - navLink: '/secure-storage', + label: secureStorageNavLink.label, + navLink: secureStorageNavLink.navLink, element: , }, { icon: , - label: 'Close Alert', - navLink: '/close-confirm-alert', + label: closeAlertNavLink.label, + navLink: closeAlertNavLink.navLink, element: , }, { icon: , - label: 'Universal Bridge', - navLink: '/universal-bridge', + label: universalBridgeNavLink.label, + navLink: universalBridgeNavLink.navLink, element: , }, ]; @@ -180,4 +236,4 @@ const navItems: Object[] = homeItem.concat( appItems.sort((a, b) => a.label.localeCompare(b.label)) ); -export { navItems }; +export { navItems, navLinks };