apply api

src/App.js

@@ -1,55 +1,88 @@
-import { useMemo, useState } from 'react';
 import './App.css';
 import Pane from './Components/pane';
 import DeviceFrame from './Components/deviceFrame';
 import waterMarkPng from './images/water-mark.png'
+import React from 'react';
 
-var mockProjects = [{"Name":"AN_战斗模拟","OldSlectType":"1|1|1","HtmlUrl":"PlayableData/AN_战斗模拟/index.html","TextObjStr":{"TopText":"无|无|无","MiddText":"无|无|无","CentText":"无|无|无"}},{"Name":"AN_美女被困","OldSlectType":"1|3|1","HtmlUrl":"PlayableData/AN_美女被困/index.html","TextObjStr":{"TopText":"引导点击人物|引导下棋|无","MiddText":"无|无|无","CentText":"获得钥匙商店|获得鸡腿商店|胜利失败"}},{"Name":"AN_解开锁链","OldSlectType":"1|3|1","HtmlUrl":"PlayableData/AN_解开锁链/index.html","TextObjStr":{"TopText":"引导点击人物|引导下棋|无","MiddText":"无|无|无","CentText":"第一把锁商店|第二把锁商店|全部锁胜利失败"}},{"Name":"GOG_DIY帆船","OldSlectType":"1|2|2","HtmlUrl":"PlayableData/GOG_DIY帆船/index.html","TextObjStr":{"TopText":"黑胡子|女海盗|铁面男","MiddText":"商店|结算|无","CentText":"只选船舵|全部选择|无"}},{"Name":"GOG_DIY飞艇","OldSlectType":"2|2|2","HtmlUrl":"PlayableData/GOG_DIY飞艇/index.html","TextObjStr":{"TopText":"黑胡子|美人鱼|无立绘","MiddText":"商店|结算|无","CentText":"只选飞艇|全部选择|无"}},{"Name":"GOG_抢滩登陆","OldSlectType":"1|1|1","HtmlUrl":"PlayableData/GOG_抢滩登陆/index.html","TextObjStr":{"TopText":"有立绘|无立绘|无","MiddText":"胜利失败|跳转商店|无","CentText":"第二关|第一关|无"}},{"Name":"GOG_潜入营救","OldSlectType":"2|1|2","HtmlUrl":"PlayableData/GOG_潜入营救/index.html","TextObjStr":{"TopText":"立辉|无立辉|无","MiddText":"结算|商店|无","CentText":"胜利失败|杀一层|杀二层"}},{"Name":"GOG_船舱杀敌","OldSlectType":"1|1|1","HtmlUrl":"PlayableData/GOG_船舱杀敌/index.html","TextObjStr":{"TopText":"无|无|无","MiddText":"无|无|无","CentText":"无|无|无"}},{"Name":"KOA_救治组装","OldSlectType":"1|1|1","HtmlUrl":"PlayableData/KOA_救治组装/index.html","TextObjStr":{"TopText":"无|无|无","MiddText":"无|无|无","CentText":"无|无|无"}},{"Name":"SS_页游换装备","OldSlectType":"2|1|1","HtmlUrl":"PlayableData/SS_页游换装备/index.html","TextObjStr":{"TopText":"无|无|无","MiddText":"无|无|无","CentText":"无|无|无"}}]
+class App extends React.Component {
+  constructor() {
+    super();
+    this.state = {
+      mode: 'normal',
+      projects: [],
+      selectedProject: {},
+      device: 'android-h',
+      htmlUrl: ''
+    }
+  }
+  componentDidMount() {
+    this.fetchData();
+  }
 
-function App() {
-  var [mode, setMode] = useState("normal")
-  var [projects, setProjects] = useState([])
-  var [selectedProject, setSelectedProject] = useState({})
-  var [device, setDevice] = useState('android-h')
+  setSelectedProject(selected) {
+    this.setState({
+      selectedProject: selected
+    });
+  }
 
-  Promise.resolve().then(() => {
-    setProjects(mockProjects)
-  })
+  setDevice(selected) {
+    this.setState({
+      device: selected
+    });
+  }
 
-  var htmlUrl = useMemo(() => selectedProject ? selectedProject.HtmlUrl : '', [selectedProject])
+  setMode(mode) {
+    this.setState({
+      mode: mode
+    });
+  }
 
-  // fetch('http://123.56.161.61:1157/home/GetServerJsonData').then((v) => console.log(v))
+  fetchData() {
+    fetch('http://123.56.161.61:1157/home/GetServerJsonData', {
+      headers: {
+        'Content-Type': 'application/json'
+      },
+    }).then((response) =>
+      response.json()
+      .then(projects => this.setState({
+        projects
+      })));
+  }
 
-  return (
-    <div className="App">
-      <Pane
-        mode={mode}
-        onModeChange={(_mode) => setMode(_mode) }
-        projects={projects}
-        onProjectSelect={(project) => {
-          console.log('xxx', project)
-          setSelectedProject(project)
-        }}
-        onDeviceChange={(_device) => setDevice(_device)}/>
-      <div style={{
-        display: 'flex',
-        flex: 1,
-        alignItems: 'center',
-        backgroundImage: `url('${waterMarkPng}')`,
-        backgroundPositionX: 'right',
-        backgroundPositionY: 'bottom',
-        backgroundRepeat: 'no-repeat'
-      }}>
-      {
-        mode === "normal"
-        ? <DeviceFrame
-            htmlUrl={htmlUrl}
-            device={device}/>
-        : <div>setting content</div>
-      }
+  render() {
+    var { mode, device, projects, selectedProject } = this.state;
+
+    return (
+      <div className="App">
+        <Pane
+          mode={mode}
+          onModeChange={(_mode) => this.setMode(_mode) }
+          projects={projects}
+          onProjectSelect={(project) => {
+            console.log(project)
+            this.setSelectedProject(project)
+          }}
+          onDeviceChange={(_device) => this.setDevice(_device)}/>
+        <div style={{
+          display: 'flex',
+          flex: 1,
+          alignItems: 'center',
+          backgroundImage: `url('${waterMarkPng}')`,
+          backgroundPositionX: 'right',
+          backgroundPositionY: 'bottom',
+          backgroundRepeat: 'no-repeat'
+        }}>
+        {
+          mode === "normal"
+          ? <DeviceFrame
+              htmlUrl={selectedProject.HtmlUrl}
+              device={device}/>
+          : <div>setting content</div>
+        }
+        </div>
       </div>
-    </div>
-  );
+    );
+  }
 }
 
 export default App;