From 0ba4b344f8f23bf83c79f74a4984c9e6ed2e9e7c Mon Sep 17 00:00:00 2001
From: ennucore <ennucore@gmail.com>
Date: Fri, 16 Dec 2022 22:11:59 +0100
Subject: [PATCH] Changed zone repr + results, api, and Find

---
 .idea/workspace.xml            |  17 ++--
 package-lock.json              | 167 +++++++++++++++++++++++++++++++--
 package.json                   |   4 +-
 src/api.ts                     |  19 ++++
 src/components/ZonePricing.vue |   2 +-
 src/components/ZoneTable.vue   |   2 +-
 src/result.ts                  |  37 ++++++++
 src/router/index.ts            |   1 -
 src/views/Find.vue             |  18 ++--
 src/views/FindQ.vue            |  39 ++++++--
 src/views/Get.vue              |   4 +-
 src/zone.ts                    |   3 +-
 12 files changed, 273 insertions(+), 40 deletions(-)
 create mode 100644 src/api.ts
 create mode 100644 src/result.ts

diff --git a/.idea/workspace.xml b/.idea/workspace.xml
index 711315a..c6cfc7a 100644
--- a/.idea/workspace.xml
+++ b/.idea/workspace.xml
@@ -2,14 +2,17 @@
 <project version="4">
   <component name="ChangeListManager">
     <list default="true" id="ddb8afd5-d3ba-47b1-b6d0-227403f1abf7" name="Changes" comment="/get/:zone/:domain">
-      <change afterPath="$PROJECT_DIR$/src/components/GetDomainBtn.vue" afterDir="false" />
-      <change afterPath="$PROJECT_DIR$/src/views/FindQ.vue" afterDir="false" />
+      <change afterPath="$PROJECT_DIR$/src/api.ts" afterDir="false" />
+      <change afterPath="$PROJECT_DIR$/src/result.ts" afterDir="false" />
       <change beforePath="$PROJECT_DIR$/.idea/workspace.xml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/workspace.xml" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/src/components/DomainBar.vue" beforeDir="false" afterPath="$PROJECT_DIR$/src/components/DomainBar.vue" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/src/components/TonButton.vue" beforeDir="false" afterPath="$PROJECT_DIR$/src/components/TonButton.vue" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/package-lock.json" beforeDir="false" afterPath="$PROJECT_DIR$/package-lock.json" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/package.json" beforeDir="false" afterPath="$PROJECT_DIR$/package.json" afterDir="false" />
       <change beforePath="$PROJECT_DIR$/src/components/ZonePricing.vue" beforeDir="false" afterPath="$PROJECT_DIR$/src/components/ZonePricing.vue" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/src/router/index.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/router/index.ts" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/components/ZoneTable.vue" beforeDir="false" afterPath="$PROJECT_DIR$/src/components/ZoneTable.vue" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/views/Find.vue" beforeDir="false" afterPath="$PROJECT_DIR$/src/views/Find.vue" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/views/FindQ.vue" beforeDir="false" afterPath="$PROJECT_DIR$/src/views/FindQ.vue" afterDir="false" />
       <change beforePath="$PROJECT_DIR$/src/views/Get.vue" beforeDir="false" afterPath="$PROJECT_DIR$/src/views/Get.vue" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/zone.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/zone.ts" afterDir="false" />
     </list>
     <option name="SHOW_DIALOG" value="false" />
     <option name="HIGHLIGHT_CONFLICTS" value="true" />
@@ -19,8 +22,8 @@
   <component name="FileTemplateManagerImpl">
     <option name="RECENT_TEMPLATES">
       <list>
-        <option value="TypeScript File" />
         <option value="Vue Single File Component" />
+        <option value="TypeScript File" />
       </list>
     </option>
   </component>
@@ -77,7 +80,7 @@
       <workItem from="1670927344373" duration="29000" />
       <workItem from="1670927391338" duration="2277000" />
       <workItem from="1671024025708" duration="19806000" />
-      <workItem from="1671204365793" duration="8038000" />
+      <workItem from="1671204365793" duration="11527000" />
     </task>
     <task id="LOCAL-00001" summary="Wrote the landing">
       <created>1670844191163</created>
diff --git a/package-lock.json b/package-lock.json
index 4204c0d..22d8327 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,6 +8,8 @@
       "name": "agorata",
       "version": "0.0.0",
       "dependencies": {
+        "@popperjs/core": "^2.11.6",
+        "axios": "^1.2.1",
         "bulma": "^0.9.4",
         "sass": "^1.56.2",
         "vue": "^3.2.45",
@@ -16,7 +18,7 @@
         "vue3-popper": "^1.5.0"
       },
       "devDependencies": {
-        "@types/node": "^18.11.12",
+        "@types/node": "^18.11.16",
         "@vitejs/plugin-vue": "^4.0.0",
         "@vue/tsconfig": "^0.1.3",
         "npm-run-all": "^4.1.5",
@@ -497,9 +499,9 @@
       }
     },
     "node_modules/@types/node": {
-      "version": "18.11.13",
-      "resolved": "https://registry.npmjs.org/@types/node/-/node-18.11.13.tgz",
-      "integrity": "sha512-IASpMGVcWpUsx5xBOrxMj7Bl8lqfuTY7FKAnPmu5cHkfQVWF8GulWS1jbRqA934qZL35xh5xN/+Xe/i26Bod4w==",
+      "version": "18.11.16",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-18.11.16.tgz",
+      "integrity": "sha512-6T7P5bDkRhqRxrQtwj7vru+bWTpelgtcETAZEUSdq0YISKz8WKdoBukQLYQQ6DFHvU9JRsbFq0JH5C51X2ZdnA==",
       "dev": true
     },
     "node_modules/@vitejs/plugin-vue": {
@@ -822,6 +824,21 @@
       "integrity": "sha512-PYjyFOLKQ9y57JvQ6QLo8dAgNqswh8M1RMJYdQduT6xbWSgK36P/Z/v+p888pM69jMMfS8Xd8F6I1kQ/I9HUGg==",
       "dev": true
     },
+    "node_modules/asynckit": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz",
+      "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q=="
+    },
+    "node_modules/axios": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-1.2.1.tgz",
+      "integrity": "sha512-I88cFiGu9ryt/tfVEi4kX2SITsvDddTajXTOFmt2uK1ZVA8LytjtdeyefdQWEf5PU8w+4SSJDoYnggflB5tW4A==",
+      "dependencies": {
+        "follow-redirects": "^1.15.0",
+        "form-data": "^4.0.0",
+        "proxy-from-env": "^1.1.0"
+      }
+    },
     "node_modules/balanced-match": {
       "version": "1.0.2",
       "dev": true,
@@ -951,6 +968,17 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/combined-stream": {
+      "version": "1.0.8",
+      "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz",
+      "integrity": "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==",
+      "dependencies": {
+        "delayed-stream": "~1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
     "node_modules/concat-map": {
       "version": "0.0.1",
       "dev": true,
@@ -1003,6 +1031,14 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/delayed-stream": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz",
+      "integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==",
+      "engines": {
+        "node": ">=0.4.0"
+      }
+    },
     "node_modules/detective": {
       "version": "5.2.1",
       "resolved": "https://registry.npmjs.org/detective/-/detective-5.2.1.tgz",
@@ -1186,6 +1222,38 @@
         "node": ">=8"
       }
     },
+    "node_modules/follow-redirects": {
+      "version": "1.15.2",
+      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.2.tgz",
+      "integrity": "sha512-VQLG33o04KaQ8uYi2tVNbdrWp1QWxNNea+nmIB4EVM28v0hmP17z7aG1+wAkNzVq4KeXTq3221ye5qTJP91JwA==",
+      "funding": [
+        {
+          "type": "individual",
+          "url": "https://github.com/sponsors/RubenVerborgh"
+        }
+      ],
+      "engines": {
+        "node": ">=4.0"
+      },
+      "peerDependenciesMeta": {
+        "debug": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/form-data": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.0.tgz",
+      "integrity": "sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==",
+      "dependencies": {
+        "asynckit": "^0.4.0",
+        "combined-stream": "^1.0.8",
+        "mime-types": "^2.1.12"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
     "node_modules/fsevents": {
       "version": "2.3.2",
       "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz",
@@ -1659,6 +1727,25 @@
         "node": ">=8.6"
       }
     },
+    "node_modules/mime-db": {
+      "version": "1.52.0",
+      "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz",
+      "integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/mime-types": {
+      "version": "2.1.35",
+      "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.35.tgz",
+      "integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==",
+      "dependencies": {
+        "mime-db": "1.52.0"
+      },
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
     "node_modules/minimatch": {
       "version": "3.1.2",
       "dev": true,
@@ -2030,6 +2117,11 @@
       "integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==",
       "dev": true
     },
+    "node_modules/proxy-from-env": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
+      "integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg=="
+    },
     "node_modules/queue-microtask": {
       "version": "1.2.3",
       "resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz",
@@ -2911,9 +3003,9 @@
       "integrity": "sha512-50/17A98tWUfQ176raKiOGXuYpLyyVMkxxG6oylzL3BPOlA6ADGdK7EYunSa4I064xerltq9TGXs8HmOk5E+vw=="
     },
     "@types/node": {
-      "version": "18.11.13",
-      "resolved": "https://registry.npmjs.org/@types/node/-/node-18.11.13.tgz",
-      "integrity": "sha512-IASpMGVcWpUsx5xBOrxMj7Bl8lqfuTY7FKAnPmu5cHkfQVWF8GulWS1jbRqA934qZL35xh5xN/+Xe/i26Bod4w==",
+      "version": "18.11.16",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-18.11.16.tgz",
+      "integrity": "sha512-6T7P5bDkRhqRxrQtwj7vru+bWTpelgtcETAZEUSdq0YISKz8WKdoBukQLYQQ6DFHvU9JRsbFq0JH5C51X2ZdnA==",
       "dev": true
     },
     "@vitejs/plugin-vue": {
@@ -3200,6 +3292,21 @@
       "integrity": "sha512-PYjyFOLKQ9y57JvQ6QLo8dAgNqswh8M1RMJYdQduT6xbWSgK36P/Z/v+p888pM69jMMfS8Xd8F6I1kQ/I9HUGg==",
       "dev": true
     },
+    "asynckit": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz",
+      "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q=="
+    },
+    "axios": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-1.2.1.tgz",
+      "integrity": "sha512-I88cFiGu9ryt/tfVEi4kX2SITsvDddTajXTOFmt2uK1ZVA8LytjtdeyefdQWEf5PU8w+4SSJDoYnggflB5tW4A==",
+      "requires": {
+        "follow-redirects": "^1.15.0",
+        "form-data": "^4.0.0",
+        "proxy-from-env": "^1.1.0"
+      }
+    },
     "balanced-match": {
       "version": "1.0.2",
       "dev": true
@@ -3295,6 +3402,14 @@
       "version": "1.1.3",
       "dev": true
     },
+    "combined-stream": {
+      "version": "1.0.8",
+      "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz",
+      "integrity": "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==",
+      "requires": {
+        "delayed-stream": "~1.0.0"
+      }
+    },
     "concat-map": {
       "version": "0.0.1",
       "dev": true
@@ -3330,6 +3445,11 @@
       "integrity": "sha512-hsBd2qSVCRE+5PmNdHt1uzyrFu5d3RwmFDKzyNZMFq/EwDNJF7Ee5+D5oEKF0hU6LhtoUF1macFvOe4AskQC1Q==",
       "dev": true
     },
+    "delayed-stream": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz",
+      "integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ=="
+    },
     "detective": {
       "version": "5.2.1",
       "resolved": "https://registry.npmjs.org/detective/-/detective-5.2.1.tgz",
@@ -3474,6 +3594,21 @@
         "to-regex-range": "^5.0.1"
       }
     },
+    "follow-redirects": {
+      "version": "1.15.2",
+      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.2.tgz",
+      "integrity": "sha512-VQLG33o04KaQ8uYi2tVNbdrWp1QWxNNea+nmIB4EVM28v0hmP17z7aG1+wAkNzVq4KeXTq3221ye5qTJP91JwA=="
+    },
+    "form-data": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.0.tgz",
+      "integrity": "sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==",
+      "requires": {
+        "asynckit": "^0.4.0",
+        "combined-stream": "^1.0.8",
+        "mime-types": "^2.1.12"
+      }
+    },
     "fsevents": {
       "version": "2.3.2",
       "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz",
@@ -3769,6 +3904,19 @@
         "picomatch": "^2.3.1"
       }
     },
+    "mime-db": {
+      "version": "1.52.0",
+      "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz",
+      "integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg=="
+    },
+    "mime-types": {
+      "version": "2.1.35",
+      "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.35.tgz",
+      "integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==",
+      "requires": {
+        "mime-db": "1.52.0"
+      }
+    },
     "minimatch": {
       "version": "3.1.2",
       "dev": true,
@@ -4001,6 +4149,11 @@
       "integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==",
       "dev": true
     },
+    "proxy-from-env": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
+      "integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg=="
+    },
     "queue-microtask": {
       "version": "1.2.3",
       "resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz",
diff --git a/package.json b/package.json
index 15283b9..d8d2fcd 100644
--- a/package.json
+++ b/package.json
@@ -10,6 +10,8 @@
     "type-check": "vue-tsc --noEmit"
   },
   "dependencies": {
+    "@popperjs/core": "^2.11.6",
+    "axios": "^1.2.1",
     "bulma": "^0.9.4",
     "sass": "^1.56.2",
     "vue": "^3.2.45",
@@ -18,7 +20,7 @@
     "vue3-popper": "^1.5.0"
   },
   "devDependencies": {
-    "@types/node": "^18.11.12",
+    "@types/node": "^18.11.16",
     "@vitejs/plugin-vue": "^4.0.0",
     "@vue/tsconfig": "^0.1.3",
     "npm-run-all": "^4.1.5",
diff --git a/src/api.ts b/src/api.ts
new file mode 100644
index 0000000..4d23f7b
--- /dev/null
+++ b/src/api.ts
@@ -0,0 +1,19 @@
+import axios from 'axios'
+
+export class Api {
+    public readonly api_url: string;
+
+    constructor() {
+        if (process.env.NODE_ENV === 'development') {
+            this.api_url = 'http://localhost:5000/';
+        } else {
+            this.api_url = 'https://api.agorata.io/';
+        }
+    }
+}
+
+export const config = new Api();
+
+export async function call_api(url: string) {
+    return (await axios.get(config.api_url + url, {withCredentials: true})).data;
+}
diff --git a/src/components/ZonePricing.vue b/src/components/ZonePricing.vue
index 2c558f1..8a2623f 100644
--- a/src/components/ZonePricing.vue
+++ b/src/components/ZonePricing.vue
@@ -64,7 +64,7 @@ export default {
   props: {
     zone: {
       type: Zone,
-      default: new Zone(".example.ton", 3, 5)
+      default: new Zone("example.ton", 3, 5)
     },
     // Whether to show the "Get" button
     has_get: {
diff --git a/src/components/ZoneTable.vue b/src/components/ZoneTable.vue
index a19c2e4..63b87f2 100644
--- a/src/components/ZoneTable.vue
+++ b/src/components/ZoneTable.vue
@@ -33,7 +33,7 @@ export default {
   props: {
     zones: {
       type: Array[Zone],
-      default: [new Zone(".example.ton", 3, 5), new Zone(".agorata.ton", 3, 5)]
+      default: [new Zone("example.ton", 3, 5), new Zone("agorata.ton", 3, 5)]
     }
   }
 }
diff --git a/src/result.ts b/src/result.ts
new file mode 100644
index 0000000..df18cc3
--- /dev/null
+++ b/src/result.ts
@@ -0,0 +1,37 @@
+// import {call_api} from "@/api";
+
+export class Result {
+    domain: string;
+    buy_price?: number;
+    auction_price?: number;
+    owner?: string;
+
+    constructor(domain: string, buy_price?: number, auction_price?: number, owner?: string) {
+        this.domain = domain;
+        this.buy_price = buy_price;
+        this.auction_price = auction_price;
+        this.owner = owner;
+    }
+
+    getRouteParams(): any {
+        return {
+            domain_init: /* domain up to . */ this.domain.split('.')[0],
+            zone: /* domain after . */ this.domain.split('.').slice(1).join('.')
+        }
+    }
+}
+
+const sleep = (milliseconds: number) => {
+    return new Promise(resolve => setTimeout(resolve, milliseconds))
+}
+
+export async function get_search_results(query: string) {
+    // return await call_api('find/' + query);
+    await sleep(1000);
+    return [
+        new Result(query + '.ton', 5, 3),
+        new Result(query + '.ton', 1),
+        new Result(query + '.ton', undefined, 2),
+        new Result(query + '.ton', undefined, undefined, '123')
+    ];
+}
diff --git a/src/router/index.ts b/src/router/index.ts
index dbeebc3..61551a9 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -7,7 +7,6 @@ import Landing from '../views/Landing.vue'
 /get/zone - get a domain in a zone   (should be able to go to /find)
 /get/zone/domain - get a specific domain
  */
-// todo: change zone repr from .zone.ton to zone
 
 const router = createRouter({
     history: createWebHistory(import.meta.env.BASE_URL),
diff --git a/src/views/Find.vue b/src/views/Find.vue
index 0abe96b..7ce8219 100644
--- a/src/views/Find.vue
+++ b/src/views/Find.vue
@@ -1,7 +1,7 @@
 <template>
   <DarkLayout>
     <div class="center">
-      <DomainBar/>
+      <DomainBar :value="query" @search="search()" @input_d="query = $event"/>
     </div>
     <ZoneTable/>
   </DarkLayout>
@@ -14,14 +14,14 @@ import ZoneTable from "../components/ZoneTable.vue";
 
 export default {
   name: "Find",
-  props: {
-    default_domain: {
-      type: String,
-      default: "example"
-    },
-    zone: {
-      type: String,
-      default: ".ton"
+  data () {
+    return {
+      query: 'example'
+    }
+  },
+  methods: {
+    search() {
+      this.$router.push({name: 'FindQ', params: {query: this.query}});
     }
   },
   components: {ZoneTable, DarkLayout, DomainBar}
diff --git a/src/views/FindQ.vue b/src/views/FindQ.vue
index d8670e8..6273a20 100644
--- a/src/views/FindQ.vue
+++ b/src/views/FindQ.vue
@@ -2,9 +2,15 @@
   <DarkLayout>
     <div class="center">
       <DomainBar zone="" :value="query_" @search="search()" @input_d="query_ = $event"/>
-      <RotateSquare2 v-if="results === null"/>
-      <div v-for="result in results" :key="result">
-
+      <div class="results">
+        <RotateSquare2 v-if="results === null" style="width: 5rem; height: 5rem"/>
+        <div v-for="result in results" :key="result">
+          <router-link :to="{name: 'Get', params: result.getRouteParams()}">
+            <div class="search-result">
+              {{ result }}
+            </div>
+          </router-link>
+        </div>
       </div>
     </div>
   </DarkLayout>
@@ -14,6 +20,7 @@
 import DomainBar from "../components/DomainBar.vue";
 import DarkLayout from "../components/DarkLayout.vue";
 import RotateSquare2 from "../components/RotateSquare2.vue";
+import {get_search_results} from "../result";
 
 export default {
   name: "FindQ",
@@ -24,23 +31,37 @@ export default {
   },
   data() {
     return {
-      query_: this.query
+      query_: this.query,
+      results: null,
     }
   },
+  mounted() {
+    this.getResults();
+  },
   components: {RotateSquare2, DarkLayout, DomainBar},
   methods: {
     search() {
       this.$router.push({name: 'FindQ', params: {query: this.query_}});
+    },
+    async getResults() {
+      this.results = await get_search_results(this.query_);
     }
   },
-  computed: {
-    results() {
-      return [];
-    }
-  }
 }
 </script>
 
 <style scoped>
+.results {
+  margin-top: 3rem;
+}
 
+.search-result {
+  margin: 1rem 0;
+  padding: 1rem;
+  border-radius: 1rem;
+  background-color: #4e5a88;
+  color: white;
+  font-size: 1.5rem;
+  cursor: pointer;
+}
 </style>
\ No newline at end of file
diff --git a/src/views/Get.vue b/src/views/Get.vue
index 1cb5332..04a75ed 100644
--- a/src/views/Get.vue
+++ b/src/views/Get.vue
@@ -1,8 +1,8 @@
 <template>
   <DarkLayout>
     <router-link :to="{name: 'Find'}"><!-- todo: "All zones" button here --></router-link>
-    <DomainBar :zone="zone" :value="domain" @search="search()" @input_d="handle_input($event)"/>
-    <GetDomain :domain="domain + zone" :price="5"/>
+    <DomainBar :zone="'.' + zone" :value="domain" @search="search()" @input_d="handle_input($event)"/>
+    <GetDomain :domain="domain + '.' + zone" :price="5"/>
   </DarkLayout>
 </template>
 
diff --git a/src/zone.ts b/src/zone.ts
index 73c7884..4b54ce0 100644
--- a/src/zone.ts
+++ b/src/zone.ts
@@ -1,6 +1,5 @@
-/* Define type Zone with the string zone (like .example.ton) and terms (prices with different conditions) */
 export class Zone {
-    zone: string;
+    zone: string;   // Without the dot in the front
     min_length: number;
     length_1: number;
     length_2: number;