Skip to content

Commit

Permalink
card created
Browse files Browse the repository at this point in the history
  • Loading branch information
payamx committed Nov 6, 2023
1 parent b61dc32 commit 3c65581
Show file tree
Hide file tree
Showing 3 changed files with 118 additions and 16 deletions.
124 changes: 110 additions & 14 deletions src/Componnent/CardList.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,16 +1,72 @@
import React, {useCallback, useEffect} from 'react';
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 {CardGrid} from "./CardGrid.jsx";
import {fetchUser} from "../Redux/UserSlice.jsx";
import {Popover} from "antd";
import {Link} from "react-router-dom";


const CardList = () => {
const dispatch = useDispatch();
const {data, page, isLoading, error} = useSelector((state) => state.api);

// console.log(data, 'response data');
//هاور کردن روی عکس و نشون دادن پروفایل
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)=>
<div className=" ">
<div className=" flex items-center justify-between pe-4 ">

<div className=" text-center flex items-center justify-between pe-8 ">
<div className=" flex items-center justify-between ">
<img src={profileImage} alt="Profile"
className="inline-block h-12 w-12 rounded-full m-2"/>
<div className="text-start ">
<span className=" block text-start font-bold">{firstName} {lastName}</span>
<span className=" block text-start">{username}</span>
</div>
</div>

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

</div>
<div className="">
<img src={thumb}
className=" rounded w-20 h-20 p-2 pb-0"/>
</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>

</div>

</div>;


console.log(data, 'response data');
// console.log(page, 'page number');

useEffect(() => {
Expand Down Expand Up @@ -48,30 +104,70 @@ const CardList = () => {
const handleScroll = () => {
debouncedHandleScroll();
};

console.log(hoverIndex ,"is hover")
return (
<div className=" container mx-auto ">
<div className=" container mx-auto flex justify-center">

{isLoading ? 'is loding' : ''}
<div className="w-full my-5 mx-auto xs:columns-1 sm:columns-2 md:columns-3 lg:columns-3 gap-1">
<div className="w-fit my-5 mx-auto xs:columns-1 sm:columns-2 md:columns-3 lg:columns-3 gap-1 ">
{data &&
data.map((arr, index) => (
data?.map((arr, index) => (
<div key={index}>

{arr.map((item, itemIndex) => (


<div key={itemIndex} className="">
<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">
{item?.user?.for_hire && (
<span className="text-sm block ">
Available for hire
<img src="/correctwhite.svg"
className="inline-block h-6 w-6 ml-1 rounded-full "/>
</span>
)}
</span>
</div>

</div>


</Popover>


</div>

</div>

<CardGrid images={item}/>
{/*{item.preview_photos.map((image, imageIndex) => (*/}
):''

{/* <div key={imageIndex} className="w-full my-3 px-2 break-inside-avoid " >*/}
{/* <img className=" rounded-xl" src={image.urls.small}/>*/}
}

{/* </div>*/}

{/*))}*/}


</div>
Expand Down
2 changes: 2 additions & 0 deletions src/Componnent/NavbarCategory.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,9 +1,11 @@
import React from 'react';
import {Link} from "react-router-dom";


const NavbarCategory = () => {
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 space-x-2 ">
<Link to={'/'} className="p-2" >Editoral</Link>
Expand Down
8 changes: 6 additions & 2 deletions src/Redux/ApiSlice.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,12 +4,13 @@ import {axiosClient} from "../Axios.js";

export const fetchApiData = createAsyncThunk('api/fetchData',async (page) => {
// console.error(page,"async page ")
const response = await axiosClient.get('/collections', {
const response = await axiosClient.get('/photos', {
params: {
page: page,
per_page: 8,
per_page: 20,
},
});
// console.log(response)
return response.data ;

});
Expand All @@ -26,15 +27,18 @@ export const apiSlice = createSlice({
reducers: {},
extraReducers: (builder) => {
builder

.addCase(fetchApiData.pending, (state) => {
state.isLoading = true;
state.error = null;
})

.addCase(fetchApiData.fulfilled, (state, action) => {
state.isLoading = false;
state.data = [action.payload];
state.page =state.page+1;
})

.addCase(fetchApiData.rejected, (state, action) => {
state.isLoading = false;
state.error = action.error.message;
Expand Down

0 comments on commit 3c65581

Please sign in to comment.