Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: dynamic images #300

Merged
merged 2 commits into from
Jun 16, 2024
Merged

feat: dynamic images #300

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
8e6f747
feat: dynamic images
Sid-80 Jun 16, 2024
8a7f67a
fix:key
Sid-80 Jun 16, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
48 changes: 39 additions & 9 deletions src/app/dashboard/_components/FileList.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ import {
import moment from "moment";
import Image from "next/image";
import { usePathname, useRouter } from "next/navigation";
import { useMutation } from "convex/react";
import { useConvex, useMutation } from "convex/react";
import { api } from "../../../../convex/_generated/api";
import { Id } from "../../../../convex/_generated/dataModel";
import { Button } from "@/components/ui/button";
Expand All @@ -30,10 +30,11 @@ import {
} from "@/components/ui/alert-dialog";
import { toast } from "sonner";
import RenameFileModal from "@/components/shared/RenameFileModal";
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";

export interface FILE {
archive: boolean;
createdBt: string;
createdBy: string;
document: string;
fileName: string;
teamId: string;
Expand Down Expand Up @@ -117,6 +118,7 @@ const FileRow = ({
router,
index,
isSubmitted,
authorData,
}: {
file: FILE;
picture: string;
Expand All @@ -127,6 +129,7 @@ const FileRow = ({
router: ReturnType<typeof useRouter>;
index: number;
isSubmitted: boolean;
authorData: any[];
}) => (
<tr key={file._id} className="odd:bg-muted/50 cursor-pointer">
<td
Expand All @@ -151,13 +154,18 @@ const FileRow = ({
className="whitespace-nowrap px-4 py-2 text-muted-foreground"
onClick={() => router.push("/workspace/" + file._id)}
>
<Image
src={picture}
alt="user"
width={30}
height={30}
className="rounded-full"
/>
{authorData.map((author,index) =>
author.email === file.createdBy ? (
<Avatar key={index} className="w-[40px] h-[40px]">
<AvatarImage src={""} />
<AvatarFallback className=" text-xs">
{author.name.charAt(0)}
</AvatarFallback>
</Avatar>
) : (
""
)
)}
</td>
<td className="flex gap-2 whitespace-nowrap px-4 py-2 text-muted-foreground">
<RenameFileModal id={file._id} />
Expand Down Expand Up @@ -203,15 +211,36 @@ function FileList({
picture: string;
}) {
const router = useRouter();
const convex = useConvex();
const [sortConfig, setSortConfig] = useState<{
key: keyof FILE;
direction: string;
} | null>(null);
const [isSmallScreen, setIsSmallScreen] = useState(false);
const [isSubmitted, setIsSubmitted] = useState(false);
const [authorData, setAuthorData] = useState<any[]>([]);
const safeFileList = Array.isArray(fileList) ? fileList : [];
const pathname = usePathname();

useEffect(() => {
const getData = async () => {
let listOfCreators: string[] = [];

fileList?.forEach(async (file) => {
if (!listOfCreators.includes(file.createdBy)) {
listOfCreators.push(file.createdBy);
const result = await convex.query(api.user.getUser, {
email: file.createdBy,
});
setAuthorData([...authorData, result[0]]);
}
});
};
if (fileList) {
getData();
}
}, [fileList]);

const sortedFiles = [...safeFileList];
if (sortConfig !== null) {
sortedFiles.sort((a, b) => {
Expand Down Expand Up @@ -326,6 +355,7 @@ function FileList({
onDelete={deleteFunc}
router={router}
index={index}
authorData={authorData}
/>
)
)}
Expand Down
35 changes: 24 additions & 11 deletions src/app/dashboard/_components/SideNavTopSection.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,7 @@ import { useDispatch, useSelector } from "react-redux";
import { setTeamInfo } from "@/app/Redux/Team/team-slice";
import RenameTeamModal from "@/components/shared/RenameTeamModal";
import { RootState } from "@/app/store";
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";

export interface TEAM {
createdBy: String;
Expand All @@ -25,7 +26,7 @@ export interface TEAM {
}
function SideNavTopSection({ user, setActiveTeamInfo }: any) {
const id = useSelector((state: RootState) => state.team.teamId);
console.log(id)
console.log(id);
const menu = [
{
id: 1,
Expand All @@ -45,10 +46,24 @@ function SideNavTopSection({ user, setActiveTeamInfo }: any) {
const dispatch = useDispatch();
const [activeTeam, setActiveTeam] = useState<TEAM>();
const [teamList, setTeamList] = useState<TEAM[]>();
const [userData, setUserdata] = useState<any>();

useEffect(() => {
user && getTeamList();
}, [user]);

useEffect(() => {
const getData = async () => {
const result = await convex.query(api.user.getUser, {
email: user?.email!,
});
setUserdata(result[0]);
};
if (user) {
getData();
}
}, [user]);

useEffect(() => {
activeTeam ? setActiveTeamInfo(activeTeam) : null;
}, [activeTeam]);
Expand All @@ -65,8 +80,6 @@ function SideNavTopSection({ user, setActiveTeamInfo }: any) {
);
};

console.log(teamList)

const onMenuClick = (item: any) => {
if (item.path) {
router.push(item.path);
Expand Down Expand Up @@ -133,7 +146,7 @@ function SideNavTopSection({ user, setActiveTeamInfo }: any) {
{item.name}
</h2>
))}
{activeTeam?.createdBy === user?.email && <RenameTeamModal />}
{activeTeam?.createdBy === user?.email && <RenameTeamModal />}
<LogoutLink>
<h2
className="flex gap-2 items-center
Expand All @@ -148,13 +161,13 @@ function SideNavTopSection({ user, setActiveTeamInfo }: any) {
{/* User Info Section */}
{user && (
<div className="mt-2 flex gap-2 items-center">
<Image
src={user?.picture || "https://picsum.photos/50"}
alt="user"
width={30}
height={30}
className="rounded-full"
/>
<Avatar className="w-[40px] h-[40px]">
<AvatarImage src={userData?.image} />
<AvatarFallback className=" text-xs">
{user?.given_name?.charAt(0)}
{user?.family_name?.charAt(0)}
</AvatarFallback>
</Avatar>
<div>
<h2 className="text-[14px] font-bold">
{user?.given_name} {user?.family_name}
Expand Down
45 changes: 24 additions & 21 deletions src/app/dashboard/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@ import { useSelector, useDispatch } from "react-redux";
import Link from "next/link";
import InviteModal from "@/components/shared/InviteModal";
import JoinTeamModal from "@/components/shared/JoinTeamModal";
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";

export interface FILE {
archive: boolean;
Expand All @@ -34,7 +35,8 @@ function Dashboard() {
const count = useSelector((state: RootState) => state.counter.value);
const activeTeamId = useSelector((state: RootState) => state.team.teamId);
const dispatch = useDispatch();

const [userData, setUserdata] = useState<any>();

const checkUser = async () => {
const result = await convex.query(api.user.getUser, { email: user?.email });
if (!result?.length) {
Expand All @@ -43,12 +45,13 @@ function Dashboard() {
email: user.email,
image: user.picture || "https://picsum.photos/50",
});
const res = await convex.query(api.user.getUser, { email: user?.email });
setUserdata(res[0]);
} else {
setUserdata(result[0]);
}
console.log(result)
};



const { fileList_, setFileList_ } = useContext(FileListContext);
const [fileList, setFileList] = useState<any>();

Expand All @@ -68,11 +71,11 @@ function Dashboard() {
setFileList(filteredFileList);
};

useEffect(()=>{
if(user){
useEffect(() => {
if (user) {
checkUser();
}
},[user])
}, [user]);

return (
<div className="md:p-8 p-3">
Expand Down Expand Up @@ -111,13 +114,13 @@ function Dashboard() {
<div className="flex items-center justify-center gap-2">
<ThemeTogglebutton />
<Link href={`/dashboard/profile`}>
<Image
src={user?.picture || "https://picsum.photos/50"}
alt="user"
width={30}
height={30}
className="rounded-full"
/>
<Avatar className="w-[40px] h-[40px]">
<AvatarImage src={userData?.image} />
<AvatarFallback className=" text-xs">
{user?.given_name?.charAt(0)}
{user?.family_name?.charAt(0)}
</AvatarFallback>
</Avatar>
</Link>
</div>
<div className="flex items-center justify-center gap-2">
Expand Down Expand Up @@ -158,13 +161,13 @@ function Dashboard() {
<div className="flex gap-2 items-center mx-2">
<ThemeTogglebutton />
<Link href={`/dashboard/profile`}>
<Image
src={user?.picture || "https://picsum.photos/50"}
alt="user"
width={30}
height={30}
className="rounded-full"
/>
<Avatar className="w-[40px] h-[40px]">
<AvatarImage src={userData?.image} />
<AvatarFallback className=" text-xs">
{user?.given_name?.charAt(0)}
{user?.family_name?.charAt(0)}
</AvatarFallback>
</Avatar>
</Link>
<InviteModal />
<JoinTeamModal user={user} />
Expand Down
20 changes: 0 additions & 20 deletions src/app/dashboard/profile/_components/UserImage.tsx
View file
Open in desktop

This file was deleted.

29 changes: 26 additions & 3 deletions src/app/dashboard/profile/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,6 @@
import { useKindeBrowserClient } from "@kinde-oss/kinde-auth-nextjs";
import { ArrowLeft } from "lucide-react";
import Link from "next/link";
import UserImage from "./_components/UserImage";
import FileList, { Team } from "./_components/FileList";
import React, { useEffect, useState } from "react";
import { useConvex } from "convex/react";
Expand All @@ -11,6 +10,7 @@ import TeamList from "./_components/TeamList";
import { toggleClose } from "@/app/Redux/Menu/menuSlice";
import { useDispatch } from "react-redux";
import { Button } from "@/components/ui/button";
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";

export default function Page() {
const { user }: any = useKindeBrowserClient();
Expand All @@ -21,6 +21,7 @@ export default function Page() {
const [focusedTeam, setfocusedTeam] = useState<string | null>(null);
const [teamList, setTeamList] = useState<Team[]>([]);
const [teamListWithCount, setTeamListCount] = useState<Team[]>([]);
const [userData, setUserdata] = useState<any>();

useEffect(() => {
const getTeamData = async () => {
Expand All @@ -45,6 +46,18 @@ export default function Page() {
if (user) getAllFiles();
}, [user]);

useEffect(() => {
const getData = async () => {
const result = await convex.query(api.user.getUser, {
email: user?.email!,
});
setUserdata(result[0]);
};
if (user) {
getData();
}
}, [user]);

useEffect(() => {
if (teamList.length > 0 && fileList?.length > 0 && !focusedTeam) {
const fileCounts = fileList.reduce(
Expand All @@ -66,7 +79,7 @@ export default function Page() {

const allFilesHandler = async () => {
setfocusedTeam(null);
setFileList(null)
setFileList(null);
const result = await convex.query(api.files.getAllFiles, {});
const getFilesUser = result.filter(
(file: { createdBy: string }) => file.createdBy === user.email
Expand Down Expand Up @@ -98,7 +111,17 @@ export default function Page() {
<ArrowLeft />
</Link>
</nav>
<UserImage image={user?.picture} />

<div className="flex items-center justify-center w-full">
<Avatar className="w-[180px] h-[180px]">
<AvatarImage src={userData?.image} />
<AvatarFallback className=" text-2xl">
{user?.given_name?.charAt(0)}
{user?.family_name?.charAt(0)}
</AvatarFallback>
</Avatar>
</div>

<div className="flex flex-col gap-2 w-full justify-center text-center">
<h1 className=" text-md font-semibold md:text-xl">
{user?.given_name} {user?.family_name}
Expand Down
Loading