github/overleaf
1
0
Fork 0
mirror of https://github.com/overleaf/overleaf.git synced 2025-04-20 19:16:00 +00:00
Code Issues Projects Releases Packages Wiki Activity

Merge pull request #10647 from overleaf/ii-dashboard-react-issues-fix

Browse source 
[web] Projects dashboard react bug fixes

GitOrigin-RevId: 4984515de97eb0d7ec50d9d497aff52c6a4a8b7e
This commit is contained in:
ilkin-overleaf 2022-11-24 13:47:07 +02:00 • committed by Copybot
parent c98e002365
commit 791732005c
1 changed files with 25 additions and 25 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

50
services/web/frontend/js/features/project-list/context/project-list-context.tsx
View file

@ -15,6 +15,7 @@ import {
useContext,
useEffect,
useMemo,
useRef,
useState,
} from 'react'
import { Tag } from '../../../../../app/src/Features/Tags/types'
@ -110,7 +111,7 @@ export function ProjectListProvider({ children }: ProjectListProviderProps) {
const [maxVisibleProjects, setMaxVisibleProjects] =
useState(MAX_PROJECT_PER_PAGE)
const [hiddenProjectsCount, setHiddenProjectsCount] = useState(0)
const [loadMoreCount, setLoadMoreCount] = useState<number>(0)
const [loadMoreCount, setLoadMoreCount] = useState(0)
const [loadProgress, setLoadProgress] = useState(
prefetchedProjectsBlob ? 100 : 20
)
@ -125,6 +126,7 @@ export function ProjectListProvider({ children }: ProjectListProviderProps) {
'project-list-filter',
'all'
)
const prevSortRef = useRef<Sort>(sort)
const [selectedTagId, setSelectedTagId] = usePersistedState<
string | undefined
>('project-list-selected-tag-id', undefined)
@ -156,28 +158,15 @@ export function ProjectListProvider({ children }: ProjectListProviderProps) {
})
}, [prefetchedProjectsBlob, runAsync])
// Search related effects
useEffect(() => {
if (!searchText.length) {
return
}
const filteredProjects = loadedProjects.filter(project =>
project.name.toLowerCase().includes(searchText.toLowerCase())
)
setVisibleProjects(filteredProjects)
}, [searchText, loadedProjects])
// Sort related effects
useEffect(() => {
setLoadedProjects(loadedProjects => sortProjects(loadedProjects, sort))
}, [sort])
// Filters/Tags and load more related effects
useEffect(() => {
let filteredProjects = [...loadedProjects]
if (searchText.length) {
filteredProjects = filteredProjects.filter(project =>
project.name.toLowerCase().includes(searchText.toLowerCase())
)
}
if (selectedTagId !== undefined) {
if (selectedTagId === UNCATEGORIZED_KEY) {
const taggedProjectIds = uniq(flatten(tags.map(tag => tag.project_ids)))
@ -202,7 +191,12 @@ export function ProjectListProvider({ children }: ProjectListProviderProps) {
filteredProjects = arrayFilter(filteredProjects, filters[filter])
}
// load more
if (prevSortRef.current !== sort) {
filteredProjects = sortProjects(filteredProjects, sort)
const loadedProjectsSorted = sortProjects(loadedProjects, sort)
setLoadedProjects(loadedProjectsSorted)
}
if (filteredProjects.length > maxVisibleProjects) {
const visibleFilteredProjects = filteredProjects.slice(
0,
@ -226,15 +220,21 @@ export function ProjectListProvider({ children }: ProjectListProviderProps) {
setHiddenProjectsCount(0)
}
}, [
filter,
loadedProjects,
maxVisibleProjects,
selectedTagId,
setFilter,
setSelectedTagId,
tags,
filter,
setFilter,
selectedTagId,
setSelectedTagId,
searchText,
sort,
])
useEffect(() => {
prevSortRef.current = sort
}, [sort])
const showAllProjects = useCallback(() => {
setLoadMoreCount(0)
setHiddenProjectsCount(0)