setup and state changes for template explorer modal

Author: ci-bot

apps/remix-ide/src/app/plugins/notification.tsx

@@ -38,6 +38,7 @@ export class NotificationPlugin extends Plugin implements MethodApi<INotificatio
   }
 
   async templateExplorer(args: TemplateExplorerModal) {
+    console.log('templateExplorer', args)
     return this.dispatcher.templateExplorer(args)
   }
 

libs/remix-ui/app/src/lib/remix-app/components/modals/dialogViewPlugin.tsx

@@ -3,11 +3,11 @@ import { AppContext } from '../../context/context'
 import { useDialogDispatchers } from '../../context/provider'
 
 const DialogViewPlugin = () => {
-  const { modal, alert, toast } = useDialogDispatchers()
+  const { modal, alert, toast, templateExplorer } = useDialogDispatchers()
   const app = useContext(AppContext)
 
   useEffect(() => {
-    app.modal.setDispatcher({ modal, alert, toast })
+    app.modal.setDispatcher({ modal, alert, toast, templateExplorer })
   }, [])
   return <></>
 }

libs/remix-ui/app/src/lib/remix-app/context/provider.tsx

@@ -14,7 +14,7 @@ declare global {
 }
 
 export const ModalProvider = ({ children = [], reducer = modalReducer, initialState = ModalInitialState } = {}) => {
-  const [{ modals, toasters, focusModal, focusToaster }, dispatch] = useReducer(reducer, initialState)
+  const [{ modals, toasters, focusModal, focusToaster, focusTemplateExplorer }, dispatch] = useReducer(reducer, initialState)
 
   const onNextFn = async () => {
     dispatch({
@@ -118,7 +118,7 @@ export const ModalProvider = ({ children = [], reducer = modalReducer, initialSt
 
   return (
     <dispatchModalContext.Provider value={{ modal, toast, alert, handleHideModal, handleToaster, templateExplorer }}>
-      <modalContext.Provider value={{ modals, toasters, focusModal, focusToaster }}>{children}</modalContext.Provider>
+      <modalContext.Provider value={{ modals, toasters, focusModal, focusToaster, focusTemplateExplorer }}>{children}</modalContext.Provider>
     </dispatchModalContext.Provider>
   )
 }
@@ -141,3 +141,11 @@ export const useDialogs = () => {
 export const useDialogDispatchers = () => {
   return React.useContext(dispatchModalContext)
 }
+
+export function defaultFocusTemplateExplorer () {
+  return (
+    <>
+      <p className="fs-3 text-center">Template Explorer</p>
+    </>
+  )
+}

libs/remix-ui/app/src/lib/remix-app/interface/index.ts

@@ -43,6 +43,7 @@ export interface ModalState {
     toasters: {message: (string | JSX.Element), timestamp: number }[],
     focusModal: AppModal,
     focusToaster: {message: (string | JSX.Element), timestamp: number }
+    focusTemplateExplorer: TemplateExplorerModal
 }
 
 export interface forceChoiceModal {

libs/remix-ui/app/src/lib/remix-app/reducer/modals.ts

@@ -83,5 +83,9 @@ export const modalReducer = (state: ModalState = ModalInitialState, action: Moda
       return { ...state, toasters: []}
     }
   }
+
+  case modalActionTypes.setTemplateExplorer: {
+    return { ...state, focusTemplateExplorer: action.payload }
+  }
   }
 }

libs/remix-ui/app/src/lib/remix-app/state/modals.ts

@@ -1,4 +1,6 @@
+import { Template, TemplateGroup } from '@remix-ui/workspace'
 import { ModalState } from '../interface'
+import { defaultFocusTemplateExplorer } from '../context/provider'
 
 export const ModalInitialState: ModalState = {
   modals: [],
@@ -15,5 +17,25 @@ export const ModalInitialState: ModalState = {
     cancelFn: () => { },
     showCancelIcon: false
   },
-  focusToaster: { message: '', timestamp: 0 }
+  focusToaster: { message: '', timestamp: 0 },
+  focusTemplateExplorer: {
+    id: '',
+    hide: true,
+    title: '',
+    message: defaultFocusTemplateExplorer(),
+    validationFn: () => { return { valid: true, message: '' } },
+    okLabel: '',
+    okFn: () => { },
+    cancelLabel: '',
+    cancelFn: () => { },
+    showCancelIcon: false,
+    preventBlur: false,
+    placeholderText: '',
+    workspaceName: '',
+    modifyWorkspaceName: false,
+    workspaceDescription: '',
+    workspaceTemplateOptions: {},
+    workspaceTemplateGroup: {} as TemplateGroup,
+    workspaceTemplate: {} as Template,
+  }
 }

libs/remix-ui/home-tab/src/lib/remix-ui-home-tab.tsx

@@ -77,6 +77,18 @@ export const RemixUiHomeTab = (props: RemixUiHomeTabProps) => {
   //   return (<></>)
   // }
 
+  const openTemplateExplorer = async () => {
+    console.log('openTemplateExplorer')
+    await plugin.call('notification', 'templateExplorer', {
+      id: 'templateExplorer',
+      title: 'Explore all templates',
+      message: <div>Explore all templates</div>,
+      okLabel: 'Explore all templates',
+      okFn: () => {}
+    })
+    _paq.push(['trackEvent', 'hometab', 'header', 'Explore all templates'])
+  }
+
   return (
     <div className="d-flex flex-column w-100" data-id="remixUIHTAll">
       <ThemeContext.Provider value={state.themeQuality}>
@@ -85,6 +97,7 @@ export const RemixUiHomeTab = (props: RemixUiHomeTabProps) => {
             <div className="d-flex w-100 m-3 justify-content-end">
               <button className="btn btn-secondary btn-md me-3" onClick={startLearnEth}><i className="fa-solid fa-book me-1"></i><FormattedMessage id="home.startLearning" /></button>
               <button data-id="landingPageImportFromTemplate" className="btn btn-primary btn-md me-2" onClick={openTemplateSelection}><i className="fa-solid fa-plus me-1"></i><FormattedMessage id="home.createNewWorkspace" /></button>
+              <button className="btn btn-secondary btn-md me-3" onClick={openTemplateExplorer}><i className="fa-solid fa-book me-1"></i>Open Template Explorer</button>
             </div>
             <div className="col-lg-8 col-xl-5 col-sm-12 mb-4">
               <HomeTabTitle />