Made it obvious when a snippet is shared

jordan-dalby · Nov 9, 2024 · a02167b · a02167b
1 parent 1a7f619
commit a02167b
Show file tree

Hide file tree

Showing 2 changed files with 38 additions and 9 deletions.
diff --git a/client/src/components/snippets/SnippetCard.tsx b/client/src/components/snippets/SnippetCard.tsx
@@ -1,11 +1,12 @@
-import React, { useState } from 'react';
-import { Pencil, Trash2, Clock, ChevronLeft, ChevronRight, FileCode, Share } from 'lucide-react';
+import React, { useState, useEffect } from 'react';
+import { Pencil, Trash2, Clock, ChevronLeft, ChevronRight, FileCode, Share, Users } from 'lucide-react';
 import { formatDistanceToNow } from 'date-fns';
 import DeleteConfirmationModal from './DeleteConfirmationModal';
 import { CodeFragment, Snippet } from '../../types/types';
 import { getLanguageLabel } from '../../utils/languageUtils';
 import PreviewCodeBlock from './PreviewCodeBlock';
 import CategoryList from './categories/CategoryList';
+import { getSharesBySnippetId } from '../../api/share';
 
 export interface SnippetCardProps {
   snippet: Snippet;
@@ -40,6 +41,21 @@ const SnippetCard: React.FC<SnippetCardProps> = ({
 }) => {
   const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false);
   const [currentFragmentIndex, setCurrentFragmentIndex] = useState(0);
+  const [activeShares, setActiveShares] = useState(0);
+
+  useEffect(() => {
+    const loadShareStatus = async () => {
+      try {
+        const shares = await getSharesBySnippetId(snippet.id);
+        const validShares = shares.filter(share => !share.expired);
+        setActiveShares(validShares.length);
+      } catch (error) {
+        console.error('Error loading share status:', error);
+      }
+    };
+
+    loadShareStatus();
+  }, [snippet]);
 
   const handleDeleteClick = (e: React.MouseEvent) => {
     e.stopPropagation();
@@ -111,9 +127,20 @@ const SnippetCard: React.FC<SnippetCardProps> = ({
       >
         <div className="flex justify-between items-start gap-4 mb-3">
           <div className="min-w-0 flex-1">
-            <h3 className={`${compactView ? 'text-lg' : 'text-xl'} font-bold text-gray-200 truncate`} title={snippet.title}>
-              {snippet.title}
-            </h3>
+            <div className="flex items-center gap-2">
+              <h3 className={`${compactView ? 'text-lg' : 'text-xl'} font-bold text-gray-200 truncate leading-none`} title={snippet.title}>
+                {snippet.title}
+              </h3>
+              {activeShares > 0 && (
+                <div 
+                  className="inline-flex items-center gap-1 px-2 bg-blue-900/40 text-blue-300 rounded text-xs border border-blue-700/30 leading-relaxed"
+                  title={`Shared with ${activeShares} active link${activeShares === 1 ? '' : 's'}`}
+                >
+                  <Users size={12} className="stroke-[2.5]" />
+                  <span>{activeShares}</span>
+                </div>
+              )}
+            </div>
             <div className="flex items-center gap-3 mt-1 text-sm text-gray-400">
               <div className="truncate">{getUniqueLanguages(snippet.fragments)}</div>
               <div className="flex items-center gap-1 text-xs text-gray-500 whitespace-nowrap">

diff --git a/client/src/hooks/useSnippets.ts b/client/src/hooks/useSnippets.ts
@@ -18,7 +18,7 @@ export const useSnippets = () => {
     }
   };
 
-  const loadSnippets = useCallback(async () => {
+  const loadSnippets = useCallback(async (force: boolean) => {
     if (!isLoading || hasLoadedRef.current) return;
 
     try {
@@ -29,7 +29,9 @@ export const useSnippets = () => {
       setSnippets(sortedSnippets);
 
       if (!hasLoadedRef.current) {
-        addToast('Snippets loaded successfully', 'success');
+        if (!force) {
+          addToast('Snippets loaded successfully', 'success');
+        }
         hasLoadedRef.current = true;
       }
     } catch (error: any) {
@@ -42,13 +44,13 @@ export const useSnippets = () => {
   }, [isLoading, addToast, logout]);
 
   useEffect(() => {
-    loadSnippets();
+    loadSnippets(false);
   }, [loadSnippets]);
 
   const reloadSnippets = useCallback(() => {
     hasLoadedRef.current = false;
     setIsLoading(true);
-    loadSnippets();
+    loadSnippets(true);
   }, [loadSnippets]);
 
   const addSnippet = async (snippetData: Omit<Snippet, 'id' | 'updated_at'>) => {