Skip to content

Commit

Permalink
cards bug fixed and topics created
Browse files Browse the repository at this point in the history
  • Loading branch information
payamx committed Nov 8, 2023
1 parent 3c65581 commit a35548e
Show file tree
Hide file tree
Showing 13 changed files with 763 additions and 122 deletions.
3 changes: 3 additions & 0 deletions src/App.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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));
}
4 changes: 2 additions & 2 deletions src/App.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,8 +18,8 @@ const App = () => {
<Routes>
<Route element={ <SharedLayer/>} >
<Route path="/" index element={<Home/>}/>
<Route path=":userName" element={<ProfileLayout/>}>
<Route path="photos" element={<UserPhotos/>}/>
<Route path=":username" element={<ProfileLayout/>}>
<Route path="" element={<UserPhotos/>}/>
<Route path="likes" element={<UserLikes/>}/>
<Route path="collection" element={<UserCollection/>}/>
</Route>
Expand Down
87 changes: 45 additions & 42 deletions src/Componnent/CardList.jsx
View file
Original file line number Diff line number Diff line change
@@ -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";
Expand All @@ -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);
Expand All @@ -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) =>
<div className=" ">
<div className=" flex items-center justify-between pe-4 ">

Expand All @@ -46,7 +46,7 @@ const CardList = () => {

</div>
<button
className=" text-white inline text-start p-2 bg-sky-600 rounded-md"> Hire!
className=" text-white inline text-start p-2 bg-blue-500 rounded-md"> Hire!
</button>

</div>
Expand All @@ -56,8 +56,8 @@ const CardList = () => {
</div>
<div className="text-center p-3 text-white">

<Link to={`/${username}`} target="_blank" rel="noopener noreferrer">
<button className="px-20 py-2 m-2 text-center rounded-md bg-sky-600 "> view profile</button>
<Link to={`${username}`} target="_blank" >
<button className="px-20 py-2 m-2 text-center rounded-md bg-blue-500 "> view profile</button>

</Link>

Expand All @@ -66,16 +66,18 @@ const CardList = () => {
</div>;


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
Expand All @@ -87,6 +89,7 @@ const CardList = () => {
return () => {
window.removeEventListener('scroll', handleScroll);
};

}, [page]);

// Debounce the entire handleScroll function
Expand All @@ -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 (
<div className=" container mx-auto flex justify-center">

Expand All @@ -113,36 +115,39 @@ const CardList = () => {
{data &&
data?.map((arr, index) => (
<div key={index}>
{arr.map((item, itemIndex) => (
{arr?.map((item, itemIndex) => (


<div key={itemIndex} className="w-full my-3 px-2 break-inside-avoid relative "
onMouseOver={() => onHover(itemIndex)}
onMouseOut={onHoverOver}>
<img className=" rounded-xl" src={item?.urls?.regular}/>

{hoverIndex&& hoverIndex===itemIndex?(



<div>

<div className="absolute bottom-0 left-0 right-0 m-6">
<Popover
placement="topLeft"
content={content(item?.user?.profile_image?.medium,item?.user?.first_name,
item?.user?.last_name,item?.user?.username,item?.urls?.small
)}
trigger="hover"
open={open}
onOpenChange={handleOpenChange}>

<div className="text-white text-center flex items-center justify-start hover:brightness-50 ">
<img src={item?.user?.profile_image?.medium}
className="inline-block h-12 w-12 rounded-full m-1"/>
<div className="text-start">
<span className="text-xl inline-block ">{item?.user?.username}</span>
<span className="text-sm block">
<Link to={`/${item?.user?.username}` } target="_blank">
<img className=" rounded-xl" src={item?.urls?.regular}/>
</Link>


{hoverIndex && hoverIndex === itemIndex ? (

<div>

<div className="absolute bottom-0 left-0 right-0 m-6">
<Popover
placement="topLeft"
content={content(item?.user?.profile_image?.medium, item?.user?.first_name,
item?.user?.last_name, item?.user?.username, item?.urls?.small
)}
trigger="hover"
open={open}
onOpenChange={handleOpenChange}>

<div
className="text-white text-center flex items-center justify-start hover:brightness-50 ">
<img src={item?.user?.profile_image?.medium}
className="inline-block h-12 w-12 rounded-full m-1"/>
<div className="text-start">
<span
className="text-xl inline-block ">{item?.user?.username}</span>
<span className="text-sm block">
{item?.user?.for_hire && (
<span className="text-sm block ">
Available for hire
Expand All @@ -151,23 +156,21 @@ const CardList = () => {
</span>
)}
</span>
</div>

</div>

</div>

</Popover>

</Popover>

</div>

</div>

):''

}
</div>

) : ''

}


</div>
Expand Down
6 changes: 5 additions & 1 deletion src/Componnent/Navbar.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,14 +4,18 @@ 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 (
<div>
<div className="flex justify-start items-center mx-2 " >

<div className=" w-18 h-18 md:m-2">
<img src="/photos.svg"/>
<Link to="/" >
<img src="/photos.svg"/>

</Link>
</div>

<SearchAnt />
Expand Down
45 changes: 33 additions & 12 deletions src/Componnent/NavbarCategory.jsx
View file
Original file line number Diff line number Diff line change
@@ -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 (


<div className="flex justify-start items-center m-3 text-zinc-500 md:text-xl divide-x-2 divide-black overflow-x-auto ">
<div className="flex justify-start items-center m-3 text-zinc-500
md:text-2xl font-bold divide-x-2 divide-black overflow-x-auto grow ">

<div className="flex justify-start items-center space-x-2 ">
<Link to={'/'} className="p-2" >Editoral</Link>
<Link to={'/'} className="p-2">Following</Link>
<Link to={''} className="p-2">Editoral</Link>
<Link to={''} className="p-2">Following</Link>
</div>
<div className="flex justify-start items-center ms-2 flex-nowrap ">
<Link to={'/'} className="p-2" >Editoral</Link>
<Link to={'/'} className="p-2" >Editoral</Link>
<Link to={'/'} className="p-2" >Editoral</Link>
<Link to={'/'} className="p-2" >Editoral</Link>
<Link to={'/'} className="p-2" >Editoral</Link>
<Link to={'/'} className="p-2" >Editoral</Link>
<Link to={'/'} className="p-2" >Editoral</Link>

<div className="flex justify-start items-center ms-2 flex-nowrap gradient-fade">

{topics?.map((item, index) => (

<Link to={`/t/${item?.title}`} key={index}
className="mx-4 py-4 flex whitespace-nowrap">{item?.title}</Link>

))}


</div>


</div>
);
};
Expand Down
7 changes: 6 additions & 1 deletion src/Componnent/NavbarMenu.jsx
View file
Original file line number Diff line number Diff line change
@@ -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);
};
Expand Down
Loading

0 comments on commit a35548e

Please sign in to comment.