diff --git a/env.ts b/env.ts index 9e0be758..c85a2e65 100644 --- a/env.ts +++ b/env.ts @@ -2,20 +2,7 @@ import { defineConfig, Schema } from '@julr/vite-plugin-validate-env'; // TODO: Integrate .env for CI and remove optional() call on required fields export default defineConfig({ -<<<<<<< HEAD - APP_ENVIRONMENT: Schema.string.optional(), - APP_GRAPHQL_API_ENDPOINT: Schema.string(), - APP_MAPBOX_ACCESS_TOKEN: Schema.string(), - APP_TITLE: Schema.string(), - APP_GRAPHQL_CODEGEN_ENDPOINT: Schema.string.optional(), -}) -||||||| parent of 09c81ae (Add query to display the source details in view all source) - APP_TITLE: Schema.string.optional(), - APP_MAPBOX_ACCESS_TOKEN: Schema.string.optional(), -}) -======= APP_TITLE: Schema.string.optional(), APP_MAPBOX_ACCESS_TOKEN: Schema.string.optional(), APP_GRAPHQL_ENDPOINT: Schema.string.optional(), }) ->>>>>>> 09c81ae (Add query to display the source details in view all source) diff --git a/src/App/routes.tsx b/src/App/routes.tsx index fb560d99..56343d81 100644 --- a/src/App/routes.tsx +++ b/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, diff --git a/src/views/ViewAllSource/SourceCard/i18n.json b/src/views/ViewAllSource/SourceCard/i18n.json index f31e1d97..708941ed 100644 --- a/src/views/ViewAllSource/SourceCard/i18n.json +++ b/src/views/ViewAllSource/SourceCard/i18n.json @@ -1,7 +1,6 @@ { - "namespace": "source card", + "namespace": "sourceCard", "strings": { - "languageTitle":"language", - "sourceCardLastUpdated":"Date" + "sourceCardAlt": "Logo" } } \ No newline at end of file diff --git a/src/views/ViewAllSource/SourceCard/index.tsx b/src/views/ViewAllSource/SourceCard/index.tsx index bd55485d..df61f023 100644 --- a/src/views/ViewAllSource/SourceCard/index.tsx +++ b/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['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 ( -
- Logo -
-
-

{feedsData.name}

- -
-
-
- )} - /> + className={styles.sourceCard} + childrenContainerClassName={styles.sourceDetail} + > + {strings.sourceCardAlt} +
+ ); } export default SourceCard; diff --git a/src/views/ViewAllSource/SourceCard/styles.module.css b/src/views/ViewAllSource/SourceCard/styles.module.css index 4dacc5d3..d8274a13 100644 --- a/src/views/ViewAllSource/SourceCard/styles.module.css +++ b/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; } } - - \ No newline at end of file diff --git a/src/views/ViewAllSource/index.tsx b/src/views/ViewAllSource/index.tsx index 9c42137f..f598e23c 100644 --- a/src/views/ViewAllSource/index.tsx +++ b/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['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( + + const { + data: sourceFeedsResponse, + loading: sourceFeedsLoading, + error: sourceFeedsError, + } = useQuery( SOURCE_FEEDS, { variables: { @@ -46,29 +66,29 @@ export function Component() { }, }, ); - if (!data) { - return null; - } - return ( - - {data.public.feeds.items?.map((item) => ( - item.languages && item.languages.length > 0 - ? ( - lang.name).join('-')} - feedsData={{ - logo: item.languages[0].logo ?? '', - name: item.languages[0].name, - language: item.languages[0].language ?? '', - }} - /> - ) : null - ))} - + const rendererParams = useCallback((_: string, value: SourceFeed) => ({ + data: value, + }), []); + + return ( + + + + + ); } diff --git a/src/views/ViewAllSource/style.module.css b/src/views/ViewAllSource/style.module.css new file mode 100644 index 00000000..60e3a3c5 --- /dev/null +++ b/src/views/ViewAllSource/style.module.css @@ -0,0 +1,5 @@ +.sources-list { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(22rem, 1fr)); + grid-gap: var(--go-ui-spacing-md); +}