-
Notifications
You must be signed in to change notification settings - Fork 22
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Feature/cv2 2502 load tags on demand (#2104)
* CV2-2502: intial commit * CV2-2502: remove pagination form TeamTag and show first 100 tags * CV2-2502: apply search tag for media page * [WIP] Attempt at using a refetchContainer * WIP TagList; TagPicker; TeamTagsQueryRenderer * load more on scroll to bottom * Fix unit tests * Add missing propType * Restore pagination on team tag settings --------- Co-authored-by: Sawy <[email protected]>
- Loading branch information
1 parent
24d7b54
commit d92b3a7
Showing
4 changed files
with
161 additions
and
65 deletions.
There are no files selected for viewing
37 changes: 0 additions & 37 deletions
37
...ization/react-intl/src/app/components/cds/menus-lists-dialogs/MediaAndArticleTagList.json
This file was deleted.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,80 @@ | ||
| /* eslint-disable relay/unused-fields */ | ||
| import React from 'react'; | ||
| import { createPaginationContainer, graphql } from 'react-relay/compat'; | ||
| import TeamTagsComponent from './TeamTagsComponent'; | ||
| import { parseStringUnixTimestamp } from '../../../helpers'; | ||
|
|
||
| // Query that is called for subsequent "load more" pagination calls | ||
| // see https://meedan.atlassian.net/wiki/spaces/ENG/pages/1185316865/How+to+paginate+in+Relay+1.7#Modifying-MediaSuggestions | ||
| const teamTagsQuery = graphql` | ||
| query PaginatedTeamTagsQuery($teamSlug: String!, $pageSize: Int!, $after: String, $keyword: String) { | ||
| team(slug: $teamSlug) { | ||
| id | ||
| dbid | ||
| permissions | ||
| get_rules | ||
| rules_json_schema | ||
| ...PaginatedTeamTags_root | ||
| } | ||
| } | ||
| `; | ||
|
|
||
| const PaginatedTeamTags = createPaginationContainer( | ||
| props => ( | ||
| <TeamTagsComponent | ||
| pageSize={props.pageSize} | ||
| permissions={props.parentProps.team.permissions} | ||
| relay={props.relay} | ||
| rules={props.parentProps.team.get_rules} | ||
| rulesSchema={JSON.parse(props.parentProps.team.rules_json_schema)} | ||
| searchTerm={props.searchTerm} | ||
| // total of ALL tags | ||
| setSearchTerm={props.setSearchTerm} | ||
| // total number of search results | ||
| tags={props.root.tag_texts ? props.root.tag_texts.edges.map(({ node }) => ({ ...node, updated_at: parseStringUnixTimestamp(node.updated_at) })) : []} | ||
| teamDbid={props.parentProps.team.dbid} | ||
| teamId={props.parentProps.team.id} | ||
| totalCount={props.root.tag_texts?.totalCount} | ||
| totalTags={props.root.tag_texts_count} | ||
| /> | ||
| ), | ||
| { // assign graphql fragment to a key called `root` | ||
| root: graphql` | ||
| fragment PaginatedTeamTags_root on Team { | ||
| tag_texts_count | ||
| tag_texts(first: $pageSize, after: $after, keyword: $keyword) @connection(key: "PaginatedTeamTags_tag_texts"){ | ||
| edges { | ||
| node { | ||
| id | ||
| text | ||
| tags_count | ||
| updated_at | ||
| } | ||
| } | ||
| pageInfo { | ||
| hasNextPage | ||
| endCursor | ||
| } | ||
| totalCount | ||
| } | ||
| } | ||
| `, | ||
| }, | ||
| { // configuration object | ||
| direction: 'forward', | ||
| query: teamTagsQuery, | ||
| getConnectionFromProps: props => props.root.tag_texts, | ||
| getFragmentVariables: (previousVars, pageSize) => ({ | ||
| ...previousVars, | ||
| pageSize, | ||
| }), | ||
| getVariables: (props, paginationInfo, fragmentVariables) => ({ | ||
| pageSize: fragmentVariables.pageSize, | ||
| ids: fragmentVariables.ids, | ||
| after: paginationInfo.cursor, | ||
| keyword: fragmentVariables.keyword, | ||
| }), | ||
| }, | ||
| ); | ||
|
|
||
| export default PaginatedTeamTags; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters