remove redux from image editor

microsoft · Sep 26, 2024 · 485effe · 485effe
1 parent ab3a9a1
commit 485effe
Show file tree

Hide file tree

Showing 27 changed files with 2,460 additions and 1,937 deletions.
diff --git a/webapp/src/assetEditor.tsx b/webapp/src/assetEditor.tsx
@@ -5,7 +5,7 @@ import * as React from "react";
 import * as ReactDOM from "react-dom";
 
 import { ImageFieldEditor } from "./components/ImageFieldEditor";
-import { setTelemetryFunction } from './components/ImageEditor/store/imageReducer';
+import { setTelemetryFunction } from './components/ImageEditor/state';
 import { IFrameEmbeddedClient } from "../../pxtservices/iframeEmbeddedClient";
 
 

diff --git a/webapp/src/components/ImageEditor/Alert.tsx b/webapp/src/components/ImageEditor/Alert.tsx
@@ -1,8 +1,5 @@
 import * as React from 'react';
-import { connect } from 'react-redux';
-import { ImageEditorStore } from './store/imageReducer';
-import { dispatchHideAlert } from './actions/dispatch';
-import { IconButton } from "./Button";
+import { hideAlert, ImageEditorContext } from './state';
 
 export interface AlertOption {
     label: string;
@@ -15,40 +12,28 @@ export interface AlertInfo {
     options?: AlertOption[];
 }
 
-interface AlertProps extends AlertInfo {
-    dispatchHideAlert: () => void;
-}
+export const Alert = (props: AlertInfo) => {
+    const { title, text, options } = props;
+
+    const { dispatch } = React.useContext(ImageEditorContext);
 
-class AlertImpl extends React.Component<AlertProps, {}> {
-    constructor(props: AlertProps) {
-        super(props);
+    const onCloseClick = () => {
+        dispatch(hideAlert());
     }
 
-    render() {
-        const { title, text, options, dispatchHideAlert } = this.props;
-        return  <div className="image-editor-alert-container" role="region" onClick={dispatchHideAlert}>
+    return (
+        <div className="image-editor-alert-container" role="region" onClick={onCloseClick}>
             <div className="image-editor-alert" role="dialog">
                 <div className="title">
                     <span className="ms-Icon ms-Icon--Warning"></span>
                     <span>{title}</span>
-                    <span className="ms-Icon ms-Icon--Cancel" role="button" onClick={dispatchHideAlert}></span>
+                    <span className="ms-Icon ms-Icon--Cancel" role="button" onClick={onCloseClick}></span>
                 </div>
                 <div className="text">{text}</div>
                 {options && <div className="options">
                     { options.map((opt, index) => <div key={index} className="button" role="button" onClick={opt.onClick}>{opt.label}</div>) }
                 </div>}
             </div>
         </div>
-    }
-}
-
-function mapStateToProps({ editor }: ImageEditorStore, ownProps: any) {
-    if (!editor) return {};
-    return ownProps;
-}
-
-const mapDispatchToProps = {
-    dispatchHideAlert
-};
-
-export const Alert = connect(mapStateToProps, mapDispatchToProps)(AlertImpl);
+    );
+}