What This Screen Does
This is where you see all the news articles that have been created for your organization. Think of it like a bulletin board where every announcement, update, or story is displayed as a card. You can search for articles, sort them by date, filter them by status (published, planned, or draft), and navigate to create, view, edit, or delete articles.
How to Get There
Open the dashboard.
In the left-hand menu, click News.
You are now on the News Article List screen.
Step-by-Step Guide
1. Browse the Article List
When the page loads, it shows the most recent news articles for the currently selected gym.
Articles are displayed as horizontal cards in a two-column grid (one column on mobile).
Each card shows the article title, image, author, publication date, status, and action buttons.
Up to 9 articles are shown per page.
2. Search for an Article
At the top of the page, you will see a search bar on the left side.
Start typing a keyword or article title.
The search uses a debounce (a short delay) so it waits until you stop typing before searching.
Matching results will appear in a dropdown. Click a result to navigate to it.
If no results match, you will see a “No results found” message.
Control | Required | What It Does |
Search bar | No | Type a keyword to find articles by title. Results appear in a dropdown as you type. |
3. Sort Articles
To the right of the search bar, click the Sort By button.
A small menu appears with two options:
Sort Option | What It Does |
Latest | Shows the newest articles first (sorted by published date, descending). This is the default. |
Oldest | Shows the oldest articles first (sorted by published date, ascending). |
Click an option to apply it. The list will reload with the new sort order.
4. Filter by Status
Below the search and sort controls, you will see a row of tabs.
Each tab shows a status label and a count badge:
Tab | What It Shows |
All | Every article, regardless of status. The badge shows the total count. |
Published | Only articles that are live and visible. Badge is green. |
Planned | Articles scheduled for future publication. Badge is blue. |
Draft | Articles that are still being worked on and not yet published. Badge is yellow. |
Click a tab to filter the list. The article list reloads to show only articles matching that status.
5. View an Article
On each article card, click the view action (or click the article itself, depending on the card layout).
You will be taken to the article detail page.
6. Edit an Article
On each article card, click the edit action.
You will be taken to the article edit page where you can change the content.
7. Delete an Article
On each article card, click the delete action.
The article will be removed from the system.
You will see a green “Deleted!” notification at the bottom of the screen.
The list will automatically refresh to reflect the change.
8. Create a New Article
In the top-right corner of the page, click the + Add news button.
You will be taken to the article creation screen.
9. Navigate Between Pages
If there are more than 9 articles, a pagination control appears at the bottom of the list.
Click a page number to jump to that page.
The list reloads with the articles for the selected page.
What Happens Behind the Scenes
Page loads
|
v
Redux dispatches getNews({
pageSize: 10, pageNumber: 0,
sortBy: ['publishedOn'],
direction: Desc,
status: undefined (all)
})
|
v
API call: GET /api/news with query params
|
v
Server returns articles + stats in headers (x-page-stats)
|
v
Articles and status counts are stored in Redux
|
v
List renders with article cards, tabs show counts
|
v
(When you change sort, filter, or page)
Redux dispatches getNews() with updated params
|
v
List reloads with new data
|
v
(When you delete an article)
API call: NewsService.remove({ id })
|
v
Success notification appears ("Deleted!")
|
v
List refreshes via getNews() to reflect changes
Troubleshooting
“I do not see any articles on the page”
Make sure you have the correct gym selected in the dashboard header. Articles are loaded based on the currently selected gym.
Check if the status filter tab is set to a status with zero articles. Try clicking the All tab to see every article.
If the list is still empty, no articles have been created yet. Click + Add news to create your first one.
“The search is not returning any results”
The search uses a separate search API and may behave differently from the status filters. Try using shorter or more general keywords.
Make sure you are spelling the title correctly.
The search has a short delay (debounce) before it runs — wait a moment after typing for results to appear.
“I clicked Delete but the article is still showing”
After deleting, the list should automatically refresh. If it does not, try refreshing the page manually.
If you see an error notification instead of the green “Deleted!” message, the deletion may have failed. Check your internet connection and try again.
You may not have permission to delete articles. Contact your administrator if the issue persists.
“The page numbers are not showing up”
Pagination only appears when there are more than 9 articles in the current filtered view.
If you have fewer than 9 articles (or 9 after applying a status filter), there is no need for pagination and it will be hidden.
“Articles are not sorted the way I expected”
Check which sort option is currently active by looking at the Sort By button label. It will show either “latest” or “oldest.”
Sorting is based on the published date, not the creation date or title. A draft article with no published date may appear in an unexpected position.
“The status counts in the tabs seem wrong”
The counts come from the server and are updated each time the list reloads. If you recently created or deleted an article, the counts will update on the next page load or filter change.
Try clicking a different tab and then clicking back to refresh the counts.
“I switched gyms but the articles did not change”
The article list automatically reloads when you change the selected gym in the dashboard. If it does not, try refreshing the page.
Some articles may be available across multiple gyms. The list shows articles relevant to the currently selected gym.
“I got an error when the page loaded”
A red error message may appear if the server could not be reached. Check your internet connection and try refreshing the page.
If the error persists, the news API may be temporarily down. Contact your administrator or try again later.