Merge pull request #3 from DevExpress-Examples/add-react-example

Added React example

React/src/App.css

@@ -1,4 +1,24 @@
 .main {
   margin: 50px;
   width: 90vh;
-}
+}
+
+#wrapper #file-manager {
+  visibility: hidden;
+}
+
+#wrapper #message-box {
+  display: none;
+}
+
+#wrapper.show-widget #file-manager {
+  visibility: visible;
+}
+
+#wrapper.show-message #file-manager {
+  display: none;
+}
+
+#wrapper.show-message #message-box {
+  display: block;
+}

React/src/App.tsx

@@ -1,16 +1,62 @@
-import React, { useCallback, useState } from 'react';
+import React, { useCallback, useState, useEffect } from 'react';
+import FileManager, { Permissions } from 'devextreme-react/file-manager';
+import RemoteFileSystemProvider from 'devextreme/file_management/remote_provider';
+import { LoadPanel } from 'devextreme-react/load-panel';
 import './App.css';
 import 'devextreme/dist/css/dx.material.blue.light.compact.css';
-import Button from 'devextreme-react/button';
+import { PositionConfig } from 'devextreme/animation/position';
+
+const baseUrl = 'https://localhost:7049/api/';
+const fileSystemProvider = new RemoteFileSystemProvider({
+  endpointUrl: `${baseUrl}file-manager-azure`,
+});
+
+const allowedFileExtensions: string[] = [];
+const loadPanelPosition: PositionConfig = { of: '#file-manager' };
 
 function App(): JSX.Element {
-  var [count, setCount] = useState<number>(0);
-  const clickHandler = useCallback(() => {
-    setCount((prev) => prev + 1);
-  }, [setCount]);
+  const [wrapperClassName, setWrapperClassName] = useState('');
+  const [loadPanelVisible, setLoadPanelVisible] = useState(true);
+  const checkAzureStatus = useCallback(() => {
+    fetch(`${baseUrl}file-manager-azure-status?widgetType=fileManager`)
+      .then((response) => {
+        if (!response.ok) {
+          throw new Error('Network response was not ok');
+        }
+        return response.json();
+      })
+      .then((result) => {
+        const className = result.active ? 'show-widget' : 'show-message';
+        setWrapperClassName(className);
+        setLoadPanelVisible(false);
+      })
+      .catch((error) => {
+        /* eslint-disable no-console */
+        console.error('Error fetching Azure status:', error);
+        /* eslint-enable no-console */
+      });
+  }, []);
+
+  useEffect(() => {
+    checkAzureStatus();
+  }, [checkAzureStatus]);
+
   return (
-    <div className="main">
-      <Button text={`Click count: ${count}`} onClick={clickHandler} />
+    <div id="wrapper" className={wrapperClassName}>
+      <LoadPanel visible={loadPanelVisible} position={loadPanelPosition} />
+      <FileManager id="file-manager" fileSystemProvider={fileSystemProvider} allowedFileExtensions={allowedFileExtensions}>
+        {/* uncomment the code below to enable file/directory management */}
+        <Permissions
+          // create={true}
+          // copy={true}
+          // move={true}
+          // delete={true}
+          // rename={true}
+          // upload={true}
+          download={true}>
+        </Permissions>
+      </FileManager>
+      <div id="message-box">To run the demo, specify your Azure storage account name, access key and container name in the <strong>appsettings.json</strong> file.</div>
     </div>
   );
 }