Add query to display the source details in view all source

env.ts

@@ -4,4 +4,5 @@ import { defineConfig, Schema } from '@julr/vite-plugin-validate-env';
 export default defineConfig({
     APP_TITLE: Schema.string.optional(),
     APP_MAPBOX_ACCESS_TOKEN: Schema.string.optional(),
-})
+    APP_GRAPHQL_ENDPOINT: Schema.string.optional(),
+})

package.json

@@ -18,6 +18,7 @@
     },
     "dependencies": {
         "@apollo/client": "^3.9.9",
+        "@graphql-codegen/cli": "^5.0.2",
         "@graphql-codegen/introspection": "^4.0.3",
         "@graphql-codegen/typescript-operations": "^4.2.0",
         "@ifrc-go/icons": "^1.3.3",
@@ -81,4 +82,4 @@
         "vite-tsconfig-paths": "^4.2.2",
         "vitest": "^1.1.0"
     }
-}
+}

src/index.tsx

@@ -3,20 +3,32 @@ import 'mapbox-gl/dist/mapbox-gl.css';
 
 import React from 'react';
 import ReactDOM from 'react-dom/client';
+import {
+    ApolloClient,
+    ApolloProvider,
+    InMemoryCache,
+} from '@apollo/client';
 
 import App from './App';
 
 const webappRootId = 'webapp-root';
 
 const webappRootElement = document.getElementById(webappRootId);
-
+const APP_GRAPHQL_ENDPOINT = 'http://localhost:8000/graphql/';
+const client = new ApolloClient({
+    uri: APP_GRAPHQL_ENDPOINT,
+    cache: new InMemoryCache(),
+});
 if (!webappRootElement) {
     // eslint-disable-next-line no-console
     console.error(`Could not find html element with id '${webappRootId}'`);
 } else {
     ReactDOM.createRoot(webappRootElement).render(
         <React.StrictMode>
-            <App />
+            <ApolloProvider client={client}>
+                <App />
+            </ApolloProvider>
+            ,
         </React.StrictMode>,
     );
 }

src/views/ViewAllSource/SourceCard/index.tsx

@@ -1,59 +1,53 @@
 import {
     Button,
     Container,
-    TextOutput,
 } from '@ifrc-go/ui';
-import { useTranslation } from '@ifrc-go/ui/hooks';
 
-import i18n from './i18n.json';
 import styles from './styles.module.css';
 
 interface Props {
     className?: string;
 }
 
-interface FeedData {
+interface FeedsData {
     logo: string;
     name: string;
     language: string;
+    lastUpdated: string;
 }
 interface Props {
     className?: string;
-    feedData: FeedData;
+    feedsData: FeedsData;
 }
-
 function SourceCard(props: Props) {
-    const { className, feedData } = props;
-    const strings = useTranslation(i18n);
+    const { className, feedsData } = props;
+
+    if (!feedsData || !feedsData.logo) {
+        return null;
+    }
+
     return (
         <Container
             className={(styles.sourceCard, className)}
             heading={(
-                <div className={styles.header}>
+                <div className={styles.feedCart}>
                     <div className={styles.flexContainer}>
-                        <img src={feedData.logo} alt="Logo" className={styles.logo} />
+                        <img src={feedsData.logo} alt="Logo" className={styles.figure} />
+                        <div className={styles.separator} />
                         <div>
-                            <div className={styles.title}>{feedData.name}</div>
-                            <TextOutput
-                                className={styles.lastUpdated}
-                                label={strings.sourceCardLastUpdated}
-                                value={feedData.language}
-                                valueType="date"
-                            />
+                            <p className={styles.severityIndicator}>{feedsData.name}</p>
+                            <p className={styles.lastUpdated}>{feedsData.lastUpdated}</p>
                             <Button
                                 variant="primary"
-                                name={feedData.language}
+                                name={feedsData.language}
+                                className={styles.lastUpdated}
                             >
-                                {strings.languageTitle}
+                                {feedsData.language}
                             </Button>
                         </div>
                     </div>
                 </div>
             )}
-            headingLevel={4}
-            withInternalPadding
-            withHeaderBorder
-            withoutWrapInHeading
         />
     );
 }

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

@@ -1,37 +1,31 @@
-.view-all-source{
+.flexContainer {
+    display: flex;
+    gap: var(--go-ui-spacing-sm) var(--go-ui-spacing-lg);
+    align-items: center;
+    margin:1%;
     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);
+    width: 613px;
+
     .severity-indicator {
         font-size: var(--go-ui-font-size-xl);
     }
-  
+
     .last-updated {
         color: var(--go-ui-color-text-light);
     }
-  
+
     .figures {
-        display: flex;
-        flex-grow: 1;
-        gap: var(--go-ui-spacing-lg);
-
-        .separator {
-            flex-shrink: 0;
-            background-color: var(--go-ui-color-separator);
-            width: var(--go-ui-width-separator-sm);
-        }
-
+        gap: var(--go-ui-spacing-sm) var(--go-ui-spacing-lg);
+        width: 208px;
+        height:142px;
         .figure {
             flex-basis: 0;
             flex-grow: 1;
             padding: 0;
         }
     }
-  }
-  .flexContainer {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-  }
+}
 
 

src/views/ViewAllSource/i18n.json

@@ -1,6 +1,6 @@
 {
     "namespace": "viewAllSource",
     "strings": {
-        "viewAllSourceHeading": "View All Sources"
+        "sourceFeedsTitle":"Sourc Feeds"
     }
 }

src/views/ViewAllSource/index.tsx

@@ -3,9 +3,17 @@ import {
     useQuery,
 } from '@apollo/client';
 import { Container } from '@ifrc-go/ui';
+import { useTranslation } from '@ifrc-go/ui/hooks';
+
+import {
+    SourceFeedsQuery,
+    SourceFeedsQueryVariables,
+} from '#generated/types';
 
 import SourceCard from './SourceCard';
 
+import i18n from './i18n.json';
+
 const SOURCE_FEEDS = gql`
     query SourceFeeds($pagination: OffsetPaginationInput) {
         public {
@@ -23,29 +31,42 @@ const SOURCE_FEEDS = gql`
         }
     }`;
 
-type Source = {
-    id: number;
-    logo: string;
-    name: string
-    sourceName: string;
-    lastUpdated: string;
-    language: string;
-};
-
 // eslint-disable-next-line import/prefer-default-export
 export function Component() {
-    const { data } = useQuery(SOURCE_FEEDS, {
-        variables: {
-            pagination: {
-                limit: 10,
-                offset: 0,
+    const strings = useTranslation(i18n);
+    const { data } = useQuery<SourceFeedsQuery, SourceFeedsQueryVariables>(
+        SOURCE_FEEDS,
+        {
+            variables: {
+                pagination: {
+                    limit: 10,
+                    offset: 0,
+                },
             },
         },
-    });
+    );
+    if (!data) {
+        return null;
+    }
     return (
-        <Container>
-            {data.feeds.map((datum: Source) => (
-                <SourceCard key={datum.id} feedData={datum} />
+        <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 ?? '',
+                                // FIX ME :
+                                lastUpdated: 'last updated :2000-22-24',
+                            }}
+                        />
+                    ) : null
             ))}
         </Container>
     );