Merge pull request #136 from carrismetropolitana/digital-279-colocar-…

…opcao-de-pesquisa-na-parte-das-noticias Added News filtration system
carrismetropolitana · Jan 30, 2025 · 9af366a · 9af366a
2 parents 7ab1d57 + 0858ef6
commit 9af366a
Show file tree

Hide file tree

Showing 27 changed files with 414 additions and 84 deletions.
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -7,9 +7,6 @@
 		"editor.defaultFormatter": "stylelint.vscode-stylelint"
 	},
 
-	"[typescriptreact]": {
-		"editor.defaultFormatter": "vscode.typescript-language-features"
-	},
 	// Disable the default CSS formatter, use stylelint instead
 	"css.validate": false,
 
@@ -22,6 +19,7 @@
 	"editor.tabSize": 4,
 
 	"eslint.format.enable": true,
+
 	// Enable eslint for all supported languages
 	"eslint.validate": [
 		"javascript",

diff --git a/frontend/app/(views)/(website)/news/layout.tsx b/frontend/app/(views)/(website)/news/layout.tsx
@@ -0,0 +1,13 @@
+/* * */
+
+import { NewsListContextProvider } from '@/contexts/NewsList.context';
+
+/* * */
+
+export default function Layout({ children }) {
+	return (
+		<NewsListContextProvider>
+			{children}
+		</NewsListContextProvider>
+	);
+}
diff --git a/frontend/components/alerts/AlertsListEmpty/styles.module.css b/frontend/components/alerts/AlertsListEmpty/styles.module.css
@@ -9,7 +9,6 @@
 	justify-content: center;
 	padding: 0 var(--size-spacing-20) var(--size-spacing-40);
 	font-weight: var(--font-weight-medium);
-	line-height: 1.3;
 	color: var(--color-system-text-300);
 	text-align: center;
 }

diff --git a/frontend/components/cards/Pass/styles.module.css b/frontend/components/cards/Pass/styles.module.css
@@ -37,7 +37,6 @@
 .cardTitle {
 	font-size: 26px;
 	font-weight: var(--font-weight-bold);
-	line-height: 1.2;
 	color: var(--color-system-text-100);
 }
 

diff --git a/frontend/components/common/AppError/styles.module.css b/frontend/components/common/AppError/styles.module.css
@@ -4,13 +4,12 @@
 .container {
   display: flex;
   flex-direction: column;
+  gap: 20px;
   align-items: center;
   justify-content: center;
-  gap: 20px;
   padding: 80px 30px;
-  text-align: center;
   font-weight: 600;
-  line-height: 1.3;
+  text-align: center;
   border-top: 1px solid var(--gray-2);
 }
 
@@ -43,9 +42,9 @@
 /* RETRY MESSAGE */
 
 .retryMessage {
-  color: var(--gray-6);
+  padding: 5px 20px;
   font-size: 15px;
   font-weight: 500;
-  padding: 5px 20px;
+  color: var(--gray-6);
   border-radius: 999px;
 }
diff --git a/frontend/components/common/AppRedirect/styles.module.css b/frontend/components/common/AppRedirect/styles.module.css
@@ -2,17 +2,16 @@
 /* CONTAINER */
 
 .container {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  gap: 20px;
-  padding: 80px 30px;
-  text-align: center;
-  font-weight: 600;
-  line-height: 1.3;
-  border-top: 1px solid var(--gray-2);
+	display: flex;
+	flex-direction: column;
+	gap: 20px;
+	align-items: center;
+	justify-content: center;
+	padding: 80px 30px;
+	font-weight: 600;
+	text-align: center;
 	background-color: var(--color-system-background-100);
+	border-top: 1px solid var(--gray-2);
 }
 
 /* * */

diff --git a/frontend/components/common/AppUnavailable/styles.module.css b/frontend/components/common/AppUnavailable/styles.module.css
@@ -9,7 +9,6 @@
 	justify-content: center;
 	padding: 80px 30px;
 	font-weight: 600;
-	line-height: 1.3;
 	text-align: center;
 }
 

diff --git a/frontend/components/helpdesks/Header/styles.module.css b/frontend/components/helpdesks/Header/styles.module.css
@@ -45,7 +45,6 @@
 .cardTitle {
 	font-size: 26px;
 	font-weight: var(--font-weight-bold);
-	line-height: 1.2;
 	color: var(--color-system-text-100);
 }
 

diff --git a/frontend/components/helpdesks/WhereToBuy/styles.module.css b/frontend/components/helpdesks/WhereToBuy/styles.module.css
@@ -48,7 +48,6 @@ a.cardWrapper:hover {
 .cardTitle {
 	font-size: 26px;
 	font-weight: var(--font-weight-bold);
-	line-height: 1.2;
 	color: var(--color-system-text-100);
 }
 

diff --git a/frontend/components/home/MainCarouselCard/styles.module.css b/frontend/components/home/MainCarouselCard/styles.module.css
@@ -22,7 +22,6 @@
 	margin: 0 auto;
 	margin-bottom: -20px;
 	font-size: 16px;
-	line-height: 1.4;
 	color: var(--color-primary-black);
 	background-color: var(--color-primary-white);
 	border: 1px solid var(--color-primary-black);

diff --git a/frontend/components/layout/NoDataLabel/styles.module.css b/frontend/components/layout/NoDataLabel/styles.module.css
@@ -2,32 +2,31 @@
 /* CONTAINER */
 
 .container {
-  margin: auto;
-  font-size: 20px;
-  font-weight: bold;
-  text-transform: uppercase;
-  letter-spacing: 1px;
-  color: var(--color-system-text-100);
-  opacity: 0.15;
-  line-height: 1.2;
-  text-align: center;
+	margin: auto;
+	font-size: 20px;
+	font-weight: bold;
+	color: var(--color-system-text-100);
+	text-align: center;
+	text-transform: uppercase;
+	letter-spacing: 1px;
+	opacity: 0.15;
 }
 
 /* * */
 /* IF SHOULD FILL CONTAINER */
 
 .fill {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 100%;
-  height: 100%;
-  margin: 0;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	width: 100%;
+	height: 100%;
+	margin: 0;
 }
 
 /* * */
 /* WITH MIN HEIGHT */
 
 .withMinHeight {
-  padding: var(--size-spacing-30);
+	padding: var(--size-spacing-30);
 }
diff --git a/frontend/components/lines/LineName/styles.module.css b/frontend/components/lines/LineName/styles.module.css
@@ -2,16 +2,14 @@
 /* NAME */
 
 .name {
-	display: flex;
-	width: 100%;
+	display: -webkit-box;
 	align-items: center;
 	justify-content: flex-start;
-	color: var(--color-system-text-100);
-	line-height: 1.2;
+	width: 100%;
 	overflow: hidden;
 	text-overflow: ellipsis;
-	display: -webkit-box;
 	-webkit-line-clamp: 3;
+	color: var(--color-system-text-100);
 	-webkit-box-orient: vertical;
 }
 

diff --git a/frontend/components/lines/LinesDetailHeader/styles.module.css b/frontend/components/lines/LinesDetailHeader/styles.module.css
@@ -26,12 +26,11 @@
 	justify-content: flex-start;
 	width: 100%;
 	overflow: hidden;
+	text-overflow: ellipsis;
+	-webkit-line-clamp: 3;
 	font-size: 20px;
 	font-weight: var(--font-weight-bold);
-	line-height: 1.2;
 	color: var(--color-system-text-100);
-	text-overflow: ellipsis;
-	-webkit-line-clamp: 3;
 	-webkit-box-orient: vertical;
 }
 

diff --git a/frontend/components/lines/PathWaypointHeader/styles.module.css b/frontend/components/lines/PathWaypointHeader/styles.module.css
@@ -18,7 +18,6 @@
 	max-width: 400px;
 	font-size: 15px;
 	font-weight: var(--font-weight-bold);
-	line-height: 1.3;
     color: var(--color-system-text-100);
 }
 
@@ -44,8 +43,8 @@
 .stopLocation{
 	font-size: 14px;
 	font-weight: var(--font-weight-semibold);
-    color: var(--color-system-text-300);
 	vertical-align: text-bottom;
+    color: var(--color-system-text-300);
 }
 
 /* * */
@@ -56,8 +55,8 @@
 	font-size: 12px;
 	font-weight: var(--font-weight-semibold);
 	color: var(--color-system-text-400);
-	transition: all 200ms ease;
 	transform: translate(0, 1px);
+	transition: all 200ms ease;
 }
 
 .isSelected .stopId:hover {
@@ -70,8 +69,8 @@
 	height: 11px;
 	margin-bottom: 2px;
 	margin-left: 3px;
-	color: transparent;
 	vertical-align: text-bottom;
+	color: transparent;
 	transition: all 200ms ease;
 }
 

diff --git a/frontend/components/news/NewsDetailContent/styles.module.css b/frontend/components/news/NewsDetailContent/styles.module.css
@@ -51,7 +51,6 @@
 	margin-top: var(--size-spacing-10);
 	margin-bottom: var(--size-spacing-10);
 	font-size: 18px;
-	line-height: 1.5;
 	color: var(--color-system-text-100);
 }
 

diff --git a/frontend/components/news/NewsDetailHeader/styles.module.css b/frontend/components/news/NewsDetailHeader/styles.module.css
@@ -4,20 +4,19 @@
 .container {
 	display: flex;
 	flex-direction: column;
+	gap: var(--size-spacing-15);
 	align-items: flex-start;
 	justify-content: flex-start;
-	gap: var(--size-spacing-15);
 	padding: 5px;
 }
 
 /* * */
 /* TITLE */
 
 .title {
+	max-width: 700px;
 	font-size: 30px;
 	font-weight: var(--font-weight-heading);
-	max-width: 700px;
-	line-height: 1.2;
 }
 
 .titleSkeleton {

diff --git a/frontend/components/news/NewsList/index.tsx b/frontend/components/news/NewsList/index.tsx
@@ -4,12 +4,14 @@
 
 import { BackButton } from '@/components/common/BackButton';
 import { Grid } from '@/components/layout/Grid';
+import { NoDataLabel } from '@/components/layout/NoDataLabel';
 import { Section } from '@/components/layout/Section';
 import { Surface } from '@/components/layout/Surface';
 import { NewsCard } from '@/components/news/NewsCard';
 import { NewsCardSkeleton } from '@/components/news/NewsCardSkeleton';
+import { NewsListToolbar } from '@/components/news/NewsListToolbar';
+import { useNewsListContext } from '@/contexts/NewsList.context';
 import { useTranslations } from 'next-intl';
-import useSWR from 'swr';
 
 /* * */
 
@@ -20,14 +22,10 @@ export function NewsList() {
 	// A. Setup variables
 
 	const t = useTranslations('news.NewsList');
+	const newsListContext = useNewsListContext();
 
 	//
-	// B. Fetch Data
-
-	const { data: allNewsData } = useSWR('/api/news');
-
-	//
-	// D. Render Components
+	// B. Render Components
 
 	return (
 		<Surface>
@@ -36,23 +34,43 @@ export function NewsList() {
 				<BackButton href="/" />
 			</Section>
 
-			<Section heading={t('heading')} withPadding>
-				<Grid columns="abcd" withGap>
-					{allNewsData
-						? allNewsData?.map(newsItem => (
+			<Section heading={t('heading')} withBottomDivider withGap withPadding>
+				<NewsListToolbar />
+			</Section>
+
+			{newsListContext.flags.is_loading && (
+				<Section withPadding>
+					<Grid columns="abcd" withGap>
+						{Array(16).fill(null).map((_, index) =>
+							<NewsCardSkeleton key={index} />,
+						)}
+					</Grid>
+				</Section>
+			)}
+
+			{!newsListContext.flags.is_loading && newsListContext.data.filtered.length > 0 && (
+				<Section withPadding>
+					<Grid columns="abcd" withGap>
+						{newsListContext.data.filtered.map(newsItem => (
 							<NewsCard
 								key={newsItem._id}
 								_id={newsItem._id}
 								coverImageSrc={newsItem.cover_image_src}
 								publishDate={newsItem.publish_date}
 								title={newsItem.title}
 							/>
-						))
-						: Array(16).fill(null).map((_, index) =>
-							<NewsCardSkeleton key={index} />,
-						)}
-				</Grid>
-			</Section>
+						))}
+					</Grid>
+				</Section>
+			)}
+
+			{!newsListContext.flags.is_loading && newsListContext.data.filtered.length === 0 && (
+				<Section withPadding>
+					<Grid columns="a" withGap>
+						<NoDataLabel fill />
+					</Grid>
+				</Section>
+			)}
 
 		</Surface>
 	);