Legacy integration (#387)

* integrate with math3d-next APIs

* enable legacy save

* fewer hardcoded env vars

* fix key

* test

.github/workflows/release.yml

@@ -0,0 +1,30 @@
+name: Deploy
+
+concurrency: production
+
+on: workflow_dispatch
+
+jobs:
+  deployment:
+    runs-on: ubuntu-latest
+    environment: production
+    env:
+      AWS_ACCESS_KEY_ID: ${{ secrets.AWS_ACCESS_KEY_ID }}
+      AWS_SECRET_ACCESS_KEY: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
+      AWS_DEFAULT_REGION: ${{ vars.AWS_DEFAULT_REGION }}
+      AWS_S3_BUCKET: ${{ vars.AWS_S3_BUCKET }}
+      SKIP_YARN_COREPACK_CHECK: true
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version: "20.11.1"
+          cache: "yarn"
+      - run: npm ci
+      - run: npm run build
+        env:
+          REACT_APP_NEXT_API_CREATE_URL: ${{ vars.REACT_APP_NEXT_API_CREATE_URL }}
+          REACT_APP_NEXT_API_RETRIEVE_URL: ${{ vars.REACT_APP_NEXT_API_RETRIEVE_URL }}
+          REACT_APP_DISABLE_LEGACY_SAVE: ${{ vars.REACT_APP_DISABLE_LEGACY_SAVE }}
+      - run: aws s3 cp --recursive packages/app/dist s3://${{ vars.AWS_S3_BUCKET }}/
+      - run: aws cloudfront create-invalidation --distribution-id ${{vars.CLOUDFRONT_DISTRIBUTION_ID}} --paths "/*"

client/.env

@@ -5,3 +5,6 @@
 NODE_PATH=src
 REACT_APP_VERSION=$npm_package_version
 REACT_APP_NAME=$npm_package_name
+# REACT_APP_NEXT_API_CREATE_URL=https://api.math3d.org/v0/legacy_scenes/
+# REACT_APP_NEXT_API_RETRIEVE_URL=https://api.math3d.org/v0/legacy_scenes/
+# REACT_APP_DISABLE_LEGACY_SAVE=false

client/src/services/api/index.js

@@ -1,20 +1,55 @@
 // Example api call:
 
-export const getGraph = async (id) => fetch(`api/graph/${id}`, {
-  method: 'GET',
-  headers: {}
-} ).then(res => res.json())
+export const getGraph = async (id) => {
+  if (process.env.REACT_APP_NEXT_API_RETRIEVE_URL) {
+    return fetch(`${process.env.REACT_APP_NEXT_API_RETRIEVE_URL}${id}`, {
+      method: "GET",
+      headers: {},
+    }).then((res) => res.json());
+  }
+  return fetch(`api/graph/${id}`, {
+    method: "GET",
+    headers: {},
+  }).then((res) => res.json());
+};
 
-export const saveGraph = async (id, dehydrated) => {
+const oldSave = (id, dehydrated) => {
   const body = {
     urlKey: id,
-    dehydrated
-  }
+    dehydrated,
+  };
   return fetch(`/api/graph`, {
-    method: 'POST',
+    method: "POST",
     headers: {
-      'Content-Type': 'application/json'
+      "Content-Type": "application/json",
     },
-    body: JSON.stringify(body)
-  } ).then(res => res.json())
-}
+    body: JSON.stringify(body),
+  }).then((res) => res.json());
+};
+
+const newSave = async (dehydrated) => {
+  const data = await fetch(process.env.REACT_APP_NEXT_API_CREATE_URL, {
+    method: "POST",
+    headers: {
+      "Content-Type": "application/json",
+    },
+    body: JSON.stringify({ dehydrated }),
+  }).then((res) => res.json());
+
+  if (process.env.REACT_APP_DISABLE_LEGACY_SAVE) {
+    return data.key;
+  }
+
+  oldSave(data.key, dehydrated);
+
+  return data.key;
+};
+
+export const saveGraph = async (id, dehydrated) => {
+  if (process.env.REACT_APP_NEXT_API_CREATE_URL) {
+    return newSave(dehydrated);
+  } else {
+    await oldSave(id, dehydrated);
+    return id;
+  }
+};

client/src/views/MainView/Header/containers/ShareButton/components/ShareButton.js

@@ -72,7 +72,7 @@ export default class ShareButton extends PureComponent<Props, State> {
 
   dehydratedJson: ?string;
 
-  getId(charset: { length: number, charset: string}) {
+  getId(charset: { length: number, charset: string }) {
     return randomstring.generate(charset);
   }
 
@@ -90,9 +90,10 @@ export default class ShareButton extends PureComponent<Props, State> {
     const state = this.props.getState();
     const dehydrated = dehydrate(state);
     const id = this.getId({ length: 9, charset: URL_CHAR_ST });
-    saveGraph(id, dehydrated);
-    this.setState({ id });
-    this.dehydratedJson = JSON.stringify(dehydrated);
+    saveGraph(id, dehydrated).then((key) => {
+      this.setState({ id: key });
+      this.dehydratedJson = JSON.stringify(dehydrated);
+    });
   };
 
   onCopy = () => {