typescript support

.gitignore

@@ -1 +1,2 @@
-ignore
+ignore
+node_modules

globals.d.ts

@@ -0,0 +1,6 @@
+import { useState as useReactState, useEffect as useReactEffect } from "react";
+
+declare global {
+  const useState: typeof useReactState;
+  const useEffect: typeof useReactEffect;
+}

package.json

@@ -0,0 +1,15 @@
+{
+  "name": "bwe-demos",
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "devDependencies": {
+    "@types/react": "^18.2.34"
+  }
+}

src/LandingPage.jsx

@@ -1,7 +1,8 @@
-State.init({ isDebug: true, showMonitor: true });
+const [isDebug, setIsDebug] = useState<bool>(true);
+const [showMonitor, setShowMonitor] = useState<bool>(true);
 
 const buildUrl = (componentPath) => {
-  return `/${componentPath}?isDebug=${state.isDebug}&showMonitor=${state.showMonitor}`;
+  return `/${componentPath}?isDebug=${isDebug}&showMonitor=${showMonitor}`;
 };
 
 return (
@@ -49,8 +50,8 @@ return (
               type="checkbox"
               value=""
               id="flexCheckDefault"
-              checked={state.isDebug}
-              onChange={() => State.update({ isDebug: !state.isDebug })}
+              checked={isDebug}
+              onChange={() => setIsDebug(!isDebug)}
             />
             <label className="form-check-label" for="flexCheckDefault">
               Enable debug mode
@@ -62,8 +63,8 @@ return (
               type="checkbox"
               value=""
               id="flexCheckChecked"
-              checked={state.showMonitor}
-              onChange={() => State.update({ showMonitor: !state.showMonitor })}
+              checked={showMonitor}
+              onChange={() => setShowMonitor(!showMonitor)}
             />
             <label className="form-check-label" for="flexCheckChecked">
               Display Component monitor

src/Posts/Feed.jsx → src/Posts/Feed.tsx

@@ -1,10 +1,49 @@
 const GRAPHQL_ENDPOINT = "https://near-queryapi.api.pagoda.co";
 
-const [sort, setSort] = useState(null);
+const [sort, setSort] = useState("");
 const [loading, setLoading] = useState(false);
-const [posts, setPosts] = useState([]);
+const [posts, setPosts] = useState<Post[]>([]);
 
-async function fetchGraphQL(operationsDoc, operationName, variables) {
+interface PostsResponse {
+  data: {
+    dataplatform_near_social_feed_moderated_posts: Post[];
+    dataplatform_near_social_feed_moderated_posts_aggregate: {
+      aggregate: {
+        count: number;
+      };
+    };
+  };
+}
+
+interface Post {
+  account_id: string;
+  block_height: number;
+  block_timestamp: number;
+  content: string;
+  receipt_id: string;
+  accounts_liked: string[];
+  last_comment_timestamp: number;
+  comments: {
+    account_id: string;
+    block_height: number;
+    block_timestamp: string;
+    content: string;
+  }[];
+  verifications: {
+    human_provider: string;
+    human_valid_until: string;
+    human_verification_level: string;
+  }[];
+}
+
+const a = 1;
+console.log(a);
+
+async function fetchGraphQL(
+  operationsDoc,
+  operationName,
+  variables
+): Promise<PostsResponse> {
   const response = await fetch(`${GRAPHQL_ENDPOINT}/v1/graphql`, {
     method: "POST",
     headers: { "x-hasura-role": "dataplatform_near" },
@@ -14,7 +53,7 @@ async function fetchGraphQL(operationsDoc, operationName, variables) {
       operationName: operationName,
     }),
   });
-  const result = await response.json();
+  const result: PostsResponse = await response.json();
   return result;
 }