Refactor NotesPanel component to improve state management and loading behavior
All checks were successful
farmcontrol/farmcontrol-ui/pipeline/head This commit looks good
All checks were successful
farmcontrol/farmcontrol-ui/pipeline/head This commit looks good
- Removed unnecessary initialized state and replaced it with refs for notes ID and type to optimize re-rendering. - Updated useEffect dependencies to ensure proper data fetching based on changes in notes ID and type. - Enhanced loading state handling during note fetching for better user experience.
This commit is contained in:
parent
8c073a598a
commit
9ee46d2067
@ -25,12 +25,14 @@ const { Text } = Typography
|
|||||||
const NotesPanel = ({ _id, type }) => {
|
const NotesPanel = ({ _id, type }) => {
|
||||||
const [newNoteOpen, setNewNoteOpen] = useState(false)
|
const [newNoteOpen, setNewNoteOpen] = useState(false)
|
||||||
const [loading, setLoading] = useState(true)
|
const [loading, setLoading] = useState(true)
|
||||||
const [initialized, setInitialized] = useState(false)
|
|
||||||
const [error, setError] = useState(null)
|
const [error, setError] = useState(null)
|
||||||
const [notes, setNotes] = useState(null)
|
const [notes, setNotes] = useState(null)
|
||||||
const [expandedNotes, setExpandedNotes] = useState({})
|
const [expandedNotes, setExpandedNotes] = useState({})
|
||||||
const subscribeToObjectTypeUpdatesRef = useRef(null)
|
const subscribeToObjectTypeUpdatesRef = useRef(null)
|
||||||
|
|
||||||
|
const notesIdRef = useRef(null)
|
||||||
|
const notesTypeRef = useRef(null)
|
||||||
|
|
||||||
const { token } = useContext(AuthContext)
|
const { token } = useContext(AuthContext)
|
||||||
const { fetchNotes, connected, subscribeToObjectTypeUpdates } =
|
const { fetchNotes, connected, subscribeToObjectTypeUpdates } =
|
||||||
useContext(ApiServerContext)
|
useContext(ApiServerContext)
|
||||||
@ -50,6 +52,7 @@ const NotesPanel = ({ _id, type }) => {
|
|||||||
|
|
||||||
const generateNotes = useCallback(
|
const generateNotes = useCallback(
|
||||||
async (id) => {
|
async (id) => {
|
||||||
|
setLoading(true)
|
||||||
const notesData = await fetchData(id)
|
const notesData = await fetchData(id)
|
||||||
setLoading(false)
|
setLoading(false)
|
||||||
|
|
||||||
@ -108,11 +111,16 @@ const NotesPanel = ({ _id, type }) => {
|
|||||||
}, [_id, subscribeToObjectTypeUpdates, connected, handleReloadData])
|
}, [_id, subscribeToObjectTypeUpdates, connected, handleReloadData])
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (connected == true && token != null && !initialized) {
|
if (
|
||||||
|
connected == true &&
|
||||||
|
token != null &&
|
||||||
|
(_id != notesIdRef.current || type != notesTypeRef.current)
|
||||||
|
) {
|
||||||
handleReloadData()
|
handleReloadData()
|
||||||
setInitialized(true)
|
notesIdRef.current = _id
|
||||||
|
notesTypeRef.current = type
|
||||||
}
|
}
|
||||||
}, [token, handleReloadData, initialized, connected])
|
}, [token, handleReloadData, connected, _id, type])
|
||||||
|
|
||||||
const actionItems = {
|
const actionItems = {
|
||||||
items: [
|
items: [
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user