news-redesign

[RalitsaIlieva]

Closes #1671
(First, an api change that I made should be approved and merged)

Motivation and context

We want better design for the news section

Screenshots:

Before	After
Paste screenshot	Paste screenshot

Testing

Steps to test

Affected urls

Environment

New environment variables:

• NEW_ENV_VAR: env var details

New or updated dependencies:

Dependency name	Previous version	Updated version	Details
dependency/name	v1.0.0	v2.0.0

[github-actions]

❌ Not all tests have run for this PR. Please add the run tests label to trigger them.

[sashko9807]

Hello and sorry for the delayed review.
I made some remarks and questions .code-wise, would you please look at them.

Regarding the overall layout, there seems to be inconsistence, with what you've done so far, and the design given by the design team link, so please look at what needs to be done layout-wise as well.

If you have any questions regarding the requested changes or need some help, feel free to contact me.

[sashko9807]

Subscription related translations, are already added in the common namespace.

[RalitsaIlieva]

Ok. I removed it from the campaigns.json

[sashko9807]

Not needed. If you want to take the campaign image, you can include it in the article response, by adding necessary campaignFiles relation. This would look something like this:

 this.prisma.campaignNews.findMany({
        where: { state: CampaignNewsState.published },
        orderBy: { publishedAt: 'desc' },
        take: this.RECORDS_PER_PAGE,
        skip: Number((currentPage - 1) * this.RECORDS_PER_PAGE),
        select: {
           ..................
         campaign: {
          ..............
          campaignFiles: {
            where: { role: CampaignFileRole.campaignListPhoto },
           }
          }
        }
})

Side note:
Keep in mind that calling an endpoint within a loop is not considered a good practice in general, as it adds unnecessary stress to the backend server(n+1 problem).

[sashko9807]

This is protected route.
You can include the campaign slug, in the article response, and use useViewCampaign(article.campaign.slug), to fetch the necessary data.

[sashko9807]

Please opt-in for a single responsive layout, rather than having a mobile,desktop layouts. In case some element should be visible only for mobile, or only for desktop, you can add breakpoints just for that specific element, by doing.
In the example below a breakpoint is added to that element and for viewports < 600px, the display is none, and for viewports >=600px the display is flex.

<Grid item sx={{display:{xs:'none', sm:'flex'}}}

[RalitsaIlieva]

ok

[sashko9807]

Subscription related translations, have been moved to common namespace
Change

t('campaigns:cta.subscribe-general-newsletter-button')

to

t('common:notifications.subscribe-general-newsletter-button')

[RalitsaIlieva]

Ok

[sashko9807]

Following the new the article text doesn't seem to be needed
Reference news design

[RalitsaIlieva]

Yes. Removed

[sashko9807]

ArticleSection should be the parent container, as it gives the necessary styling of used classes, thus avoiding the inline styling, and making the code more readable.

[RalitsaIlieva]

ok

[sashko9807]

ArticleSection should be the parent container, as it gives the necessary styling of used classes, thus avoiding the inline styling, and making the code more readable.

[RalitsaIlieva]

OK

[sashko9807]

Why is campaigns namespace required?

[RalitsaIlieva]

I don`t remember. Removed

[sashko9807]

Why is auth namespace required?

[RalitsaIlieva]

Removed it. It seems it is not needed