[feat] User pixels placed (#79)

* getPixelCount route added * Created backend route and fetched on the frontend * pgx instead of sql, cleanup --------- Co-authored-by: Brandon Roberts <[email protected]> Co-authored-by: Brandon R <[email protected]>
keep-starknet-strange · Apr 25, 2024 · d11ea63 · d11ea63
1 parent 08ba10b
commit d11ea63
Show file tree

Hide file tree

Showing 2 changed files with 80 additions and 20 deletions.
diff --git a/backend/routes/user.go b/backend/routes/user.go
@@ -2,45 +2,90 @@ package routes
 
 import (
 	"context"
+	"fmt"
 	"net/http"
 
+	"github.com/jackc/pgx/v5"
+
 	"github.com/keep-starknet-strange/art-peace/backend/core"
 )
 
 func InitUserRoutes() {
 	http.HandleFunc("/getExtraPixels", getExtraPixels)
 	http.HandleFunc("/getUsername", getUsername)
+	http.HandleFunc("/getPixelCount", getPixelCount)
 }
 
-func getExtraPixels(w http.ResponseWriter, r *http.Request) {
+func setCommonHeaders(w http.ResponseWriter) {
 	w.Header().Set("Access-Control-Allow-Origin", "*")
-	user := r.URL.Query().Get("address")
+	w.Header().Set("Content-Type", "application/json")
+}
+
+func getExtraPixels(w http.ResponseWriter, r *http.Request) {
+	setCommonHeaders(w)
 
+	user := r.URL.Query().Get("address")
 	var available string
 	err := core.ArtPeaceBackend.Databases.Postgres.QueryRow(context.Background(), "SELECT available FROM ExtraPixels WHERE address = $1", user).Scan(&available)
 	if err != nil {
-		w.WriteHeader(http.StatusInternalServerError)
-		w.Write([]byte(err.Error()))
+		if err == pgx.ErrNoRows {
+			w.WriteHeader(http.StatusOK)
+			w.Write([]byte(`{"available": 0}`))
+		} else {
+			w.WriteHeader(http.StatusInternalServerError)
+			w.Write([]byte(`{"error": "Internal server error"}`))
+		}
 		return
 	}
 
-	w.Header().Set("Access-Control-Allow-Origin", "*")
 	w.WriteHeader(http.StatusOK)
-	w.Write([]byte(available))
+	w.Write([]byte(fmt.Sprintf(`{"available": "%s"}`, available)))
 }
 
 func getUsername(w http.ResponseWriter, r *http.Request) {
-	address := r.URL.Query().Get("address")
+	setCommonHeaders(w)
 
+	address := r.URL.Query().Get("address")
 	var name string
 	err := core.ArtPeaceBackend.Databases.Postgres.QueryRow(context.Background(), "SELECT name FROM Users WHERE address = $1", address).Scan(&name)
 	if err != nil {
-		w.WriteHeader(http.StatusInternalServerError)
-		w.Write([]byte(err.Error()))
+		if err == pgx.ErrNoRows {
+			w.WriteHeader(http.StatusNotFound)
+			w.Write([]byte(`{"error": "Username not found"}`))
+		} else {
+			w.WriteHeader(http.StatusInternalServerError)
+			w.Write([]byte(`{"error": "Internal server error"}`))
+		}
+		return
+	}
+
+	w.WriteHeader(http.StatusOK)
+	w.Write([]byte(fmt.Sprintf(`{"name": "%s"}`, name)))
+}
+
+func getPixelCount(w http.ResponseWriter, r *http.Request) {
+	setCommonHeaders(w)
+
+	userAddress := r.URL.Query().Get("address")
+	if userAddress == "" {
+		http.Error(w, `{"error": "Missing address parameter"}`, http.StatusBadRequest)
+		return
+	}
+
+	var count int
+	query := "SELECT COUNT(*) FROM Pixels WHERE address = $1"
+	err := core.ArtPeaceBackend.Databases.Postgres.QueryRow(context.Background(), query, userAddress).Scan(&count)
+	if err != nil {
+		if err == pgx.ErrNoRows {
+			w.WriteHeader(http.StatusOK)
+			w.Write([]byte(`{"count": 0}`))
+		} else {
+			w.WriteHeader(http.StatusInternalServerError)
+			w.Write([]byte(`{"error": "Internal server error"}`))
+		}
 		return
 	}
 
-	w.Header().Set("Access-Control-Allow-Origin", "*")
 	w.WriteHeader(http.StatusOK)
-	w.Write([]byte(name))
+	w.Write([]byte(fmt.Sprintf(`{"count": %d}`, count)))
 }
diff --git a/frontend/src/tabs/Account.js b/frontend/src/tabs/Account.js
@@ -3,23 +3,39 @@ import "./Account.css";
 import BasicTab from "./BasicTab.js";
 
 const Account = (props) => {
-  // TODO: Create the account tab w/ wallet address, username, pixel info, top X % users ( pixels placed? ), ...
   const [username, setUsername] = useState("");
-  const [pixelCount, setPixelCount] = useState(2572);
+  const [pixelCount, setPixelCount] = useState(0);
   const [accountRank, setAccountRank] = useState("");
   const [isUsernameSaved, saveUsername] = useState(false);
-
+
+  const userAddress = "0x0000000000000000000000000000000000000000000000000000000000000000";
+
   const handleSubmit = (event) => {
     event.preventDefault();
     setUsername(username);
     saveUsername(true);
   };
-
+  
   const editUsername = (e) => {
     saveUsername(false);
-  }
+  };
+
+  useEffect(() => {
+    const fetchPixelCount = async () => {
+      const response = await fetch(`http://localhost:8080/getPixelCount?address=${userAddress}`);
+      if (response.ok) {
+        const data = await response.json();
+        setPixelCount(data.count);
+      } else {
+        console.error('Failed to fetch pixel count:', await response.text());
+      }
+    };
+
+    fetchPixelCount();
+  }, [userAddress]);
 
   useEffect(() => {
+    // Update rank based on pixel count
     if (pixelCount >= 5000) {
       setAccountRank("Champion");
     } else if (pixelCount >= 3000) {
@@ -31,14 +47,13 @@ const Account = (props) => {
     } else {
       setAccountRank("Bronze");
     }
-  });
+  }, [pixelCount]);
+
   return (
     <BasicTab title="Account">
       <div className="Account__flex">
         <p>Address:</p>
-        <p className="Account__wrap">
-          0x0000000000000000000000000000000000000000000000000000000000000000
-        </p>
+        <p className="Account__wrap">{userAddress}</p>
       </div>
       <div className="Account__flex Account__flex--center">
         <p>Username:</p>