Skip to content

Commit

Permalink
Responsive done
Browse files Browse the repository at this point in the history
  • Loading branch information
@AbleKSaju
AbleKSaju committed May 15, 2024
1 parent 30db4a5 commit 6761bdd
Show file tree
Hide file tree
Showing 36 changed files with 530 additions and 526 deletions.
21 changes: 9 additions & 12 deletions src/components/HomeComponent/PostComponent/Modal/CreatePostmodalBody.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,15 +5,15 @@ import {
addImage,
clearImages,
addVideo,
clearVideos
clearVideos,
} from "../../../../utils/ReduxStore/Slice/postSlice";
import { useDispatch } from "react-redux";
const CreatePostModalBody = ({ setIsAddPost, setPostState }: any) => {
console.log("I am In CreatePostModalBody");

const [CamaraOn, setCamaraOn] = useState(false);
const [imgSrc, setImgSrc] = useState(null);

const dispatch = useDispatch();
const openGallery = () => {
const fileInput = document.getElementById("fileInput");
Expand All @@ -25,11 +25,11 @@ const CreatePostModalBody = ({ setIsAddPost, setPostState }: any) => {
};
const getImage = (e: React.ChangeEvent<HTMLInputElement>) => {
const formData = new FormData();
const files:any = e.target.files;
const files: any = e.target.files;

if (files) {
dispatch(clearImages());
dispatch(clearVideos())
dispatch(clearVideos());

for (let i = 0; i < files.length; i++) {
const file = files[i];
Expand All @@ -50,12 +50,11 @@ const CreatePostModalBody = ({ setIsAddPost, setPostState }: any) => {
}
// Check if the file is a video
else if (file.type.startsWith("video/")) {

console.log(file,'THIS SIS VEDIO FILE');

dispatch(addVideo(file))
console.log(file, "THIS SIS VEDIO FILE");

setPostState(4)
dispatch(addVideo(file));

setPostState(4);
} else {
// Handle invalid file types
console.error("Invalid file type:", file.type);
Expand All @@ -64,8 +63,6 @@ setPostState(4)

formData.append("files[]", file);
}


}
};

Expand Down
300 changes: 151 additions & 149 deletions src/pages/admin/DashBoard.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,163 +1,165 @@
import { useEffect, useState } from 'react';

import {Clapperboard, Users,Aperture,ShieldBanIcon} from 'lucide-react'
import Chart from './Graph';
import { showAllPostFuntion } from '../../utils/api/methods/PostService/get/showAllPost';
import { getAllUsersDataFunction } from '../../utils/api/methods/UserService/get';
import PostMapChart from './PostMapChart'
import UserOnlineChart from './UserOnlineChart'
import { getTheNumberOfStoriesFuntion } from '../../utils/api/methods/PostService/get/getTheNumberOfStoriesFuntion';
import { useEffect, useState } from "react";
import { Clapperboard, Users, Aperture, ShieldBanIcon } from "lucide-react";
import Chart from "./Graph";
import { showAllPostFuntion } from "../../utils/api/methods/PostService/get/showAllPost";
import { getAllUsersDataFunction } from "../../utils/api/methods/UserService/get";
import PostMapChart from "./PostMapChart";
import UserOnlineChart from "./UserOnlineChart";
import { getTheNumberOfStoriesFuntion } from "../../utils/api/methods/PostService/get/getTheNumberOfStoriesFuntion";
const DashBoardComponent = () => {
const [postData, setPostData]:any = useState([]);
const [storiesData, setStoriesData]:any = useState(0);
const [userData, setUserData]:any = useState([]);

useEffect(() => {
const fetchData = async () => {
try {
const response = await showAllPostFuntion();
if (response.status) {
setPostData(response.data);
}
} catch (error) {
console.error('Error fetching post data:', error);
const [postData, setPostData]: any = useState([]);
const [storiesData, setStoriesData]: any = useState(0);
const [userData, setUserData]: any = useState([]);

useEffect(() => {
const fetchData = async () => {
try {
const response = await showAllPostFuntion();
if (response.status) {
setPostData(response.data);
}
};

fetchData();
}, []);

useEffect(() => {
const fetchStatusData = async () => {
try {
const response:any = await getTheNumberOfStoriesFuntion();
console.log(response,"responseresponse");

if (response.status) {
setStoriesData(response.data.data);
}
} catch (error) {
console.error('Error fetching post data:', error);
} catch (error) {
console.error("Error fetching post data:", error);
}
};

fetchData();
}, []);

useEffect(() => {
const fetchStatusData = async () => {
try {
const response: any = await getTheNumberOfStoriesFuntion();
if (response.status) {
setStoriesData(response.data.data);
}
};

fetchStatusData();
}, []);
useEffect(() => {
const fetchUserData = async () => {
try {
const response = await getAllUsersDataFunction();
if (response.status) {
setUserData(response.data);
}
} catch (error) {
console.error('Error fetching user data:', error);
} catch (error) {
console.error("Error fetching post data:", error);
}
};

fetchStatusData();
}, []);

useEffect(() => {
const fetchUserData = async () => {
try {
const response = await getAllUsersDataFunction();
if (response.status) {
setUserData(response.data);
}
};
fetchUserData();
}, []);
} catch (error) {
console.error("Error fetching user data:", error);
}
};
fetchUserData();
}, []);

return (
<div className='w-full h-full flex flex-col sm:flex-row overflow-y-auto '>
{/* the side 1 part */}

<div className='w-full h-[350px] sm:w-3/12 justify-center sm:h-full flex flex-wrap sm:flex-col items-center p-4 gap-3 flex-none'>
{/* one small div */}
<div className='w-32 sm:w-10/12 bg-white h-[150px] rounded-md shadow-md flex justify-between p-1 gap-1'>
<div className='w-1/2 h-full flex sm: flex-col p-1 gap-1 '>
<div className=' h-1/2 w-full flex justify-center items-center'><Users size={30} color='gray'/></div>
<div className=' h-1/2 w-full flex justify-center items-start pt-2 '>
<p className='font-mono text-lg font-semibold text-gray-500'>Users</p>
</div>

</div>
<div className='w-1/2 h-full flex justify-center items-center'>
<p className='font-mono font-semibold text-xl text-gray-500'>{userData.length}</p>
</div>

</div>
{/* one small div */}

{/* one small div */}
<div className='w-32 sm:w-10/12 bg-white h-[150px] rounded-md shadow-md flex justify-between p-1 gap-1'>
<div className='w-1/2 h-full flex sm: flex-col p-1 gap-1 '>
<div className=' h-1/2 w-full flex justify-center items-center'><Clapperboard size={30} color='gray'/></div>
<div className=' h-1/2 w-full flex justify-center items-start pt-2 '>
<p className='font-mono text-lg font-semibold text-gray-500'>Posts</p>
</div>

</div>
<div className='w-1/2 h-full flex justify-center items-center'>
<p className='font-mono font-semibold text-xl text-gray-500'>{postData.length}</p>
</div>

</div>
{/* one small div */}
{/* one small div */}
<div className='w-32 sm:w-10/12 bg-white h-[150px] rounded-md shadow-md flex justify-between p-1 gap-1'>
<div className='w-1/2 h-full flex sm: flex-col p-1 gap-1 '>
<div className=' h-1/2 w-full flex justify-center items-center'><Aperture size={30} color='gray' /></div>
<div className=' h-1/2 w-full flex justify-center items-start pt-2 '>
<p className='font-mono text-lg font-semibold text-gray-500'>Stories</p>
</div>

</div>
<div className='w-1/2 h-full flex justify-center items-center'>
<p className='font-mono font-semibold text-xl text-gray-500'>{storiesData}</p>
</div>

</div>
{/* one small div */}
{/* one small div */}
<div className='w-32 sm:w-10/12 bg-white h-[150px] rounded-md shadow-md flex justify-between p-1 gap-1'>
<div className='w-1/2 h-full flex sm: flex-col p-1 gap-1 '>
<div className=' h-1/2 w-full flex justify-center items-center'><ShieldBanIcon size={30} color='gray'/></div>
<div className=' h-1/2 w-full flex justify-center items-start pt-2 '>
<p className='font-mono text-lg font-semibold text-gray-500'>Reports</p>
</div>

</div>
<div className='w-1/2 h-full flex justify-center items-center'>
<p className='font-mono font-semibold text-xl text-gray-500'>100</p>
</div>

</div>
{/* one small div */}

<div className="w-full h-full flex flex-col sm:flex-row overflow-y-auto ">
{/* the side 1 part */}

<div className="w-full h-[350px] sm:w-3/12 justify-center sm:h-full flex flex-wrap sm:flex-col items-center p-4 gap-3 flex-none">
{/* one small div */}
<div className="w-32 sm:w-10/12 bg-white h-[150px] rounded-md shadow-md flex justify-between p-1 gap-1">
<div className="w-1/2 h-full flex sm: flex-col p-1 gap-1 ">
<div className=" h-1/2 w-full flex justify-center items-center">
<Users size={30} color="gray" />
</div>
<div className=" h-1/2 w-full flex justify-center items-start pt-2 ">
<p className="font-mono text-lg font-semibold text-gray-500">
Users
</p>
</div>
</div>
<div className="w-1/2 h-full flex justify-center items-center">
<p className="font-mono font-semibold text-xl text-gray-500">
{userData.length}
</p>
</div>
</div>
{/* one small div */}

{/* one small div */}
<div className="w-32 sm:w-10/12 bg-white h-[150px] rounded-md shadow-md flex justify-between p-1 gap-1">
<div className="w-1/2 h-full flex sm: flex-col p-1 gap-1 ">
<div className=" h-1/2 w-full flex justify-center items-center">
<Clapperboard size={30} color="gray" />
</div>
<div className=" h-1/2 w-full flex justify-center items-start pt-2 ">
<p className="font-mono text-lg font-semibold text-gray-500">
Posts
</p>
</div>
</div>
<div className="w-1/2 h-full flex justify-center items-center">
<p className="font-mono font-semibold text-xl text-gray-500">
{postData.length}
</p>
</div>
</div>
{/* one small div */}
{/* one small div */}
<div className="w-32 sm:w-10/12 bg-white h-[150px] rounded-md shadow-md flex justify-between p-1 gap-1">
<div className="w-1/2 h-full flex sm: flex-col p-1 gap-1 ">
<div className=" h-1/2 w-full flex justify-center items-center">
<Aperture size={30} color="gray" />
</div>
<div className=" h-1/2 w-full flex justify-center items-start pt-2 ">
<p className="font-mono text-lg font-semibold text-gray-500">
Stories
</p>
</div>
</div>
<div className="w-1/2 h-full flex justify-center items-center">
<p className="font-mono font-semibold text-xl text-gray-500">
{storiesData}
</p>
</div>
</div>
{/* one small div */}
{/* one small div */}
<div className="w-32 sm:w-10/12 bg-white h-[150px] rounded-md shadow-md flex justify-between p-1 gap-1">
<div className="w-1/2 h-full flex sm: flex-col p-1 gap-1 ">
<div className=" h-1/2 w-full flex justify-center items-center">
<ShieldBanIcon size={30} color="gray" />
</div>
<div className=" h-1/2 w-full flex justify-center items-start pt-2 ">
<p className="font-mono text-lg font-semibold text-gray-500">
Reports
</p>
</div>
</div>
<div className="w-1/2 h-full flex justify-center items-center">
<p className="font-mono font-semibold text-xl text-gray-500">100</p>
</div>
</div>
{/* one small div */}
</div>

{/* the side 1 part */}


{/* the side 2 part */}


<div className='w-full h-[400px] sm:w-9/12 sm:h-full flex flex-col justify-center items-center gap-4 p-4 flex-none rounded-md'>
{/* for the users and post chart */}
<div className='w-11/12 bg-white rounded-md h-1/2 shadow-md'>
<Chart userData={userData} postData={postData}/>
</div>
{/* for the users and post chart */}

<div className='w-11/12 rounded-md h-1/2 flex justify-between items-center gap-3 '>
<div className='w-1/2 h-full rounded-md bg-white shadow-md'>
<PostMapChart/>
</div>
<div className='w-1/2 h-full rounded-md bg-white shadow-md'>
<UserOnlineChart/>
</div>
</div>



</div>
{/* the side 2 part */}
{/* the side 1 part */}

{/* the side 2 part */}


<div className="w-full h-[400px] sm:w-9/12 sm:h-full flex flex-col justify-center items-center gap-4 p-4 flex-none rounded-md">
{/* for the users and post chart */}
<div className="w-11/12 bg-white rounded-md h-1/2 shadow-md">
<Chart userData={userData} postData={postData} />
</div>
{/* for the users and post chart */}

<div className="w-11/12 rounded-md h-1/2 flex justify-between items-center gap-3 ">
<div className="w-1/2 h-full rounded-md bg-white shadow-md">
<PostMapChart />
</div>
<div className="w-1/2 h-full rounded-md bg-white shadow-md">
<UserOnlineChart />
</div>
</div>
</div>
{/* the side 2 part */}
</div>
);
};

export default DashBoardComponent;
export default DashBoardComponent;
2 changes: 0 additions & 2 deletions src/pages/admin/HomeComponent.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,3 @@


import UsersListComponent from "./UsersListComponent";
import PostListComponents from "./PostListComponents";
import { Route, Routes } from "react-router-dom";
Expand Down
3 changes: 1 addition & 2 deletions src/pages/admin/PostListComponents.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,5 @@
import { useEffect, useState } from "react";
import { toast } from "sonner";

import { showAllPostFuntion } from "../../utils/api/methods/PostService/get/showAllPost";
import { ChangePostStatusFunction } from "../../utils/api/methods/AdminService/post";

Expand Down Expand Up @@ -109,7 +108,7 @@ const PostListComponents = () => {
className="object-cover w-full h-full rounded-sm"
src={
data.mediaUrl[0]
? `http://localhost:3002/img/${data?.mediaUrl[0]}`
? `https://meta-media.in/api/post/img/${data?.mediaUrl[0]}`
: ``
}
alt=""
Expand Down
Loading

0 comments on commit 6761bdd

Please sign in to comment.