addresses bug with truncation and filtering (#3896)

# Description and Motivation
- truncates author names only on smaller screens (below the 'md'
breakpoint).
- stores the full author names and filters the value of the full author
name, when previously it was using the label. this caused issues with
finding the articles written by the Authors with truncated names
- added isMdAndUp to the dependencies to update truncation logic on
viewport changes.

## Has this been tested? How?
tests passing

## Screenshots (if appropriate)
![Screenshot 2024-12-30 at 4 54
04 PM](https://github.com/user-attachments/assets/3cd81d86-0c92-4954-95f2-020b6b4f9d37)

![Screenshot 2024-12-30 at 4 53
43 PM](https://github.com/user-attachments/assets/a2574a53-f405-4c36-add4-6267867d0079)


## Types of changes
- Bug fix

## New frontend preview link is below in the Netlify comment 😎

---------

Co-authored-by: Ben Hammond 🎛️ <[email protected]>

frontend/src/pages/News/NewsAndStoriesPage.tsx

@@ -11,60 +11,75 @@ import type { Article } from './ArticleTypes'
 import CheckboxDropdown from './CheckboxDropdown'
 import NewsAndStoriesPreviewCardOutlined from './NewsAndStoriesPreviewCardOutlined'
 
+interface AuthorItem {
+  value: string
+  label: string
+}
+
 export default function NewsAndStoriesPage() {
   const { isLoading, error, data }: any = useQuery(
     blogUtils.ARTICLES_KEY,
     fetchNewsData,
     blogUtils.REACT_QUERY_OPTIONS,
   )
+
   const [searchParams] = useSearchParams()
   const [allArticles, setAllArticles] = useState<Article[]>([])
-  const [authors, setAuthors] = useState<string[]>([])
+
+  const [authors, setAuthors] = useState<AuthorItem[]>([])
   const [categories, setCategories] = useState<string[]>([])
+
   const [selectedAuthors, setSelectedAuthors] = useState<string[]>([])
   const [selectedCategories, setSelectedCategories] = useState<string[]>([])
   const [showAllArticles, setShowAllArticles] = useState(false)
   const [loadingMoreArticles, setLoadingMoreArticles] = useState(false)
-  const isLgUp = useIsBreakpointAndUp('lg')
-  const bgHeight = isLgUp ? '42rem' : '12rem'
+  const isMdAndUp = useIsBreakpointAndUp('md')
+  const isLgAndUp = useIsBreakpointAndUp('lg')
+  const bgHeight = isLgAndUp ? '42rem' : '12rem'
 
-  // Fetch and process articles
   useEffect(() => {
     if (data?.data) {
       const articles = data.data
       setAllArticles(articles)
 
-      const authorSet = new Set<string>()
+      const authorMap = new Map<string, string>()
       const categorySet = new Set<string>()
 
       articles.forEach((article: Article) => {
         if (article.acf?.contributing_author) {
-          let author = article.acf.contributing_author
-          if (author.length > 27) {
-            author = `${author.substring(0, 27)}...`
+          const fullAuthor = article.acf.contributing_author.trim()
+
+          if (!authorMap.has(fullAuthor)) {
+            const truncated =
+              !isMdAndUp && fullAuthor.length > 27
+                ? `${fullAuthor.substring(0, 27)}...`
+                : fullAuthor
+
+            authorMap.set(fullAuthor, truncated)
           }
-          authorSet.add(author)
         }
+
         if (article._embedded?.['wp:term']) {
-          article._embedded['wp:term'][0]?.forEach((term: { name: string }) =>
-            categorySet.add(term.name),
-          )
+          article._embedded['wp:term'][0]?.forEach((term: { name: string }) => {
+            categorySet.add(term.name)
+          })
         }
       })
 
-      const sortedAuthors = Array.from(authorSet).sort((a, b) =>
-        a.localeCompare(b),
+      const authorItems: AuthorItem[] = Array.from(authorMap.entries()).map(
+        ([value, label]) => ({ value, label }),
       )
+      authorItems.sort((a, b) => a.label.localeCompare(b.label))
+
       const sortedCategories = Array.from(categorySet).sort((a, b) =>
         a.localeCompare(b),
       )
 
-      setAuthors(sortedAuthors)
+      setAuthors(authorItems)
       setCategories(sortedCategories)
     }
-  }, [data?.data])
+  }, [data?.data, isMdAndUp])
 
-  // Apply filters from URL on load
   useEffect(() => {
     const category = searchParams.get('category')
     const author = searchParams.get('author')
@@ -79,14 +94,17 @@ export default function NewsAndStoriesPage() {
 
   const filteredArticles =
     allArticles.filter((article: Article) => {
+      const fullAuthor = article.acf?.contributing_author
       const matchesAuthor =
         selectedAuthors.length === 0 ||
-        selectedAuthors.includes(article.acf?.contributing_author)
+        (fullAuthor && selectedAuthors.includes(fullAuthor))
+
       const matchesCategory =
         selectedCategories.length === 0 ||
         article._embedded?.['wp:term'][0]?.some((term: { name: string }) =>
           selectedCategories.includes(term.name),
         )
+
       return matchesAuthor && matchesCategory
     }) || []
 
@@ -150,9 +168,9 @@ export default function NewsAndStoriesPage() {
           <div className='mt-4 flex w-full flex-col gap-4 md:flex-row'>
             <CheckboxDropdown
               label='Authors'
-              options={authors.map((author) => ({
-                value: author,
-                label: author,
+              options={authors.map((a) => ({
+                value: a.value,
+                label: a.label,
               }))}
               selectedOptions={selectedAuthors}
               onSelectionChange={handleAuthorChange}
@@ -202,15 +220,13 @@ export default function NewsAndStoriesPage() {
                           </div>
 
                           <div className='col-span-1 mb-4 grid grid-cols-1 gap-4 smMd:grid-cols-2 md:col-span-3 lg:mb-0'>
-                            {firstFiveArticles
-                              .slice(1)
-                              .map((article: Article) => (
-                                <NewsAndStoriesPreviewCardOutlined
-                                  key={article.id}
-                                  article={article}
-                                  bgHeight='12rem'
-                                />
-                              ))}
+                            {firstFiveArticles.slice(1).map((article) => (
+                              <NewsAndStoriesPreviewCardOutlined
+                                key={article.id}
+                                article={article}
+                                bgHeight='12rem'
+                              />
+                            ))}
                           </div>
                         </>
                       </div>