1- import React , { useState , useEffect } from 'react' ;
1+ import React , { useState , useEffect , useCallback } from 'react' ;
22import { useParams , Link } from 'react-router-dom' ;
33import { Loader , Search , Bookmark } from 'lucide-react' ;
44import NavBar from '../components/NavBar' ;
@@ -13,35 +13,59 @@ const TutorialsPage = () => {
1313 const [ nextPageToken , setNextPageToken ] = useState ( '' ) ;
1414 const [ savedTutorials , setSavedTutorials ] = useState ( [ ] ) ;
1515
16- const fetchTutorials = async ( loadMore = false ) => {
17- setIsLoading ( true ) ;
18- setError ( null ) ;
19- if ( ! loadMore ) {
20- setTutorials ( [ ] ) ;
16+ // const fetchTutorials = async (loadMore = false) => {
17+ // setIsLoading(true);
18+ // setError(null);
19+ // if (!loadMore) {
20+ // setTutorials([]);
21+ // }
22+ // try {
23+ // let apiUrl = `https://refixly.onrender.com/api/tutorials/${searchTerm}`;
24+ // if (loadMore && nextPageToken) {
25+ // apiUrl += `?pageToken=${nextPageToken}`;
26+ // }
27+ // const response = await fetch(apiUrl);
28+ // if (!response.ok) {
29+ // throw new Error('Failed to fetch tutorials.');
30+ // }
31+ // const data = await response.json();
32+ // setTutorials(prev => loadMore ? [...prev, ...data.tutorials] : data.tutorials);
33+ // setNextPageToken(data.nextPageToken || '');
34+ // } catch (err) {
35+ // setError(err.message);
36+ // } finally {
37+ // setIsLoading(false);
38+ // }
39+ // };
40+ const fetchTutorials = useCallback ( async ( loadMore = false ) => {
41+ setIsLoading ( true ) ;
42+ setError ( null ) ;
43+ if ( ! loadMore ) {
44+ setTutorials ( [ ] ) ;
45+ }
46+ try {
47+ let apiUrl = `https://refixly.onrender.com/api/tutorials/${ searchTerm } ` ;
48+ if ( loadMore && nextPageToken ) {
49+ apiUrl += `?pageToken=${ nextPageToken } ` ;
2150 }
22- try {
23- let apiUrl = `https://refixly.onrender.com/api/tutorials/${ searchTerm } ` ;
24- if ( loadMore && nextPageToken ) {
25- apiUrl += `?pageToken=${ nextPageToken } ` ;
26- }
27- const response = await fetch ( apiUrl ) ;
28- if ( ! response . ok ) {
29- throw new Error ( 'Failed to fetch tutorials.' ) ;
30- }
31- const data = await response . json ( ) ;
32- setTutorials ( prev => loadMore ? [ ...prev , ...data . tutorials ] : data . tutorials ) ;
33- setNextPageToken ( data . nextPageToken || '' ) ;
34- } catch ( err ) {
35- setError ( err . message ) ;
36- } finally {
37- setIsLoading ( false ) ;
51+ const response = await fetch ( apiUrl ) ;
52+ if ( ! response . ok ) {
53+ throw new Error ( 'Failed to fetch tutorials.' ) ;
3854 }
39- } ;
55+ const data = await response . json ( ) ;
56+ setTutorials ( prev => loadMore ? [ ...prev , ...data . tutorials ] : data . tutorials ) ;
57+ setNextPageToken ( data . nextPageToken || '' ) ;
58+ } catch ( err ) {
59+ setError ( err . message ) ;
60+ } finally {
61+ setIsLoading ( false ) ;
62+ }
63+ } , [ searchTerm , nextPageToken ] ) ;
4064
4165 useEffect ( ( ) => {
4266 setSearchTerm ( objectName ) ;
4367 fetchTutorials ( ) ;
44- } , [ objectName ] ) ;
68+ } , [ objectName , fetchTutorials ] ) ;
4569
4670 const handleSearch = ( e ) => {
4771 e . preventDefault ( ) ;
0 commit comments