Use oss as service

package.json

@@ -10,6 +10,7 @@
     "@testing-library/jest-dom": "^5.16.1",
     "@testing-library/react": "^12.1.2",
     "@testing-library/user-event": "^13.5.0",
+    "ali-oss": "^6.17.1",
     "axios": "^0.24.0",
     "localstorage-slim": "^2.2.0",
     "qrcode": "^1.5.0",

src/App.js

@@ -1,4 +1,6 @@
 import './App.css';
+import * as Utils from './utils'
+import * as ProjectApi from './apis/projectApi'
 import Pane from './Components/pane';
 import DeviceFrame from './Components/deviceFrame';
 import waterMarkPng from './images/water-mark.png'
@@ -8,7 +10,6 @@ import QrCode from 'qrcode'
 import { BaseUrl } from './constants';
 import { getProjectSettingValue, setProjectSetting } from './storage';
 
-var project = "";
 class App extends React.Component {
   constructor() {
     super();
@@ -16,6 +17,7 @@ class App extends React.Component {
       mode: 'normal',
       projects: [],
       selectedProject: {},
+      selectedProjectName: '',
       device: 'android-h',
       htmlUrl: '',
       dataUrl: '',
@@ -51,10 +53,19 @@ class App extends React.Component {
     })
   }
 
-  setSelectedProject(selected) {
+  async setSelectedProject(selectedProjectName) {
     this.setState({
-      selectedProject: selected,
-      projectSettingValue: getProjectSettingValue(selected.Name) || selected.OldSlectType.split('|').map(v => +v) || [1, 1, 1]
+      selectedProjectName: selectedProjectName,
+      projectSettingValue: getProjectSettingValue(selectedProjectName)
+    });
+    console.log('selected:', selectedProjectName)
+    await this.updateSelectedProject(selectedProjectName)
+  }
+
+  async updateSelectedProject (projectName) {
+    var projectSetting = await ProjectApi.getProjectSetting(projectName)
+    this.setState({
+      selectedProject: projectSetting
     });
   }
 
@@ -75,56 +86,21 @@ class App extends React.Component {
       loading: true
     })
 
-    var projects = await this.fetchProjects();
+    var projectNames = await this.fetchProjects();
     this.setState({
-      projects,
-      selectedProject: projects[0],
+      projects: projectNames,
+      selectedProjectName: projectNames[0],
       loading: false
     });
+    await this.updateSelectedProject(projectNames[0])
     this.refreshQrCode()
   }
 
   async fetchProjects() {
-    var url = project
-    ? `${BaseUrl}home/GetServerProjectJsonData?project=${project}`
-    : `${BaseUrl}home/GetServerJsonData`;
-    var response = await fetch(url, {
-      headers: {
-        'Content-Type': 'application/json'
-      },
-    });
-
-    return await response.json();
-  }
-
-  async refreshProject() {
-    var { selectedProject } = this.state;
-    var projects = await this.fetchProjects();
-    if (selectedProject) {
-      var updatedSelectedProject = projects.find(p => p.HtmlUrl === selectedProject.HtmlUrl)
-      console.log(updatedSelectedProject);
-      if (updatedSelectedProject) {
-        this.setState({
-          selectedProject: updatedSelectedProject
-        })
-      }
-    }
-    this.setState({
-      projects,
-    })
+    return await ProjectApi.getProjects();
   }
 
   UpdateSetting(obj) {
-    var body = {
-      ...obj,
-      project: project,
-      fileName: this.state.selectedProject.Name,
-    };
-    var query = Object.keys(body).map(k => `${k}=${body[k]}`).join('&')
-    fetch(`${BaseUrl}home/UpdateFileContentNew?${query}`)
-    .then(() => this.refreshProject())
-    .catch(e => console.log('update fails', e));
-
     setProjectSetting(this.state.selectedProject.Name, [+obj.topType, +obj.centreType, +obj.middleType])
   }
 
@@ -160,7 +136,7 @@ class App extends React.Component {
               qrDataUrl={dataUrl}
               refreshQrCode={() => this.refreshQrCode()}/>
           : <SettingFrame
-              setting={selectedProject.TextObjStr}
+              setting={selectedProject?.TextObjStr}
               settingValue={projectSettingValue}
               generate={(value) => this.UpdateSetting(value)}/>
         }

src/Components/pane/index.js

@@ -53,12 +53,11 @@ function Pane(props) {
   var projectSelect = (e) => {
     var projectName = e.target.value
     setProject(projectName)
-    var projectObj = props.projects.find((p) => p.Name === projectName)
-    props.onProjectSelect(projectObj)
+    props.onProjectSelect(projectName)
   }
 
   useEffect(() => {
-    props.projects.length && !project && setProject(props.projects[0].Name);
+    props.projects.length && !project && setProject(props.projects[0]);
   }, [props.projects])
 
   return (
@@ -131,7 +130,7 @@ function Pane(props) {
               }}
               >
               {
-                props.projects.map((p, i) => <MenuItem key={i} value={p.Name}>{p.Name}</MenuItem>)
+                props.projects.map((pName, i) => <MenuItem key={i} value={pName}>{pName}</MenuItem>)
               }
             </Select>
           }

src/apis/projectApi.js

@@ -0,0 +1,46 @@
+import aliOss from "ali-oss"
+import * as utils from "../utils"
+
+var client = new aliOss({
+  region: 'oss-cn-shanghai',
+  // 阿里云账号AccessKey拥有所有API的访问权限，风险很高。强烈建议您创建并使用RAM用户进行API访问或日常运维，请登录RAM控制台创建RAM用户。
+  accessKeyId: 'LTAI5t7sVPM6mQwEubZ1Hw36',
+  accessKeySecret: 'g0rZC9rTUvQw2jyNe8ibrFtIioOwST',
+  // 填写Bucket名称。
+  bucket: 'web-preview',
+});
+
+const baseBucketUrl = `http://web-preview.soyootech.com/`
+
+function getTenantPrefix () {
+  var tenant = utils.getTenant()
+  return tenant === "funplus" ? "" : `_${tenant}/`
+}
+
+// see more in https://www.npmjs.com/package/ali-oss#listquery-options
+export async function getProjects() {
+  var prefix = getTenantPrefix()
+  if (!prefix) {
+    return client.list({ delimiter: "/"})
+      .then(result =>
+        result.prefixes.filter(item => !item.startsWith("_"))
+          .map(item => item.slice(0, item.length - 1))
+      )
+  } else {
+    return client.list({ prefix: prefix, delimiter: '/' })
+            .then(result =>
+              result.prefixes.map(item => item.slice(prefix.length, item.length - 1))
+    )
+  }
+}
+
+export async function getProjectSetting(projectName) {
+  return fetch(`${baseBucketUrl}${getTenantPrefix()}${projectName}/project.json?time=${new Date().getTime()}`).then(response => {
+    return response.body;
+  }).then(stream => {
+    return new Response(stream, { headers: { "Content-Type": "text/plain" } }).text();
+  })
+  .then(result => {
+    return JSON.parse(result);
+  });;
+}

src/storage.js

@@ -1,11 +1,14 @@
 import ls from 'localstorage-slim'
+import * as Utils from './utils'
 
 const settingPrefix = 'ps_'
 
 export const setProjectSetting = (projectName, settingValueArr) => {
-    ls.set(settingPrefix + projectName, settingValueArr, { ttl: 3600 * 24 * 90 })
+    var tenant = Utils.getTenant()
+    ls.set(settingPrefix + tenant + '_' + projectName, settingValueArr, { ttl: 3600 * 24 * 90 })
 }
 
 export const getProjectSettingValue = (projectName) => {
-    return ls.get(settingPrefix + projectName)
+    var tenant = Utils.getTenant()
+    return ls.get(settingPrefix + tenant + '_' + projectName) || [1, 1, 1]
 }

src/utils.js

@@ -0,0 +1,5 @@
+import packageJson from '../package.json'
+
+export function getTenant() {
+    return packageJson.homepage === "/preview" ? "funplus" : packageJson.homepage.slice(1)
+}