Merge pull request #600 from Codeinwp/feat/dam

DAM Media modal and dashboard page

assets/src/parts/Main.js → assets/src/dashboard/parts/Main.js

@@ -3,7 +3,7 @@
  */
 import { useSelect } from '@wordpress/data';
 
-import { useState } from '@wordpress/element';
+import { useEffect, useState } from '@wordpress/element';
 
 /**
  * Internal dependencies.
@@ -14,9 +14,24 @@ import ConnectLayout from './connect';
 import ConnectingLayout from './connecting';
 import ConnectedLayout from './connected';
 import Footer from './Footer';
+import { highlightSidebarLink } from '../utils/helpers';
 
 const Main = () => {
-	const [ tab, setTab ] = useState( 'dashboard' );
+	const allowedTabs = [ 'dashboard', 'settings', 'help' ];
+	const hash = window.location.hash.replace( '#', '' );
+	let defaultTab = allowedTabs.includes( hash ) ? hash : 'dashboard';
+
+	const [ tab, setTab ] = useState( defaultTab );
+
+	const switchToSettings = ( e ) => {
+		e.preventDefault();
+		setTab( 'settings' );
+	};
+
+	const switchToDashboard = ( e ) => {
+		e.preventDefault();
+		setTab( 'dashboard' );
+	};
 
 	const {
 		showDisconnect,
@@ -39,6 +54,41 @@ const Main = () => {
 		};
 	});
 
+
+	useEffect( () => {
+		if ( ! isConnected ) {
+			return;
+		}
+		window.location.hash = `#${ tab }`;
+		highlightSidebarLink();
+	}, [ tab ]);
+
+	useEffect( () => {
+
+		if ( ! isConnected ) {
+			return;
+		}
+
+		const dashLink = document.querySelector( 'a[href*="page=optimole"]' );
+		const settingsLink = document.querySelector( 'a[href*="page=optimole#settings"]' );
+
+		if ( ! dashLink || ! settingsLink ) {
+			return;
+		}
+
+		dashLink.addEventListener( 'click', switchToDashboard );
+		settingsLink.addEventListener( 'click', switchToSettings );
+
+		return () => {
+			if ( ! dashLink || ! settingsLink ) {
+				return;
+			}
+			dashLink.removeEventListener( 'click', switchToDashboard );
+			settingsLink.removeEventListener( 'click', switchToSettings );
+		};
+	}, []);
+
+
 	return (
 		<>
 			<Header

assets/src/parts/connected/dashboard/LastImages.js → assets/src/dashboard/parts/connected/dashboard/LastImages.js

@@ -138,7 +138,7 @@ const LastImages = () => {
 
 			{ ( isInitialLoading && ! isLoaded ) && (
 				<div className="flex items-center flex-col py-2">
-					<p class="font-semibold">{ optimoleDashboardApp.strings.latest_images.loading_latest_images }</p>
+					<p className="font-semibold">{ optimoleDashboardApp.strings.latest_images.loading_latest_images }</p>
 					<progress max={ maxTime } value={ timer } />
 				</div>
 			) }

assets/src/parts/connected/settings/index.js → assets/src/dashboard/parts/connected/settings/index.js

@@ -21,6 +21,7 @@ import {
 	sampleRate,
 	saveSettings
 } from '../../../utils/api';
+import { toggleDamSidebarLink } from '../../../utils/helpers';
 
 const Settings = ({
 	tab,
@@ -29,7 +30,8 @@ const Settings = ({
 	const {
 		siteSettings,
 		isLoading,
-		extraVisits
+		extraVisits,
+		damEnabled
 	} = useSelect( select => {
 		const {
 			getSiteSettings,
@@ -42,6 +44,7 @@ const Settings = ({
 		return {
 			siteSettings,
 			extraVisits: siteSettings['banner_frontend'],
+			damEnabled: siteSettings['cloud_images'],
 			isLoading: isLoading(),
 			queryArgs: getQueryArgs()
 		};
@@ -59,6 +62,10 @@ const Settings = ({
 		});
 	}, [ extraVisits ]);
 
+	useEffect( () => {
+		toggleDamSidebarLink( 'enabled' === damEnabled );
+	}, [ damEnabled ]);
+
 	useEffect( () => {
 		const visits = localStorage.getItem( 'optimole_settings_visits' );
 

assets/src/utils/api.js → assets/src/dashboard/utils/api.js

@@ -9,6 +9,7 @@ import {
 } from '@wordpress/data';
 
 import { addQueryArgs } from '@wordpress/url';
+import { toggleDashboardSidebarSubmenu } from './helpers';
 
 const {
 	setIsConnected,
@@ -99,6 +100,7 @@ export const registerAccount = ( data, callback = () => {}) => {
 				setUserData( response.data );
 				setAvailableApps( response.data );
 				sendOnboardingImages();
+				toggleDashboardSidebarSubmenu( true );
 			}
 
 			if ( callback ) {
@@ -145,6 +147,7 @@ export const connectAccount = ( data, callback = () => {}) => {
 				}
 
 				sendOnboardingImages();
+				toggleDashboardSidebarSubmenu( true );
 
 				console.log( '%c OptiMole API connection successful.', 'color: #59B278' );
 
@@ -187,6 +190,7 @@ export const disconnectAccount = () => {
 				setIsConnected( false );
 				sethasDashboardLoaded( false );
 				setShowDisconnect( false );
+				toggleDashboardSidebarSubmenu( false );
 				console.log( '%c Disconnected from OptiMole API.', 'color: #59B278' );
 			} else {
 				console.error( response );

assets/src/dashboard/utils/helpers.js

@@ -0,0 +1,117 @@
+const links = window.optimoleDashboardApp.submenu_links;
+
+const toggleDamSidebarLink = ( show = true ) => {
+
+	const { dam_url, strings } = window.optimoleDashboardApp;
+	const { cloud_library } = strings;
+
+	const existingPage = document.querySelector( 'a[href*="page=optimole-dam"]' );
+
+	// Bail on first call when dashboard is loaded.
+	if ( ! show && ! existingPage ) {
+		return;
+	}
+
+	// Remove the DAM link.
+	if ( ! show ) {
+		if ( ! existingPage ) {
+			return;
+		}
+		existingPage.style.display = 'none';
+
+		return;
+	}
+
+	if ( existingPage ) {
+		existingPage.style = {};
+		return;
+	}
+
+	// Create a new link and add it to the menu.
+	const li = document.createElement( 'li' );
+	const a = document.createElement( 'a' );
+
+	li.appendChild( a );
+	a.href = dam_url;
+	a.innerHTML = cloud_library;
+
+	const existingSubmenu = document.querySelector( '#toplevel_page_optimole ul' );
+	if ( ! existingSubmenu ) {
+		return;
+	}
+
+	existingSubmenu.insertBefore( li, existingSubmenu.firstChild );
+};
+
+const highlightSidebarLink = () => {
+	links.forEach( ( link ) => {
+		const existingLink = document.querySelector( `a[href="${link.href}"]` );
+
+		if ( ! existingLink ) {
+			return;
+		}
+
+		const parent = existingLink.parentNode;
+
+		if ( link.hash && link.hash === window.location.hash ) {
+			existingLink.classList.add( 'current' );
+			parent.classList.add( 'current' );
+			return;
+		}
+
+		existingLink.classList.remove( 'current' );
+		parent.classList.remove( 'current' );
+	});
+};
+
+const toggleDashboardSidebarSubmenu = ( show = true ) => {
+	console.log( '%c toggleDashboardSidebarSubmenu', 'color: #fff; background: #f00; font-size: 16px; padding: 4px 8px; border-radius: 4px;' );
+
+	const topLevel = document.querySelector( 'li#toplevel_page_optimole' );
+	let existingList = document.querySelector( 'li#toplevel_page_optimole .wp-submenu' );
+
+	if ( ! existingList ) {
+		existingList = document.createElement( 'ul' );
+		existingList.classList.add( 'wp-submenu', 'wp-submenu-wrap' );
+		topLevel.classList.add( 'wp-has-submenu', 'wp-has-current-submenu', 'wp-menu-open' );
+
+		topLevel.appendChild( existingList );
+	}
+
+	// Hiding it - display: none;
+	if ( ! show ) {
+		existingList.style.display = 'none';
+
+		return;
+	}
+
+
+	links.forEach( ( link ) => {
+		const existingLink = document.querySelector( `li#toplevel_page_optimole a[href="${link.href}"]` );
+
+		if ( existingLink ) {
+			return;
+		}
+
+		const li = document.createElement( 'li' );
+		const a = document.createElement( 'a' );
+
+		a.href = link.href;
+		a.innerHTML = link.text;
+
+		li.appendChild( a );
+
+		if ( link.hash && link.hash === window.location.hash ) {
+			li.classList.add( 'current' );
+			a.classList.add( 'current' );
+		}
+
+		existingList.appendChild( li );
+	});
+
+	existingList.style.display = 'block';
+};
+
+window.x = toggleDashboardSidebarSubmenu;
+
+export { toggleDamSidebarLink, highlightSidebarLink, toggleDashboardSidebarSubmenu };

assets/src/media/admin-page.js

@@ -0,0 +1,35 @@
+import './scss/admin-page.scss';
+
+const { optmlAdminPage } = window;
+
+const { siteUrl } = optmlAdminPage;
+const iframe = document.getElementById( 'om-dam' );
+
+iframe.addEventListener( 'load', function() {
+	document.querySelector( '.om-dam-loader' ).style.display = 'none';
+	iframe.style.display = '';
+});
+
+window.addEventListener( 'message', function( event ) {
+	if ( ! event.data ) {
+		return;
+	}
+
+	if ( ! event.data.type ) {
+		return;
+	}
+
+	if ( 'om-dam' !== event.data.type ) {
+		return;
+	}
+
+	if ( ! event.data.action ) {
+		return;
+	}
+
+	if ( 'getUrl' !== event.data.action ) {
+		return;
+	}
+
+	iframe.contentWindow.postMessage({ siteUrl, type: 'om-dam', context: 'browse' }, '*' );
+});