diff --git a/src/App.css b/src/App.css index a90f074..57d5b44 100644 --- a/src/App.css +++ b/src/App.css @@ -2,3 +2,6 @@ @tailwind components; @tailwind utilities; +.gradient-fade { + background: linear-gradient(to right, rgba(255, 255, 255, 0), white, rgba(255, 255, 255, 0)); +} \ No newline at end of file diff --git a/src/App.jsx b/src/App.jsx index 7bfb93c..9c6a4f3 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -18,8 +18,8 @@ const App = () => { } > }/> - }> - }/> + }> + }/> }/> }/> diff --git a/src/Componnent/CardList.jsx b/src/Componnent/CardList.jsx index 9b59685..fd8819d 100644 --- a/src/Componnent/CardList.jsx +++ b/src/Componnent/CardList.jsx @@ -1,7 +1,7 @@ import React, {useCallback, useEffect, useState} from 'react'; import {useDispatch, useSelector} from 'react-redux'; import debounce from 'lodash.debounce'; -import {fetchApiData} from "../Redux/ApiSlice.jsx"; +import {fetchApiData, fetchListTopics} from "../Redux/ApiSlice.jsx"; import {CardGrid} from "./CardGrid.jsx"; import {fetchUser} from "../Redux/UserSlice.jsx"; import {Popover} from "antd"; @@ -10,7 +10,7 @@ import {Link} from "react-router-dom"; const CardList = () => { const dispatch = useDispatch(); - const {data, page, isLoading, error} = useSelector((state) => state.api); + const {data, page, isLoading, error,topics} = useSelector((state) => state.api); //هاور کردن روی عکس و نشون دادن پروفایل const [hoverIndex, setHoverIndex] = useState(null); @@ -30,7 +30,7 @@ const CardList = () => { const handleOpenChange = (newOpen) => { setOpen(newOpen); }; - const content =(profileImage,firstName,lastName,username,thumb)=> + const content = (profileImage, firstName, lastName, username, thumb) =>
@@ -46,7 +46,7 @@ const CardList = () => {
@@ -56,8 +56,8 @@ const CardList = () => {
- - + + @@ -66,16 +66,18 @@ const CardList = () => {
; - console.log(data, 'response data'); + // console.log(data, 'response data'); // console.log(page, 'page number'); useEffect(() => { + let memo=true; dispatch(fetchApiData(page)); + return()=>{ memo=false} }, []); // Include dispatch as a dependency - const dispatchFunction = (page) => { dispatch(fetchApiData(page)); + }; // Debounce the API request to prevent rapid requests @@ -87,6 +89,7 @@ const CardList = () => { return () => { window.removeEventListener('scroll', handleScroll); }; + }, [page]); // Debounce the entire handleScroll function @@ -97,14 +100,13 @@ const CardList = () => { if (scrollTop + windowHeight >= documentHeight - 300) { // Use the current page value in the dispatch function - // dispatch(fetchApiData(page)); + dispatch(fetchApiData(page)); } }, 2000); const handleScroll = () => { debouncedHandleScroll(); }; - console.log(hoverIndex ,"is hover") return (
@@ -113,36 +115,39 @@ const CardList = () => { {data && data?.map((arr, index) => (
- {arr.map((item, itemIndex) => ( + {arr?.map((item, itemIndex) => (
onHover(itemIndex)} onMouseOut={onHoverOver}> - - - {hoverIndex&& hoverIndex===itemIndex?( - - - -
- -
- - -
- -
- {item?.user?.username} - + + + + + + {hoverIndex && hoverIndex === itemIndex ? ( + +
+ +
+ + +
+ +
+ {item?.user?.username} + {item?.user?.for_hire && ( Available for hire @@ -151,23 +156,21 @@ const CardList = () => { )} -
-
+
- + -
- ):'' - - } +
+ ) : '' + }
diff --git a/src/Componnent/Navbar.jsx b/src/Componnent/Navbar.jsx index fe7a661..9d262c6 100644 --- a/src/Componnent/Navbar.jsx +++ b/src/Componnent/Navbar.jsx @@ -4,6 +4,7 @@ import Notification from "./NavbarNotification.jsx"; import NavbarProfile from "./NavbarProfile.jsx"; import NavbarNotification from "./NavbarNotification.jsx"; import NavbarMenu from "./NavbarMenu.jsx"; +import {Link} from "react-router-dom"; const Navbar = () => { return ( @@ -11,7 +12,10 @@ const Navbar = () => {
- + + + +
diff --git a/src/Componnent/NavbarCategory.jsx b/src/Componnent/NavbarCategory.jsx index 8847d62..94ed6b2 100644 --- a/src/Componnent/NavbarCategory.jsx +++ b/src/Componnent/NavbarCategory.jsx @@ -1,28 +1,49 @@ -import React from 'react'; +import React, {useEffect} from 'react'; import {Link} from "react-router-dom"; +import {useDispatch, useSelector} from "react-redux"; +import {fetchListTopics} from "../Redux/ApiSlice.jsx"; const NavbarCategory = () => { + + + const dispatch = useDispatch(); + const {topics} = useSelector((state) => state.api) + useEffect(() => { + let memo = true + dispatch(fetchListTopics()) + return () => { + memo = false; + }; + }, []); + + + console.log(topics, "topics get") + return ( -
+
+
- Editoral - Following + Editoral + Following
-
- Editoral - Editoral - Editoral - Editoral - Editoral - Editoral - Editoral +
+ + {topics?.map((item, index) => ( + + {item?.title} + + ))}
+ +
); }; diff --git a/src/Componnent/NavbarMenu.jsx b/src/Componnent/NavbarMenu.jsx index 14d998d..8a92541 100644 --- a/src/Componnent/NavbarMenu.jsx +++ b/src/Componnent/NavbarMenu.jsx @@ -1,7 +1,12 @@ -import React, { useState } from 'react'; +import React, {useEffect, useState} from 'react'; import { Button, Popover } from 'antd'; +import {useDispatch, useSelector} from "react-redux"; +import {fetchListTopics} from "../Redux/ApiSlice.jsx"; const App = () => { const [open, setOpen] = useState(false); + + + const hide = () => { setOpen(false); }; diff --git a/src/Componnent/UserComponenet/UserCollection.jsx b/src/Componnent/UserComponenet/UserCollection.jsx index bf1291c..77d2c8e 100644 --- a/src/Componnent/UserComponenet/UserCollection.jsx +++ b/src/Componnent/UserComponenet/UserCollection.jsx @@ -1,28 +1,200 @@ -import React, {useEffect} from 'react'; +import React, {useCallback, useEffect, useState} from 'react'; import {useDispatch, useSelector} from "react-redux"; -import {fetchUserLikes} from "../../Redux/UserLikesSlice.jsx"; import {fetchUserCollections} from "../../Redux/UserCollectionSlice.jsx"; -import {useParams} from "react-router-dom"; +import {Link, useParams} from "react-router-dom"; +import debounce from "lodash.debounce"; +import {Popover} from "antd"; const UserCollection = () => { - const username=useParams(); + const params=useParams(); const dispatch=useDispatch(); - const {data,isLoading,error}=useSelector(state => state.userCollection) + const {data,isLoading,error,page}=useSelector(state => state.api) + +//هاور کردن روی عکس و نشون دادن پروفایل + const [hoverIndex, setHoverIndex] = useState(null); + + const onHover = (index) => { + setHoverIndex(index); + }; + + const onHoverOver = () => { + setHoverIndex(null); + }; + //هاور روی پروفایل و نشون دادن اطلاعات یوزر + const [open, setOpen] = useState(false); + const hide = () => { + setOpen(false); + }; + const handleOpenChange = (newOpen) => { + setOpen(newOpen); + }; + const content = (profileImage, firstName, lastName, username, thumb) => +
+
+ +
+
+ Profile +
+ {firstName} {lastName} + {username} +
+
+ +
+ + +
+
+ +
+
+ + + + + + +
+ +
; + + + // console.log(data, 'response data'); + // console.log(page, 'page number'); useEffect(() => { - dispatch(fetchUserCollections('writingandstyle')) + let memo=true; + dispatch(fetchUserCollections(params.username)); - }, []); - console.log(data,"user collection in page") + return()=>{ memo=false} + }, []); // Include dispatch as a dependency + const dispatchFunction = () => { + dispatch(fetchUserCollections(params.username)); + }; + // Debounce the API request to prevent rapid requests + const debouncedDispatch = useCallback(debounce(dispatchFunction, 1000), []); + + useEffect(() => { + window.addEventListener('scroll', handleScroll); + return () => { + window.removeEventListener('scroll', handleScroll); + }; + }, [page]); + + // Debounce the entire handleScroll function + const debouncedHandleScroll = debounce(() => { + const scrollTop = document.documentElement.scrollTop; + const windowHeight = window.innerHeight; + const documentHeight = document.documentElement.offsetHeight; + + if (scrollTop + windowHeight >= documentHeight - 300) { + // Use the current page value in the dispatch function + dispatch(fetchUserCollections(params.username)); + } + }, 2000); + + const handleScroll = () => { + debouncedHandleScroll(); + }; return ( -
-collection +
+ + {isLoading ? 'is loding' : ''} +
+ {data && + data?.map((arr, index) => ( +
+ + {arr?.map((obj, index) => ( +
+ { + obj.preview_photos?.map((item,itemIndex)=>( + +
onHover(itemIndex)} + onMouseOut={onHoverOver}> +
{console.log(item)}
+ + + + + + + {hoverIndex && hoverIndex === itemIndex ? ( + +
+ +
+ + +
+ +
+ {item?.user?.username} + + {item?.user?.for_hire && ( + + Available for hire + + + )} + +
+ +
+ + + + + +
+ +
+ + ) : '' + + } + + +
+ + )) + } + + +
+ + + + ))} + + +
+ ))} +
+
); }; diff --git a/src/Componnent/UserComponenet/UserInfo.jsx b/src/Componnent/UserComponenet/UserInfo.jsx index 179077d..fab6547 100644 --- a/src/Componnent/UserComponenet/UserInfo.jsx +++ b/src/Componnent/UserComponenet/UserInfo.jsx @@ -2,23 +2,29 @@ import React, {useEffect} from 'react'; import {useDispatch, useSelector} from "react-redux"; import {fetchUser} from "../../Redux/UserSlice.jsx"; import {Link, useParams} from "react-router-dom"; +import {fetchUserPhotos} from "../../Redux/UserPhotosSlice.jsx"; const UserInfo = () => { const profileId = useParams() - const {data, isLoading, error} = useSelector((state) => state.userData) + const {data, isLoading, error} = useSelector((state) => state.api) + const {userinfo,infoLoading,infoError} = useSelector((state) => state.userData) const dispatch = useDispatch(); - + // console.log(data,"user info") + // console.log(profileId,"profile id") useEffect(() => { - dispatch(fetchUser('jemsahagun')); + let memo=true; + dispatch(fetchUser(profileId.username)); + return()=>{memo=false} + - }, []); + }, [profileId.username]); // console.log(data) return (
-
+
- {data?.name}
@@ -27,7 +33,7 @@ const UserInfo = () => {
-
{data?.name}
+
{userinfo?.name}
@@ -50,8 +56,8 @@ const UserInfo = () => {
-

{data?.bio}

- {!data?.for_hire && ( +

{userinfo?.bio}

+ {!userinfo?.for_hire && ( Available for hire { )}

- {data?.location}

+ {userinfo?.location}

- Contact With {data?.first_name} + Contact With {userinfo?.first_name}

+
Interest
- {data?.tags?.custom?.map((item,index)=> + {userinfo?.tags?.custom?.map((item,index)=> {item?.title} - ) - - } + )}
@@ -87,16 +92,16 @@ const UserInfo = () => {