Graphs lists improvements

Author: sofvanh

backend/src/db/operations/graphOperations.ts

@@ -144,24 +144,28 @@ async function getGraphDataFromDb(graphIds: string[]): Promise<GraphData[]> {
   const placeholders = graphIds.map((_, i) => `$${i + 1}`).join(',');
   const result = await query(
     `SELECT g.id, g.name,
-      COUNT(a.id) as argument_count,
-      MAX(a.id) as latest_argument_id
+      COUNT(DISTINCT a.id) as argument_count,
+      COUNT(r.id) as reaction_count,
+      GREATEST(MAX(a.id), MAX(r.id)) as latest_activity
      FROM graphs g
      LEFT JOIN arguments a ON g.id = a.graph_id
+     LEFT JOIN reactions r ON a.id = r.argument_id
      WHERE g.id IN (${placeholders})
-     GROUP BY g.id, g.name`,
+     GROUP BY g.id, g.name
+     ORDER BY GREATEST(MAX(a.id), MAX(r.id)) DESC NULLS FIRST`,
     graphIds
   );
 
   if (result.rows.length === 0) {
     throw new Error('Graphs not found');
   }
 
-  return result.rows.map(row => ({
+  return result.rows.map((row): GraphData => ({
     id: row.id,
     name: row.name,
-    argumentCount: parseInt(row.argument_count),
-    lastActivity: row.latest_argument_id ? getTimestamp(row.latest_argument_id) : undefined
+    argumentCount: parseInt(row.argument_count, 10),
+    reactionCount: parseInt(row.reaction_count, 10),
+    lastActivity: row.latest_activity ? getTimestamp(row.latest_activity) : undefined
   }));
 }
 

frontend/src/components/FeaturedDiscussionsList.tsx

@@ -11,12 +11,7 @@ export const FeaturedDiscussionsList = () => {
   useEffect(() => {
     socket?.emit('get featured graphs', {}, (response: any) => {
       if (response.success) {
-        const sortedGraphs = [...response.data.graphs].sort((a, b) => {
-          if (a.name === "Nexus Feedback") return 1;
-          if (b.name === "Nexus Feedback") return -1;
-          return 0;
-        });
-        setGraphs(sortedGraphs);
+        setGraphs(response.data.graphs);
       }
     });
   }, [socket]);

frontend/src/components/GraphCard.tsx

@@ -4,7 +4,7 @@ import { formatDate } from '../utils/time';
 import { PiArrowRight } from 'react-icons/pi';
 import { getActivityColor } from '../utils/colors';
 
-export const GraphCard = ({ id, name, argumentCount, lastActivity }: GraphData) => {
+export const GraphCard = ({ id, name, argumentCount, reactionCount, lastActivity }: GraphData) => {
   return (
     <Link to={`/feed/${id}`} className="block">
       <div className="
@@ -18,10 +18,14 @@ export const GraphCard = ({ id, name, argumentCount, lastActivity }: GraphData)
         <div className="flex justify-between items-start">
           <div className="flex-1">
             <h4 className="m-0 text-stone-800 transition-colors duration-150">{name}</h4>
-            <div className="justify-between mt-2 flex flex-wrap">
+            <div className="mt-2 flex flex-wrap">
               <small className="mr-2">
                 <span className="font-bold">{argumentCount}</span> statement{argumentCount !== 1 ? 's' : ''}
               </small>
+              <small className="mr-2">
+                <span className="font-bold">{reactionCount}</span> reaction{argumentCount !== 1 ? 's' : ''}
+              </small>
+              <div className="flex-grow"></div>
               <small>
                 Last activity: <span style={{ color: getActivityColor(lastActivity) }} className="font-bold">
                   {lastActivity ? formatDate(lastActivity) : 'never'}

frontend/src/components/GraphsList.tsx

@@ -7,7 +7,6 @@ interface GraphsListProps {
 }
 
 // TODO This should be paginated
-// TODO This should be sorted by most recent
 // TODO If the list of graphs is empty, show a message
 export const GraphsList = ({ graphs }: GraphsListProps) => {
   return (

frontend/src/shared/types.ts

@@ -66,6 +66,7 @@ export interface GraphData {
   id: string;
   name: string;
   argumentCount: number;
+  reactionCount: number;
   lastActivity: number | undefined;
 }