Initial commit

src/events/mod-tools/ModToolsEvent.ts

@@ -0,0 +1,8 @@
+import { NitroEvent } from 'nitro-renderer';
+
+export class ModToolsEvent extends NitroEvent
+{
+    public static SHOW_MOD_TOOLS: string = 'MTE_SHOW_MOD_TOOLS';
+    public static HIDE_MOD_TOOLS: string = 'MTE_HIDE_MOD_TOOLS';
+    public static TOGGLE_MOD_TOOLS: string = 'MTE_TOGGLE_MOD_TOOLS';
+}

src/views/mod-tools/ModToolsView.tsx

@@ -0,0 +1,59 @@
+import { FC, useCallback, useEffect, useReducer, useState } from 'react';
+import { ModToolsEvent } from '../../events/mod-tools/ModToolsEvent';
+import { useUiEvent } from '../../hooks/events/ui/ui-event';
+import { NitroCardContentView, NitroCardTabsView, NitroCardView } from '../../layout';
+import { NitroCardSimpleHeaderView } from '../../layout/card/simple-header';
+import { LocalizeText } from '../../utils/LocalizeText';
+import { ModToolsContextProvider } from './context/ModToolsContext';
+import { ModToolsViewProps } from './ModToolsView.types';
+import { initialModTools, ModToolsReducer } from './reducers/ModToolsReducer';
+
+export const ModToolsView: FC<ModToolsViewProps> = props =>
+{
+    const [ isVisible, setIsVisible ] = useState(false);
+    const [ modToolsState, dispatchModToolsState ] = useReducer(ModToolsReducer, initialModTools);
+    
+    const onModToolsEvent = useCallback((event: ModToolsEvent) =>
+    {
+        switch(event.type)
+        {
+            case ModToolsEvent.SHOW_MOD_TOOLS:
+                setIsVisible(true);
+                return;
+            case ModToolsEvent.HIDE_MOD_TOOLS:
+                setIsVisible(false);
+                return;   
+            case ModToolsEvent.TOGGLE_MOD_TOOLS:
+                setIsVisible(value => !value);
+                return;
+        }
+    }, []);
+
+    useUiEvent(ModToolsEvent.SHOW_MOD_TOOLS, onModToolsEvent);
+    useUiEvent(ModToolsEvent.HIDE_MOD_TOOLS, onModToolsEvent);
+    useUiEvent(ModToolsEvent.TOGGLE_MOD_TOOLS, onModToolsEvent);
+
+    useEffect(() =>
+    {
+        if(!isVisible) return;
+    }, [ isVisible ]);
+
+    return (
+        <ModToolsContextProvider value={ { modToolsState, dispatchModToolsState } }>
+            { isVisible &&
+                <NitroCardView className="nitro-mod-tools">
+                    <NitroCardSimpleHeaderView headerText={ LocalizeText('ModTools.title') } onCloseClick={ event => setIsVisible(false) } />
+                    <NitroCardTabsView>
+                    </NitroCardTabsView>
+                    <NitroCardContentView>
+                        <div className="row h-100">
+                            <div className="col-3">
+                            </div>
+                            <div className="col">
+                            </div>
+                        </div>
+                    </NitroCardContentView>
+                </NitroCardView> }
+        </ModToolsContextProvider>
+    );
+}

src/views/mod-tools/ModToolsView.types.ts

@@ -0,0 +1,2 @@
+export interface ModToolsViewProps
+{}

src/views/mod-tools/context/ModToolsContext.tsx

@@ -0,0 +1,14 @@
+import { createContext, FC, useContext } from 'react';
+import { IModToolsContext, ModToolsContextProps } from './ModToolsContext.types';
+
+const ModToolsContext = createContext<IModToolsContext>({
+    modToolsState: null,
+    dispatchModToolsState: null
+});
+
+export const ModToolsContextProvider: FC<ModToolsContextProps> = props =>
+{
+    return <ModToolsContext.Provider value={ props.value }>{ props.children }</ModToolsContext.Provider>
+}
+
+export const useModToolsContext = () => useContext(ModToolsContext);

src/views/mod-tools/context/ModToolsContext.types.ts

@@ -0,0 +1,13 @@
+import { Dispatch, ProviderProps } from 'react';
+import { IModToolsAction, IModToolsState } from '../reducers/ModToolsReducer';
+
+export interface IModToolsContext
+{
+    modToolsState: IModToolsState;
+    dispatchModToolsState: Dispatch<IModToolsAction>;
+}
+
+export interface ModToolsContextProps extends ProviderProps<IModToolsContext>
+{
+
+}

src/views/mod-tools/reducers/ModToolsReducer.tsx

@@ -0,0 +1,30 @@
+import { Reducer } from 'react';
+
+export interface IModToolsState
+{
+
+}
+
+export interface IModToolsAction
+{
+    type: string;
+    payload: {
+    }
+}
+
+export class ModToolsActions
+{
+
+}
+
+export const initialModTools: IModToolsState = {
+}
+
+export const ModToolsReducer: Reducer<IModToolsState, IModToolsAction> = (state, action) =>
+{
+    switch(action.type)
+    {
+        default:
+            return state;
+    }
+}