Add stats on search modal and change average length stat to float

Author: Leo7Deng

backend/circles/handler.go

@@ -277,7 +277,41 @@ func SearchTextHandler(w http.ResponseWriter, r *http.Request) {
 		json.NewEncoder(w).Encode("Failed to search circles\n")
 		return
 	}
+	type Stats struct {
+		TotalMatches int `json:"total_matches"`
+		AverageLength float32 `json:"average_length"`
+		MostFoundAuthor string `json:"most_found_author"`
+	}
+	var stats Stats
+	stats.TotalMatches = len(results)
+	if stats.TotalMatches > 0 {
+		var totalLength int
+		authorMap := make(map[string]int)
+		for _, result := range results {
+			totalLength += len(result.Content)
+			authorMap[result.AuthorUsername]++
+		}
+		stats.AverageLength = float32(totalLength) / float32(stats.TotalMatches)
+		var maxCount int
+		var mostFoundAuthor string
+		for author, count := range authorMap {
+			if count > maxCount {
+				maxCount = count
+				mostFoundAuthor = author
+			}
+		}
+		stats.MostFoundAuthor = mostFoundAuthor
+	}
+
+	fmt.Printf("Search stats: %v\n", stats)
+
 	fmt.Printf("Search results: %v\n", results)
 	w.WriteHeader(http.StatusOK)
-	json.NewEncoder(w).Encode(results)
+	json.NewEncoder(w).Encode(struct {
+		Results []models.SearchMessage `json:"results"`
+		Stats   Stats                  `json:"stats"`
+	}{
+		Results: results,
+		Stats:   stats,
+	})
 }

frontend/app/components/Dashboard.css

@@ -20,7 +20,6 @@
 
 .modal {
     width: 24rem;
-    max-height: 50vh;
     background: white;
     border-radius: 10px;
     padding: 2rem;

frontend/app/components/SearchModal.css

@@ -1,5 +1,5 @@
 .search-modal {
-    height: 80vh;
+    height: 52vh;
 }
 
 .search-result-content {
@@ -17,7 +17,13 @@
 .search-results {
     padding: 1rem;
     overflow-y: scroll;
-    height: 34vh;
+    height: 35vh;
     border: 1px solid hsl(0, 0%, 90%);
     border-radius: 5px;
+}
+
+.search-stats {
+    color: hsl(0, 0%, 40%);
+    font-size: 0.85rem;
+    margin-top: 0.6rem;
 }

frontend/app/components/SearchModal.tsx

@@ -17,6 +17,10 @@ function SearchModal({ isOpen, setOpen, circleId }: SearchModalProps) {
     const { getAccessToken } = authContext;
 
     const [results, setResults] = useState<any[]>([]);
+    const [totalMatches, setTotalMatches] = useState(0);
+    const [averageLength, setAverageLength] = useState(0);
+    const [mostFoundAuthor, setMostFoundAuthor] = useState("");
+
     async function handleSubmit(e: React.FormEvent<HTMLFormElement>) {
         e.preventDefault();
         const token = await getAccessToken();
@@ -35,12 +39,17 @@ function SearchModal({ isOpen, setOpen, circleId }: SearchModalProps) {
         })
             .then(async (response) => {
                 const data = await response.json();
-                const mappedResults = data.map((result: any) => ({
+                const mappedResults = data.results.map((result: any) => ({
                     content: result.content,
                     created_at: result.created_at,
                     author: result.author_username
                 }));
                 setResults(mappedResults);
+                setTotalMatches(data.stats.total_matches);
+                setAverageLength(data.stats.average_length);
+                setMostFoundAuthor(data.stats.most_found_author
+                    ? data.stats.most_found_author
+                    : "No author found");
                 if (!response.ok) {
                     console.log("Error:", data);
                 }
@@ -84,6 +93,11 @@ function SearchModal({ isOpen, setOpen, circleId }: SearchModalProps) {
                     </div>
                 ))}
             </div>
+            <div className="search-stats">
+                Total matches: {totalMatches ? totalMatches : "N/A"} <br />
+                Average match length: {averageLength ? averageLength : "N/A"} <br />
+                Most found author: {mostFoundAuthor ? mostFoundAuthor : "N/A"}
+            </div>
         </div>
     );
 }