From e443d17b2ed1263f6a38a0893a00ddae0a19e99e Mon Sep 17 00:00:00 2001
From: vaidankarswapnil <81285216+vaidankarswapnil@users.noreply.github.com>
Date: Thu, 22 Jul 2021 20:49:17 +0530
Subject: [PATCH] Migrate Index page to React (#952)

---
 src/Index.ts         | 23 ---------------
 src/Index.tsx        | 66 ++++++++++++++++++++++++++++++++++++++++++++
 src/index.html       | 49 +-------------------------------
 tsconfig.strict.json |  1 -
 webpack.config.js    |  2 +-
 5 files changed, 68 insertions(+), 73 deletions(-)
 delete mode 100644 src/Index.ts
 create mode 100644 src/Index.tsx

diff --git a/src/Index.ts b/src/Index.ts
deleted file mode 100644
index 9eb33943c..000000000
--- a/src/Index.ts
+++ /dev/null
@@ -1,23 +0,0 @@
-import "../less/index.less";
-import "./Libs/jquery";
-
-import * as ko from "knockout";
-
-class Index {
-  public navigationSelection: ko.Observable<string>;
-
-  constructor() {
-    this.navigationSelection = ko.observable("quickstart");
-  }
-
-  public quickstart_click() {
-    this.navigationSelection("quickstart");
-  }
-
-  public explorer_click() {
-    this.navigationSelection("explorer");
-  }
-}
-
-var index = new Index();
-ko.applyBindings(index);
diff --git a/src/Index.tsx b/src/Index.tsx
new file mode 100644
index 000000000..d660eaed0
--- /dev/null
+++ b/src/Index.tsx
@@ -0,0 +1,66 @@
+import React, { useState } from "react";
+import ReactDOM from "react-dom";
+import Arrow from "../images/Arrow.svg";
+import CosmosDB_20170829 from "../images/CosmosDB_20170829.svg";
+import Explorer from "../images/Explorer.svg";
+import Feedback from "../images/Feedback.svg";
+import Quickstart from "../images/Quickstart.svg";
+import "../less/index.less";
+
+const Index = (): JSX.Element => {
+  const [navigationSelection, setNavigationSelection] = useState("quickstart");
+
+  const quickstart_click = () => {
+    setNavigationSelection("quickstart");
+  };
+
+  const explorer_click = () => {
+    setNavigationSelection("explorer");
+  };
+
+  return (
+    <React.Fragment>
+      <header className="header HeaderBg">
+        <div className="items">
+          <img className="DocDBicon" src={CosmosDB_20170829} alt="Azure Cosmos DB" />
+          <a className="createdocdbacnt" href="https://aka.ms/documentdbcreate" rel="noreferrer" target="_blank">
+            Create an Azure Cosmos DB account <img className="rightarrowimg" src={Arrow} alt="" />
+          </a>
+          <span className="title">Azure Cosmos DB Emulator</span>
+        </div>
+      </header>
+      <nav className="fixedleftpane">
+        <div
+          id="Quickstart"
+          onClick={quickstart_click}
+          className={navigationSelection === "quickstart" ? "topSelected" : ""}
+        >
+          <img id="imgiconwidth1" src={Quickstart} alt="Open Quick Start" />
+          <span className="menuQuickStart">Quickstart</span>
+        </div>
+
+        <div id="Explorer" onClick={explorer_click} className={navigationSelection === "explorer" ? "topSelected" : ""}>
+          <img id="imgiconwidth1" src={Explorer} alt="Open Data Explorer" />
+          <span className="menuExplorer">Explorer</span>
+        </div>
+
+        <div>
+          <a className="feedbackstyle" href="https://aka.ms/cosmosdbfeedback?subject=Cosmos%20DB%20Emulator%20Feedback">
+            <img id="imgiconwidth1" src={Feedback} alt="Report Issue" />
+            <span className="menuExplorer">Report Issue</span>
+          </a>
+        </div>
+      </nav>
+
+      {navigationSelection === "quickstart" && (
+        <iframe name="quickstart" className="iframe" src="quickstart.html"></iframe>
+      )}
+
+      {navigationSelection === "explorer" && (
+        <iframe name="explorer" className="iframe" src="explorer.html?platform=Emulator"></iframe>
+      )}
+    </React.Fragment>
+  );
+};
+
+ReactDOM.render(<Index />, document.getElementById("root"));
diff --git a/src/index.html b/src/index.html
index e9672edd7..5332ae673 100644
--- a/src/index.html
+++ b/src/index.html
@@ -8,54 +8,7 @@
 
     <link rel="shortcut icon" href="images/favicon.ico" type="image/x-icon" />
   </head>
-
   <body>
-    <header class="header HeaderBg">
-      <div class="items">
-        <img class="DocDBicon" src="/CosmosDB_20170829.svg" alt="Azure Cosmos DB" />
-        <a class="createdocdbacnt" href="https://aka.ms/documentdbcreate" target="_blank">
-          Create an Azure Cosmos DB account <img class="rightarrowimg" src="/Arrow.svg" alt="" />
-        </a>
-        <span class="title">Azure Cosmos DB Emulator</span>
-      </div>
-    </header>
-
-    <nav class="fixedleftpane">
-      <div
-        id="Quickstart"
-        data-bind="click: quickstart_click, css:{ topSelected: navigationSelection() === 'quickstart' }"
-      >
-        <img id="imgiconwidth1" src="/Quickstart.svg" alt="Open Quick Start" />
-        <span class="menuQuickStart">Quickstart</span>
-      </div>
-
-      <div id="Explorer" data-bind="click: explorer_click, css:{ topSelected: navigationSelection() === 'explorer' }">
-        <img id="imgiconwidth1" src="/Explorer.svg" alt="Open Data Explorer" />
-        <span class="menuExplorer">Explorer</span>
-      </div>
-
-      <div>
-        <a class="feedbackstyle" href="https://aka.ms/cosmosdbfeedback?subject=Cosmos%20DB%20Emulator%20Feedback">
-          <img id="imgiconwidth1" src="/Feedback.svg" alt="Report Issue" />
-          <span class="menuExplorer">Report Issue</span>
-        </a>
-      </div>
-    </nav>
-
-    <iframe
-      name="quickstart"
-      class="iframe"
-      src="quickstart.html"
-      data-bind="visible: navigationSelection() === 'quickstart'"
-    >
-    </iframe>
-
-    <iframe
-      name="explorer"
-      class="iframe"
-      src="explorer.html?platform=Emulator"
-      data-bind="visible: navigationSelection() === 'explorer'"
-    >
-    </iframe>
+    <div id="root"></div>
   </body>
 </html>
diff --git a/tsconfig.strict.json b/tsconfig.strict.json
index 6b80784b5..d48357cda 100644
--- a/tsconfig.strict.json
+++ b/tsconfig.strict.json
@@ -83,7 +83,6 @@
     "./src/Explorer/Tree/AccessibleVerticalList.ts",
     "./src/GitHub/GitHubConnector.ts",
     "./src/HostedExplorerChildFrame.ts",
-    "./src/Index.ts",
     "./src/Platform/Hosted/Authorization.ts",
     "./src/Platform/Hosted/Components/MeControl.test.tsx",
     "./src/Platform/Hosted/Components/MeControl.tsx",
diff --git a/webpack.config.js b/webpack.config.js
index 12c980224..054b06984 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -198,7 +198,7 @@ module.exports = function (_env = {}, argv = {}) {
     mode: mode,
     entry: {
       main: "./src/Main.tsx",
-      index: "./src/Index.ts",
+      index: "./src/Index.tsx",
       quickstart: "./src/quickstart.ts",
       hostedExplorer: "./src/HostedExplorer.tsx",
       testExplorer: "./test/testExplorer/TestExplorer.ts",