Skip to content

Commit

Permalink
chore: Persists tag filtering (#3166)
Browse files Browse the repository at this point in the history
  • Loading branch information
@kyle-ssg
kyle-ssg authored Dec 21, 2023
1 parent f770ff1 commit a9c82a4
Show file tree
Hide file tree
Showing 4 changed files with 76 additions and 21 deletions.
4 changes: 4 additions & 0 deletions frontend/common/stores/feature-list-store.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -576,6 +576,10 @@ const controller = {
: Promise.resolve(),
])
.then(([features, environmentFeatures, feature]) => {
if (store.filter !== filter) {
//The filter has been changed since, ignore the api response. This will be resolved when moving to RTK.
return
}
store.paging.next = features.next
store.paging.pageSize = PAGE_SIZE
store.paging.count = features.count
Expand Down
23 changes: 14 additions & 9 deletions frontend/web/components/pages/FeaturesPage.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -300,20 +300,25 @@ const FeaturesPage = class extends Component {
/>
<Row className='flex-fill justify-content-end'>
<TableTagFilter
useLocalStorage
isLoading={FeatureListStore.isLoading}
projectId={projectId}
className='me-4'
title='Tags'
value={this.state.tags}
onToggleArchived={() => {
FeatureListStore.isLoading = true
this.setState(
{
showArchived:
!this.state.showArchived,
},
this.filter,
)
onToggleArchived={(value) => {
if (
value !== this.state.showArchived
) {
FeatureListStore.isLoading = true
this.setState(
{
showArchived:
!this.state.showArchived,
},
this.filter,
)
}
}}
showArchived={this.state.showArchived}
onClearAll={() => {
Expand Down
24 changes: 15 additions & 9 deletions frontend/web/components/pages/UserPage.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -381,22 +381,28 @@ const UserPage = class extends Component {
/>
<Row className='flex-fill justify-content-end'>
<TableTagFilter
useLocalStorage
projectId={projectId}
className='me-4'
title='Tags'
value={this.state.tags}
isLoading={
FeatureListStore.isLoading
}
onToggleArchived={() => {
FeatureListStore.isLoading = true
this.setState(
{
showArchived:
!this.state.showArchived,
},
this.filter,
)
onToggleArchived={(value) => {
if (
value !==
this.state.showArchived
) {
FeatureListStore.isLoading = true
this.setState(
{
showArchived:
!this.state.showArchived,
},
this.filter,
)
}
}}
showArchived={
this.state.showArchived
Expand Down
46 changes: 43 additions & 3 deletions frontend/web/components/tables/TableTagFilter.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,20 +1,22 @@
import React, { FC, useMemo, useState } from 'react'
import React, { FC, useEffect, useMemo, useRef, useState } from 'react'
import TableFilter from './TableFilter'
import Input from 'components/base/forms/Input'
import Utils from 'common/utils/utils'
import { useGetTagsQuery } from 'common/services/useTag'
import Tag from 'components/tags/Tag'
import TableFilterItem from './TableFilterItem'
import Constants from 'common/constants'
import { AsyncStorage } from 'polyfill-react-native'

type TableFilterType = {
projectId: string
value: number[] | undefined
isLoading: boolean
onChange: (value: number[]) => void
showArchived: boolean
onToggleArchived: () => void
onToggleArchived: (value: boolean) => void
className?: string
useLocalStorage?: boolean
}

const TableTagFilter: FC<TableFilterType> = ({
Expand All @@ -24,6 +26,7 @@ const TableTagFilter: FC<TableFilterType> = ({
onToggleArchived,
projectId,
showArchived,
useLocalStorage,
value,
}) => {
const [filter, setFilter] = useState('')
Expand All @@ -34,6 +37,43 @@ const TableTagFilter: FC<TableFilterType> = ({
: data
}, [data, filter])
const length = (value?.length || 0) + (showArchived ? 1 : 0)
const checkedLocalStorage = useRef(false)
useEffect(() => {
if (useLocalStorage && checkedLocalStorage.current) {
AsyncStorage.setItem(`${projectId}-tags`, JSON.stringify(value))
}
}, [useLocalStorage, projectId, value])
useEffect(() => {
if (useLocalStorage && checkedLocalStorage.current) {
AsyncStorage.setItem(
`${projectId}-showArchived`,
showArchived ? 'true' : 'false',
)
}
}, [useLocalStorage, projectId, showArchived])
useEffect(() => {
const checkLocalStorage = async function () {
if (useLocalStorage && !checkedLocalStorage.current && data) {
checkedLocalStorage.current = true
const [tags, showArchived] = await Promise.all([
AsyncStorage.getItem(`${projectId}-tags`),
AsyncStorage.getItem(`${projectId}-showArchived`),
])
if (tags) {
try {
const storedTags = JSON.parse(tags)
onChange(
storedTags.filter((v) => !!data.find((tag) => tag.id === v)),
)
} catch (e) {}
}
if (showArchived) {
onToggleArchived(showArchived === 'true')
}
}
}
checkLocalStorage()
}, [useLocalStorage, data])
return (
<div className={isLoading ? 'disabled' : ''}>
<TableFilter
Expand Down Expand Up @@ -66,7 +106,7 @@ const TableTagFilter: FC<TableFilterType> = ({
<TableFilterItem
onClick={() => {
if (!isLoading) {
onToggleArchived()
onToggleArchived(!showArchived)
}
}}
isActive={showArchived}
Expand Down

3 comments on commit a9c82a4

@vercel
Copy link

@vercel vercel bot commented on a9c82a4 Dec 21, 2023

Choose a reason for hiding this comment

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

Successfully deployed to the following URLs:

flagsmith-frontend-staging – ./frontend

staging.flagsmith.com
flagsmith-frontend-staging-git-main-flagsmith.vercel.app
flagsmith-frontend-staging-flagsmith.vercel.app
flagsmith-staging-frontend.vercel.app

@vercel
Copy link

@vercel vercel bot commented on a9c82a4 Dec 21, 2023

Choose a reason for hiding this comment

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

Successfully deployed to the following URLs:

docs – ./docs

docs-flagsmith.vercel.app
docs-git-main-flagsmith.vercel.app
docs.flagsmith.com
docs.bullet-train.io

@vercel
Copy link

@vercel vercel bot commented on a9c82a4 Dec 21, 2023

Choose a reason for hiding this comment

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

Successfully deployed to the following URLs:

flagsmith-frontend-preview – ./frontend

flagsmith-frontend-preview-flagsmith.vercel.app
flagsmith-frontend-preview-git-main-flagsmith.vercel.app
flagsmith-frontend-production-native.vercel.app

Please sign in to comment.