Skip to content

Fixing Highlights Display on Home page and create highlights page #2

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
caporalCode wants to merge 4 commits into
base: main
Choose a base branch
from
Open

Fixing Highlights Display on Home page and create highlights page #2

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
5d6a2b0
fix(app): news image bouncing
caporalCode Jul 12, 2025
fbbbd6d
fix(app): pageable query definition
caporalCode Jul 15, 2025
d182ccf
Merge branch 'issues-fixing-news-display-bouncing' into develop
caporalCode Jul 16, 2025
db18be9
fix(app): highlights
caporalCode Jul 17, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
11 changes: 6 additions & 5 deletions app/api/api-client.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@ import {
listLeagues,
listNewsArticles,
Pageable,
PageHighlightDto,
} from './generated'
import { client } from './generated/client.gen'

Expand Down Expand Up @@ -61,7 +62,7 @@ export const apiClient = {
const { data, error } = await listFixtures({
query: {
leagueApiId,
pageable,
...pageable,
},
})
if (error) {
Expand Down Expand Up @@ -123,13 +124,13 @@ export const apiClient = {
highlights: {
async findAll(pageable: Pageable = DEFAULT_PAGEABLE) {
try {
const { data, error } = await listHighlights({ query: { pageable } })
const { data, error } = await listHighlights({ query: pageable })
Copy link

@coderabbitai coderabbitai bot Jul 17, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

💡 Verification agent

🧩 Analysis chain

Verify API endpoint compatibility for direct pageable queries.

The change from { pageable } to direct pageable for highlights and advertisements assumes the API endpoints expect flattened pagination parameters. Ensure this aligns with the actual API contract.

Also applies to: 160-160

🏁 Script executed:

#!/bin/bash
# Description: Check API endpoint usage patterns to verify pagination parameter structure
# Expected: Find consistent usage of either nested or flattened pagination parameters

# Search for listHighlights and getLatestAdvertisements usage patterns
echo "=== Checking listHighlights usage ==="
rg -A 5 -B 5 "listHighlights"

echo "=== Checking getLatestAdvertisements usage ==="
rg -A 5 -B 5 "getLatestAdvertisements"

echo "=== Checking other API call patterns for pagination ==="
rg -A 3 "query.*pageable|pageable.*query"

Length of output: 129395

Fix API calls to nest the pageable object under the query key

The OpenAPI spec defines a single query parameter named pageable (an object), so passing its fields directly will not bind to that parameter. Update both calls in app/api/api-client.ts to wrap pageable in an object:

• Lines around 127 (highlights):

- const { data, error } = await listHighlights({ query: pageable })
+ const { data, error } = await listHighlights({ query: { pageable } })

• Lines around 160 (advertisements):

- const { data, error } = await getLatestAdvertisements({ query: pageable })
+ const { data, error } = await getLatestAdvertisements({ query: { pageable } })

This ensures the client emits ?pageable[page]=…&pageable[size]=… (deep-object style) as the API expects.

📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
const { data, error } = await listHighlights({ query: pageable })
// app/api/api-client.ts
// … around line 127
- const { data, error } = await listHighlights({ query: pageable })
+ const { data, error } = await listHighlights({ query: { pageable } })
// … around line 160
- const { data, error } = await getLatestAdvertisements({ query: pageable })
+ const { data, error } = await getLatestAdvertisements({ query: { pageable } })
🤖 Prompt for AI Agents 
In app/api/api-client.ts at line 127 and around line 160, the API calls
incorrectly pass the pageable object fields directly instead of nesting them
under the query key. To fix this, wrap the pageable object inside another object
with the key 'pageable' when passing it to the listHighlights and
listAdvertisements functions. This change will ensure the query parameters are
serialized as pageable[page]=...&pageable[size]=..., matching the OpenAPI spec
requirements.

if (error) {
console.warn(`Error fetching highlights:`, error)
return []
}

return data?.content ?? []
return data as PageHighlightDto
} catch (error) {
console.warn('Error fetching highlights:', error)
return []
Expand All @@ -156,7 +157,7 @@ export const apiClient = {
try {
// Assuming getLatestAdvertisements is the correct method
const { data, error } = await getLatestAdvertisements({
query: { pageable },
query: pageable,
})

if (error) {
Expand Down Expand Up @@ -198,7 +199,7 @@ export const apiClient = {
query: {
country,
type,
pageable,
...pageable,
},
})

Expand Down
15 changes: 5 additions & 10 deletions app/api/generated/types.gen.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1209,8 +1209,8 @@ export type ListLeaguesData = {
query: {
country?: string;
type?: string;
pageable: Pageable;
};
// pageable: Pageable;
} & Pageable;
url: '/api/v1/leagues';
};

Expand Down Expand Up @@ -1242,9 +1242,7 @@ export type CreateLeagueResponse = CreateLeagueResponses[keyof CreateLeagueRespo
export type ListHighlightsData = {
body?: never;
path?: never;
query: {
pageable: Pageable;
};
query: Pageable;
url: '/api/v1/highlights';
};

Expand Down Expand Up @@ -1278,8 +1276,7 @@ export type ListFixturesData = {
path?: never;
query: {
leagueApiId?: string;
pageable: Pageable;
};
} & Pageable;
url: '/api/v1/fixtures';
};

Expand Down Expand Up @@ -1759,9 +1756,7 @@ export type GetFixturesByDateResponse = GetFixturesByDateResponses[keyof GetFixt
export type GetLatestAdvertisementsData = {
body?: never;
path?: never;
query: {
pageable: Pageable;
};
query: Pageable;
url: '/api/v1/advertisements/latest';
};

Expand Down
2 changes: 2 additions & 0 deletions app/api/types.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,6 +31,8 @@ export type Highlight = {
apiHighlightId: string | null;
};



export type League = {
id: string;
createdAt: Date;
Expand Down
121 changes: 92 additions & 29 deletions app/globals.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,49 +4,54 @@
@custom-variant dark (&:is(.dark *));

:root {
--background: oklch(0.99 0.00 258.32);
--background: oklch(0.99 0 258.32);
--foreground: oklch(0.28 0.04 260.03);
--card: oklch(1.00 0 0);
--card: oklch(1 0 0);
--card-foreground: oklch(0.28 0.04 260.03);
--popover: oklch(1.00 0 0);
--popover: oklch(1 0 0);
--popover-foreground: oklch(0.28 0.04 260.03);
--primary: oklch(0.68 0.16 276.93);
--primary-foreground: oklch(1.00 0 0);
--primary-foreground: oklch(1 0 0);
--secondary: oklch(0.79 0.12 45.79);
--secondary-foreground: oklch(0.37 0.03 259.73);
--muted: oklch(0.97 0.00 264.54);
--muted: oklch(0.97 0 264.54);
--muted-foreground: oklch(0.55 0.02 264.36);
--accent: oklch(0.93 0.03 272.79);
--accent-foreground: oklch(0.37 0.03 259.73);
--destructive: oklch(0.64 0.21 25.33);
--destructive-foreground: oklch(1.00 0 0);
--destructive-foreground: oklch(1 0 0);
--border: oklch(0.87 0.01 258.34);
--input: oklch(0.87 0.01 258.34);
--ring: oklch(0.59 0.20 277.12);
--chart-1: oklch(0.59 0.20 277.12);
--ring: oklch(0.59 0.2 277.12);
--chart-1: oklch(0.59 0.2 277.12);
--chart-2: oklch(0.51 0.23 276.97);
--chart-3: oklch(0.46 0.21 277.02);
--chart-4: oklch(0.40 0.18 277.37);
--chart-5: oklch(0.36 0.14 278.70);
--sidebar: oklch(0.97 0.00 264.54);
--chart-4: oklch(0.4 0.18 277.37);
--chart-5: oklch(0.36 0.14 278.7);
--sidebar: oklch(0.97 0 264.54);
--sidebar-foreground: oklch(0.28 0.04 260.03);
--sidebar-primary: oklch(0.59 0.20 277.12);
--sidebar-primary-foreground: oklch(1.00 0 0);
--sidebar-primary: oklch(0.59 0.2 277.12);
--sidebar-primary-foreground: oklch(1 0 0);
--sidebar-accent: oklch(0.93 0.03 272.79);
--sidebar-accent-foreground: oklch(0.37 0.03 259.73);
--sidebar-border: oklch(0.87 0.01 258.34);
--sidebar-ring: oklch(0.59 0.20 277.12);
--sidebar-ring: oklch(0.59 0.2 277.12);
--font-sans: Open Sans, sans-serif;
--font-serif: Merriweather, serif;
--font-mono: JetBrains Mono, monospace;
--radius: 0.5rem;
--shadow-2xs: 0px 4px 8px -1px hsl(0 0% 0% / 0.05);
--shadow-xs: 0px 4px 8px -1px hsl(0 0% 0% / 0.05);
--shadow-sm: 0px 4px 8px -1px hsl(0 0% 0% / 0.10), 0px 1px 2px -2px hsl(0 0% 0% / 0.10);
--shadow: 0px 4px 8px -1px hsl(0 0% 0% / 0.10), 0px 1px 2px -2px hsl(0 0% 0% / 0.10);
--shadow-md: 0px 4px 8px -1px hsl(0 0% 0% / 0.10), 0px 2px 4px -2px hsl(0 0% 0% / 0.10);
--shadow-lg: 0px 4px 8px -1px hsl(0 0% 0% / 0.10), 0px 4px 6px -2px hsl(0 0% 0% / 0.10);
--shadow-xl: 0px 4px 8px -1px hsl(0 0% 0% / 0.10), 0px 8px 10px -2px hsl(0 0% 0% / 0.10);
--shadow-sm:
0px 4px 8px -1px hsl(0 0% 0% / 0.1), 0px 1px 2px -2px hsl(0 0% 0% / 0.1);
--shadow:
0px 4px 8px -1px hsl(0 0% 0% / 0.1), 0px 1px 2px -2px hsl(0 0% 0% / 0.1);
--shadow-md:
0px 4px 8px -1px hsl(0 0% 0% / 0.1), 0px 2px 4px -2px hsl(0 0% 0% / 0.1);
--shadow-lg:
0px 4px 8px -1px hsl(0 0% 0% / 0.1), 0px 4px 6px -2px hsl(0 0% 0% / 0.1);
--shadow-xl:
0px 4px 8px -1px hsl(0 0% 0% / 0.1), 0px 8px 10px -2px hsl(0 0% 0% / 0.1);
--shadow-2xl: 0px 4px 8px -1px hsl(0 0% 0% / 0.25);
}

Expand All @@ -67,33 +72,38 @@
--accent-foreground: oklch(0.87 0.01 258.34);
--destructive: oklch(0.64 0.21 25.33);
--destructive-foreground: oklch(0.21 0.04 265.75);
--border: oklch(0.45 0.03 256.80);
--input: oklch(0.45 0.03 256.80);
--border: oklch(0.45 0.03 256.8);
--input: oklch(0.45 0.03 256.8);
--ring: oklch(0.68 0.16 276.93);
--chart-1: oklch(0.68 0.16 276.93);
--chart-2: oklch(0.59 0.20 277.12);
--chart-2: oklch(0.59 0.2 277.12);
--chart-3: oklch(0.51 0.23 276.97);
--chart-4: oklch(0.46 0.21 277.02);
--chart-5: oklch(0.40 0.18 277.37);
--chart-5: oklch(0.4 0.18 277.37);
--sidebar: oklch(0.28 0.04 260.03);
--sidebar-foreground: oklch(0.93 0.01 255.51);
--sidebar-primary: oklch(0.68 0.16 276.93);
--sidebar-primary-foreground: oklch(0.21 0.04 265.75);
--sidebar-accent: oklch(0.37 0.03 259.73);
--sidebar-accent-foreground: oklch(0.87 0.01 258.34);
--sidebar-border: oklch(0.45 0.03 256.80);
--sidebar-border: oklch(0.45 0.03 256.8);
--sidebar-ring: oklch(0.68 0.16 276.93);
--font-sans: Open Sans, sans-serif;
--font-serif: Merriweather, serif;
--font-mono: JetBrains Mono, monospace;
--radius: 0.5rem;
--shadow-2xs: 0px 4px 8px -1px hsl(0 0% 0% / 0.05);
--shadow-xs: 0px 4px 8px -1px hsl(0 0% 0% / 0.05);
--shadow-sm: 0px 4px 8px -1px hsl(0 0% 0% / 0.10), 0px 1px 2px -2px hsl(0 0% 0% / 0.10);
--shadow: 0px 4px 8px -1px hsl(0 0% 0% / 0.10), 0px 1px 2px -2px hsl(0 0% 0% / 0.10);
--shadow-md: 0px 4px 8px -1px hsl(0 0% 0% / 0.10), 0px 2px 4px -2px hsl(0 0% 0% / 0.10);
--shadow-lg: 0px 4px 8px -1px hsl(0 0% 0% / 0.10), 0px 4px 6px -2px hsl(0 0% 0% / 0.10);
--shadow-xl: 0px 4px 8px -1px hsl(0 0% 0% / 0.10), 0px 8px 10px -2px hsl(0 0% 0% / 0.10);
--shadow-sm:
0px 4px 8px -1px hsl(0 0% 0% / 0.1), 0px 1px 2px -2px hsl(0 0% 0% / 0.1);
--shadow:
0px 4px 8px -1px hsl(0 0% 0% / 0.1), 0px 1px 2px -2px hsl(0 0% 0% / 0.1);
--shadow-md:
0px 4px 8px -1px hsl(0 0% 0% / 0.1), 0px 2px 4px -2px hsl(0 0% 0% / 0.1);
--shadow-lg:
0px 4px 8px -1px hsl(0 0% 0% / 0.1), 0px 4px 6px -2px hsl(0 0% 0% / 0.1);
--shadow-xl:
0px 4px 8px -1px hsl(0 0% 0% / 0.1), 0px 8px 10px -2px hsl(0 0% 0% / 0.1);
--shadow-2xl: 0px 4px 8px -1px hsl(0 0% 0% / 0.25);
}

Expand Down Expand Up @@ -156,4 +166,57 @@
body {
@apply bg-background text-foreground;
}

.dom-purify-content p {
margin-bottom: 1.25rem; /* More breathing room between paragraphs */
}

.dom-purify-content h2 {
margin-top: 2rem;
margin-bottom: 1rem;
font-size: 1.875rem; /* Tailwind: text-2xl */
font-weight: 700;
border-bottom: 1px solid #e5e7eb; /* Tailwind gray-200 */
padding-bottom: 0.25rem;
}

.dom-purify-content h3 {
margin-top: 1.5rem;
font-size: 1.5rem; /* Tailwind: text-xl */
font-weight: 600;
}

.dom-purify-content ul,
.dom-purify-content ol {
padding-left: 1.25rem;
margin-bottom: 1.25rem;
}

.dom-purify-content li {
margin-bottom: 0.5rem;
}

.dom-purify-content img {
margin: 2rem auto;
display: block;
max-width: 100%;
max-height: 400px;
border-radius: 0.5rem;
box-shadow: 0 4px 14px rgba(0, 0, 0, 0.1);
}

.dom-purify-content hr {
margin: 3rem 0;
border: none;
height: 1px;
background-color: #e5e7eb; /* Tailwind gray-200 */
}

.dom-purify-content blockquote {
border-left: 4px solid #3b82f6; /* Tailwind blue-500 */
padding-left: 1rem;
font-style: italic;
color: #6b7280; /* Tailwind gray-500 */
margin: 1.5rem 0;
}
}
Loading