Json server

package.json

@@ -3,7 +3,7 @@
   "version": "0.1.0",
   "private": true,
   "scripts": {
-    "dev": "next dev -p 3002",
+    "dev": "json-server --watch pages/API/.db.json --port 3010 & next dev -p 3002",
     "build": "next build",
     "start": "next start"
   },
@@ -17,6 +17,7 @@
     "@types/react": "^16.9.53",
     "axios": "^0.21.0",
     "dotenv": "^8.2.0",
+    "json-server": "^0.16.2",
     "typescript": "^4.0.3"
   }
 }

pages/api/.db.json

@@ -0,0 +1,12 @@
+{
+    "shops": [
+      { "SK": "paso2020.myshopify.com", "accessToken": "******", "theme-name": "theme-pol" },
+      { "SK": "stag-store-2020.myshopify.com", "accessToken": "******", "theme-name": "theme-pol" },
+      { "SK": "stag-store-2021.myshopify.com", "accessToken": "******", "theme-name": "theme-pol" }
+
+    ],
+    "themes": [
+      { "SK": "theme-pol", "src": "https://devw.github.io/script-tag/bundle.js"  },
+      { "SK": "theme-antonio", "src": "https://devw.github.io/script-tag/bundle.js"}
+    ]
+  }

pages/nav/index.tsx

@@ -5,14 +5,14 @@ import styles from "./nav.module.css"
 export const Nav: React.FC = () => {
     return (
         <div className={styles.nav}>
-            <div>
+            {/* <div>
                 <Link href="/script-tag">Script-tag</Link>
-            </div>
+            </div> */}
             <div>
                 <Link href="/shop">shop</Link>
             </div>
             <div>
-                <Link href="/upload">Upload a theme</Link>
+                <Link href="/themes">Themes</Link>
             </div>
         </div>
     );

pages/shop/index.tsx

@@ -1,17 +1,20 @@
-import { JS2TBL } from "../utils";
+type Props = { data: object[{ SK: string }] };
 
-type Props = { data: object[] };
 
-const Shop: React.FC<Props> = ({ data }) => {
-    return <JS2TBL title="Shop Info" json={data} />
+const Shop: React.FC<Props> = ({ data }): JSX.Element => {
+    return <div className="shops">
+        {data.map((shop, i) => (
+            <div key={i} className="user"><a target="_" href={`http://${shop.SK}`}>{shop.SK} </a></div>
+        ))}
+    </div>
 }
 
 export async function getServerSideProps() {
     const { AWS_ENDPOINT, SHOP } = process.env;
-    const res = await fetch(`${AWS_ENDPOINT}/dev/shop/${SHOP}`);
-    const data = await res.json();
-    return { props: { data } };
+    const res = await fetch(`${AWS_ENDPOINT}/shops`);
+    const json = await res.json();
 
+    return { props: { data: json } }
 }
 
 export default Shop;

pages/themes/index.tsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import Link from "next/link";
 import { Option } from "./option-theme";
 import { onSubmit } from "./onSubmit-theme";
 
@@ -14,7 +15,9 @@ const Themes: React.FC<IProps> = ({ data }): JSX.Element => {
             <select>
                 {listItems}
             </select>
-            <button type="submit">Upload theme</button>
+            <button type="button" onClick={changeCurrentTheme}>Change the current theme</button>
+            Or
+            <Link href="/upload">Upload a new theme</Link>
         </form>
     );
 }
@@ -26,28 +29,14 @@ export interface Theme {
 
 export async function getServerSideProps() {
     const { AWS_ENDPOINT, SHOP } = process.env;
-    const res = await fetch(`${AWS_ENDPOINT}/dev/shop/${SHOP}`);
+    const res = await fetch(`${AWS_ENDPOINT}/themes`);
     const data: Theme[] | undefined = await res.json();
-    return {
-        props: {
-            data: [
-                {
-                    SK: "theme-1",
-                    src: "http://adsdsads.js"
-                },
-                {
-                    SK: "theme-2",
-                    src: "http://adsdsads.js"
-                },
-                {
-                    SK: "theme-3",
-                    src: "http://adsdsads.js"
-                }
-            ]
-        }
-    }
     return { props: { data } };
 
 }
 
+const changeCurrentTheme = () => {
+
+}
+
 export default Themes;