From 1b952223460b36bf620c78da1694e019cb08d17d Mon Sep 17 00:00:00 2001
From: arielherself <ariel@arielherself.xyz>
Date: Sun, 26 Nov 2023 22:17:55 +0800
Subject: [PATCH] feat(backend): use Vercel Serverless Functions for backend

---
 .gitignore          |  1 +
 .idea/workspace.xml | 47 ++++++++++++++++++++++++++++++---------------
 api/click.js        |  7 +++++++
 api/handshake.js    | 12 ++++++++++++
 src/App.js          |  2 +-
 src/Networking.js   | 14 ++++++--------
 src/UMap.js         |  8 +++++---
 7 files changed, 63 insertions(+), 28 deletions(-)
 create mode 100644 api/click.js
 create mode 100644 api/handshake.js

diff --git a/.gitignore b/.gitignore
index 927d17b..b0290a3 100644
--- a/.gitignore
+++ b/.gitignore
@@ -16,3 +16,4 @@ npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
 
+.vercel
diff --git a/.idea/workspace.xml b/.idea/workspace.xml
index dd5ff0e..ec52ba3 100644
--- a/.idea/workspace.xml
+++ b/.idea/workspace.xml
@@ -5,14 +5,26 @@
   </component>
   <component name="ChangeListManager">
     <list default="true" id="3c7078e7-6f30-4d92-9696-11496f9e6dff" name="Changes" comment="">
+      <change afterPath="$PROJECT_DIR$/api/click.js" afterDir="false" />
+      <change afterPath="$PROJECT_DIR$/api/handshake.js" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/.gitignore" beforeDir="false" afterPath="$PROJECT_DIR$/.gitignore" afterDir="false" />
       <change beforePath="$PROJECT_DIR$/.idea/workspace.xml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/workspace.xml" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/README.md" beforeDir="false" afterPath="$PROJECT_DIR$/README.md" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/App.js" beforeDir="false" afterPath="$PROJECT_DIR$/src/App.js" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/Networking.js" beforeDir="false" afterPath="$PROJECT_DIR$/src/Networking.js" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/UMap.js" beforeDir="false" afterPath="$PROJECT_DIR$/src/UMap.js" afterDir="false" />
     </list>
     <option name="SHOW_DIALOG" value="false" />
     <option name="HIGHLIGHT_CONFLICTS" value="true" />
     <option name="HIGHLIGHT_NON_ACTIVE_CHANGELIST" value="false" />
     <option name="LAST_RESOLUTION" value="IGNORE" />
   </component>
+  <component name="FileTemplateManagerImpl">
+    <option name="RECENT_TEMPLATES">
+      <list>
+        <option value="JavaScript File" />
+      </list>
+    </option>
+  </component>
   <component name="Git.Settings">
     <option name="RECENT_GIT_ROOT_PATH" value="$PROJECT_DIR$" />
   </component>
@@ -27,21 +39,23 @@
     <option name="hideEmptyMiddlePackages" value="true" />
     <option name="showLibraryContents" value="true" />
   </component>
-  <component name="PropertiesComponent">{
-  &quot;keyToString&quot;: {
-    &quot;RunOnceActivity.OpenProjectViewOnStart&quot;: &quot;true&quot;,
-    &quot;RunOnceActivity.ShowReadmeOnStart&quot;: &quot;true&quot;,
-    &quot;WebServerToolWindowFactoryState&quot;: &quot;false&quot;,
-    &quot;git-widget-placeholder&quot;: &quot;dev&quot;,
-    &quot;last_opened_file_path&quot;: &quot;/home/user/Documents/fd_data-structures/pj/frontend&quot;,
-    &quot;node.js.detected.package.eslint&quot;: &quot;true&quot;,
-    &quot;node.js.detected.package.tslint&quot;: &quot;true&quot;,
-    &quot;node.js.selected.package.eslint&quot;: &quot;(autodetect)&quot;,
-    &quot;node.js.selected.package.tslint&quot;: &quot;(autodetect)&quot;,
-    &quot;nodejs_package_manager_path&quot;: &quot;npm&quot;,
-    &quot;vue.rearranger.settings.migration&quot;: &quot;true&quot;
+  <component name="PropertiesComponent"><![CDATA[{
+  "keyToString": {
+    "RunOnceActivity.OpenProjectViewOnStart": "true",
+    "RunOnceActivity.ShowReadmeOnStart": "true",
+    "WebServerToolWindowFactoryState": "false",
+    "git-widget-placeholder": "dev",
+    "last_opened_file_path": "/home/user/Documents/fd_data-structures/pj/frontend",
+    "node.js.detected.package.eslint": "true",
+    "node.js.detected.package.tslint": "true",
+    "node.js.selected.package.eslint": "(autodetect)",
+    "node.js.selected.package.tslint": "(autodetect)",
+    "nodejs_interpreter_path": "/home/user/.nvm/versions/node/v20.10.0/bin/node",
+    "nodejs_package_manager_path": "npm",
+    "settings.editor.selected.configurable": "settings.nodejs",
+    "vue.rearranger.settings.migration": "true"
   }
-}</component>
+}]]></component>
   <component name="RunManager">
     <configuration name="start" type="js.build_tools.npm" temporary="true" nameIsGenerated="true">
       <package-json value="$PROJECT_DIR$/package.json" />
@@ -69,7 +83,8 @@
       <updated>1700814200305</updated>
       <workItem from="1700814201341" duration="315000" />
       <workItem from="1700814808669" duration="47000" />
-      <workItem from="1700822693197" duration="9005000" />
+      <workItem from="1700822693197" duration="9493000" />
+      <workItem from="1701004587189" duration="3052000" />
     </task>
     <servers />
   </component>
diff --git a/api/click.js b/api/click.js
new file mode 100644
index 0000000..8c064ce
--- /dev/null
+++ b/api/click.js
@@ -0,0 +1,7 @@
+const getArgs=(s)=>s.split('@@')
+
+export default function handler(req,res){
+    res.status(200).json({
+        log: `Method: click\nArgs: ${getArgs(req.query.query)}`,
+    });
+}
\ No newline at end of file
diff --git a/api/handshake.js b/api/handshake.js
new file mode 100644
index 0000000..2560e65
--- /dev/null
+++ b/api/handshake.js
@@ -0,0 +1,12 @@
+const __DEBUG__=1,
+      __APP_VERSION__='v1.0a1',
+      __APP_INTRO__='<list>\n' +
+          '  <li>We can actively detect the connection status now!</li>\n' +
+          '</list>';
+
+export default function handler(req,res){
+    res.status(200).json({
+        version: __APP_VERSION__,
+        intro:   __APP_INTRO__,
+    });
+}
\ No newline at end of file
diff --git a/src/App.js b/src/App.js
index e78c0e3..6f0b945 100644
--- a/src/App.js
+++ b/src/App.js
@@ -22,7 +22,7 @@ export default function App() {
     const [intro, setIntro] = useState('');
     const hs = setInterval(() => {
         post('handshake', []).then((response) => {
-            const [version, intro] = response.split('@@');
+            const {version, intro} = response;
             setVersion(version);
             setIntro(intro);
             clearInterval(hs);
diff --git a/src/Networking.js b/src/Networking.js
index c0c48e3..0f2107b 100644
--- a/src/Networking.js
+++ b/src/Networking.js
@@ -1,15 +1,13 @@
 export function post(method,args) {
-    const data = new FormData();
-    data.append('method', method)
-    data.append('payload', args.join(','));
+    const payload=args.join('@@');
     let res = '';
     let ft = async () => {
-        const response = await fetch('http://127.0.0.1:825/', {
-            method: 'POST',
-            body: data
+        const response = await fetch(`/api/${method}${payload.length?"?query=":""}${payload}`, {
+            method: 'GET',
+            // body: data
         });
-        const response_data = await response.text();
-        console.log(`Received: ${response_data}`);
+        const response_data = await response.json();
+        console.log(`Received: ${JSON.stringify(response_data)}`);
         return response_data;
     };
     return ft();
diff --git a/src/UMap.js b/src/UMap.js
index c6ae8a3..464f2fb 100644
--- a/src/UMap.js
+++ b/src/UMap.js
@@ -70,9 +70,11 @@ function MapClickHandler({mks}) {
             const lat = e.latlng.lat, lng = e.latlng.lng;
             console.info(`Clicking on ${lat} ${lng}`);
             mks.current.addMarker(lat, lng);
-            post('click', [lat, lng]).catch((e)=>{
+            post('click', [lat, lng]).then((response)=>{
+                console.log(`Response:\n${response['log']}`)
+            }).catch((e)=>{
                 console.error(e);
-                location.reload();
+                // location.reload();
             });
         },
         // TODO
@@ -148,7 +150,7 @@ function ChangeView({center,zoom}){
 
 export default function UMap() {
     const markersRef = useRef(null);
-    const [focus, setFocus]=useState([37.334835049999995,-122.01139165956805]);
+    const [focus, setFocus]=useState(AppleParkLoc);
     const zoom=16;
     const sf=(a)=>{setFocus(a);console.log(`triggered focus update, new focus is ${focus}`);};
     return (