Working version of message search with text, author, and time

Author: Leo7Deng

backend/models/message.go

@@ -1,7 +1,5 @@
 package models
 
-import "time"
-
 type WebsocketMessage struct {
 	Origin  string      `json:"origin"` // user or server
     Type string      `json:"type"` // message or circle
@@ -19,6 +17,6 @@ type Message struct {
 
 type SearchMessage struct {
 	Content string `json:"content"`
-	CreatedAt time.Time `json:"created_at"`
+	CreatedAt string `json:"created_at"`
 	AuthorUsername string `json:"author_username"`
 }

backend/postgres/circles_repo.go

@@ -378,13 +378,15 @@ func SearchCircle(circleID string, content string) ([]models.SearchMessage, erro
 	defer rows.Close()
 
 	var messages []models.SearchMessage
+	var time time.Time
 	for rows.Next() {
 		var message models.SearchMessage
-		err = rows.Scan(&message.Content, &message.CreatedAt, &message.AuthorUsername)
+		err = rows.Scan(&message.Content, &time, &message.AuthorUsername)
 		if err != nil {
 			fmt.Fprintf(os.Stderr, "Unable to scan row: %v\n", err)
 			return nil, err
 		}
+		message.CreatedAt = time.Format("2006-01-02 15:04:05 EST")
 		messages = append(messages, message)
 	}
 	return messages, nil

frontend/app/components/SearchModal.css

@@ -1,3 +1,23 @@
 .search-modal {
     height: 80vh;
+}
+
+.search-result-content {
+    color: hsl(0, 0%, 20%);
+    font-size: 1rem;
+}
+
+.search-result-subtitle {
+    color: hsl(0, 0%, 40%);
+    font-size: 0.8rem;
+    margin-top: -0.2rem;
+    margin-bottom: 0.2rem;
+}
+
+.search-results {
+    padding: 1rem;
+    overflow-y: scroll;
+    height: 34vh;
+    border: 1px solid hsl(0, 0%, 90%);
+    border-radius: 5px;
 }

frontend/app/components/SearchModal.tsx

@@ -16,6 +16,7 @@ function SearchModal({ isOpen, setOpen, circleId }: SearchModalProps) {
     }
     const { getAccessToken } = authContext;
 
+    const [results, setResults] = useState<any[]>([]);
     async function handleSubmit(e: React.FormEvent<HTMLFormElement>) {
         e.preventDefault();
         const token = await getAccessToken();
@@ -34,12 +35,17 @@ function SearchModal({ isOpen, setOpen, circleId }: SearchModalProps) {
         })
             .then(async (response) => {
                 const data = await response.json();
+                const mappedResults = data.map((result: any) => ({
+                    content: result.content,
+                    created_at: result.created_at,
+                    author: result.author_username
+                }));
+                setResults(mappedResults);
                 if (!response.ok) {
                     console.log("Error:", data);
                 }
                 else {
                     console.log("Data:", data);
-                    setOpen(false);
                 }
             })
             .catch(error => {
@@ -70,6 +76,14 @@ function SearchModal({ isOpen, setOpen, circleId }: SearchModalProps) {
                     </button>
                 </div>
             </form>
+            <div className="search-results">
+                {results && results.map((result, index) => (
+                    <div key={index} className="search-result">
+                        <div className="search-result-content">{result.content}</div>
+                        <div className="search-result-subtitle">{result.author + " | " + result.created_at}</div>
+                    </div>
+                ))}
+            </div>
         </div>
     );
 }