Fix source feed styling

src/App/routes.tsx

@@ -52,7 +52,7 @@ const preferences = myWrapRoute({
 
 const viewAllSource = myWrapRoute({
     title: 'ViewAllSource',
-    path: 'view-all-source',
+    path: 'sources',
     component: () => import('#views/ViewAllSource'),
     componentProps: {},
     parent: root,

src/views/ViewAllSource/SourceCard/i18n.json

@@ -1,7 +1,6 @@
 {
-    "namespace": "source card",
+    "namespace": "sourceCard",
     "strings": {
-        "languageTitle":"language",
-        "sourceCardLastUpdated":"Date"
+        "sourceCardAlt": "Logo"
     }
 }

src/views/ViewAllSource/SourceCard/index.tsx

@@ -1,52 +1,43 @@
 import {
-    Button,
     Container,
+    Header,
 } from '@ifrc-go/ui';
+import { useTranslation } from '@ifrc-go/ui/hooks';
 
+import { SourceFeedsQuery } from '#generated/types';
+
+import i18n from './i18n.json';
 import styles from './styles.module.css';
 
-interface Props {
-    className?: string;
-}
+type SourceFeed = NonNullable<NonNullable<SourceFeedsQuery['public']>['feeds']>['items'][number];
 
-interface FeedsData {
-    logo: string;
-    name: string;
-    language: string;
-}
 interface Props {
-    className?: string;
-    feedsData: FeedsData;
+    data: SourceFeed;
 }
-function SourceCard(props: Props) {
-    const { className, feedsData } = props;
 
-    if (!feedsData || !feedsData.logo) {
-        return null;
-    }
+function SourceCard(props: Props) {
+    const {
+        data,
+    } = props;
 
+    const strings = useTranslation(i18n);
     return (
         <Container
-            className={(styles.sourceCard, className)}
-            heading={(
-                <div className={styles.feedCart}>
-                    <div className={styles.flexContainer}>
-                        <img src={feedsData.logo} alt="Logo" className={styles.figure} />
-                        <div className={styles.separator} />
-                        <div>
-                            <p className={styles.severityIndicator}>{feedsData.name}</p>
-                            <Button
-                                className={styles.languageButton}
-                                variant="primary"
-                                name={feedsData.language}
-                            >
-                                {feedsData.language}
-                            </Button>
-                        </div>
-                    </div>
-                </div>
-            )}
-        />
+            className={styles.sourceCard}
+            childrenContainerClassName={styles.sourceDetail}
+        >
+            <img
+                className={styles.figure}
+                src={data.logo}
+                alt={strings.sourceCardAlt}
+            />
+            <Header
+                heading={data.name}
+                headingLevel={5}
+                headingDescriptionContainerClassName={styles.languageButton}
+                headingDescription={data.language}
+            />
+        </Container>
     );
 }
 export default SourceCard;

src/views/ViewAllSource/SourceCard/styles.module.css

@@ -1,30 +1,28 @@
-.flexContainer {
-    display: flex;  
-    gap: var(--go-ui-spacing-sm) var(--go-ui-spacing-lg);
-    align-items: center;
-    margin:2%;
+.source-card {
+   display: flex;
+   gap:var(--go-ui-spacing-lg);
+}
+
+.source-detail {
+    display: flex;
+    gap:var(--go-ui-spacing-lg);
     border-radius: var(--go-ui-border-radius-lg);
     box-shadow: var(--go-ui-box-shadow-md);
-    padding: var(--go-ui-spacing-md) var(--go-ui-spacing-lg);
-
-    .severity-indicator {
-        gap: var(--go-ui-spacing-sm) var(--go-ui-spacing-lg);  
-    }
+    padding: var(--go-ui-spacing-md);
 
-    .last-updated {
-        color: var(--go-ui-color-text-light);
+    .language-button {
+        align-items: flex-end;
+        border-radius: var(--go-ui-border-radius-2xl);
+        background-color: var(--go-ui-color-primary-red);
+        padding: var(--go-ui-spacing-4xs) var(--go-ui-spacing-lg);
+        width: fit-content;
+        text-decoration: none;
+        color: var(--go-ui-color-white);
+        font-weight: var(--go-ui-font-weight-medium);
     }
 
-    .figures {
-        gap: var(--go-ui-spacing-sm) var(--go-ui-spacing-sm);
-        justify-content: center;
-
-        .figure {
-            flex-basis: 0;
-            flex-grow: 1;
-            padding: 0;
-        }
+    .figure {
+        width: 10rem;
+        height: 4rem;
     }
 }
-
-

src/views/ViewAllSource/index.tsx

@@ -1,10 +1,16 @@
+import { useCallback } from 'react';
 import {
     gql,
     useQuery,
 } from '@apollo/client';
-import { Container } from '@ifrc-go/ui';
+import {
+    Container,
+    List,
+} from '@ifrc-go/ui';
 import { useTranslation } from '@ifrc-go/ui/hooks';
+import { isDefined } from '@togglecorp/fujs';
 
+import Page from '#components/Page';
 import {
     SourceFeedsQuery,
     SourceFeedsQueryVariables,
@@ -13,29 +19,43 @@ import {
 import SourceCard from './SourceCard';
 
 import i18n from './i18n.json';
+import styles from './style.module.css';
 
 const SOURCE_FEEDS = gql`
-    query SourceFeeds($pagination: OffsetPaginationInput) {
-        public {
-            feeds(pagination: $pagination) {
-                limit
-                offset
-                items {
-                    languages {
-                        logo
-                        name
-                        language
-                    }
+query SourceFeeds($pagination: OffsetPaginationInput) {
+    public {
+        feeds(pagination: $pagination) {
+            limit
+            offset
+            id
+            items {
+                languages {
+                    id
+                    logo
+                    name
+                    language
                 }
             }
         }
-    }`;
+    }
+}
+`;
+
+type SourceFeed = NonNullable<NonNullable<SourceFeedsQuery['public']>['feeds']>['items'][number];
 
 const PAGE_SIZE = 10;
+
+const keySelector = (source: SourceFeed) => source.id;
+
 // eslint-disable-next-line import/prefer-default-export
 export function Component() {
     const strings = useTranslation(i18n);
-    const { data } = useQuery<SourceFeedsQuery, SourceFeedsQueryVariables>(
+
+    const {
+        data: sourceFeedsResponse,
+        loading: sourceFeedsLoading,
+        error: sourceFeedsError,
+    } = useQuery<SourceFeedsQuery, SourceFeedsQueryVariables>(
         SOURCE_FEEDS,
         {
             variables: {
@@ -46,29 +66,29 @@ export function Component() {
             },
         },
     );
-    if (!data) {
-        return null;
-    }
-    return (
-        <Container
-            heading={strings.sourceFeedsTitle}
-            withHeaderBorder
-        >
-            {data.public.feeds.items?.map((item) => (
-                item.languages && item.languages.length > 0
-                    ? (
-                        <SourceCard
-                            key={item.languages.map((lang) => lang.name).join('-')}
-                            feedsData={{
-                                logo: item.languages[0].logo ?? '',
-                                name: item.languages[0].name,
-                                language: item.languages[0].language ?? '',
 
-                            }}
-                        />
-                    ) : null
-            ))}
-        </Container>
+    const rendererParams = useCallback((_: string, value: SourceFeed) => ({
+        data: value,
+    }), []);
+
+    return (
+        <Page>
+            <Container
+                heading={strings.sourceFeedsTitle}
+                childrenContainerClassName={styles.sourcesList}
+                withHeaderBorder
+            >
+                <List
+                    data={sourceFeedsResponse?.public.feeds.items}
+                    renderer={SourceCard}
+                    rendererParams={rendererParams}
+                    keySelector={keySelector}
+                    pending={sourceFeedsLoading}
+                    filtered={false}
+                    errored={isDefined(sourceFeedsError)}
+                />
+            </Container>
+        </Page>
     );
 }
 

src/views/ViewAllSource/style.module.css

@@ -0,0 +1,5 @@
+.sources-list {
+    display: grid;
+    grid-gap: var(--go-ui-spacing-md);
+    grid-template-columns: repeat(auto-fit, minmax(22rem, 1fr));
+}