Skip to content

Commit

Permalink
move unused imports
Browse files Browse the repository at this point in the history
  • Loading branch information
@John-Moore-UOA
John-Moore-UOA committed Sep 30, 2024
1 parent c6ab698 commit 2146969
Show file tree
Hide file tree
Showing 4 changed files with 216 additions and 179 deletions.
294 changes: 166 additions & 128 deletions web/src/components/Dashboard/Leaderboard.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,159 +4,197 @@ import { db } from "../../firebase/firebase";
import { collection, getDocs } from "firebase/firestore";

interface LeaderboardEntryProps {
rank: number;
img: string;
name: string;
hours: number;
rank: number;
img: string;
name: string;
hours: number;
}

function Leaderboard() {
const profileImg = "assets/EventHighlights/Events/BlindLowVision/imgA.png"; // Temporary image for the leaderboard
const name = "John Doe"; // Temporary name for the leaderboard
const ranking = "1st"; // Temporary ranking for the leaderboard
const hours = 14; // Temporary hours for the leaderboard

const all = [{
rank: 1,
img: profileImg,
name: name,
hours: hours
const profileImg = "assets/EventHighlights/Events/BlindLowVision/imgA.png"; // Temporary image for the leaderboard
const name = "John Doe"; // Temporary name for the leaderboard
const ranking = "1st"; // Temporary ranking for the leaderboard
const hours = 14; // Temporary hours for the leaderboard

const all = [
{
rank: 1,
img: profileImg,
name: name,
hours: hours,
},
{
rank: 2,
img: profileImg,
name: name,
hours: hours
rank: 2,
img: profileImg,
name: name,
hours: hours,
},
{
rank: 3,
img: profileImg,
name: name,
hours: hours
rank: 3,
img: profileImg,
name: name,
hours: hours,
},
{
rank: 4,
img: profileImg,
name: name,
hours: hours
rank: 4,
img: profileImg,
name: name,
hours: hours,
},
{
rank: 5,
img: profileImg,
name: name,
hours: hours
},{
rank: 6,
img: profileImg,
name: name,
hours: hours
rank: 5,
img: profileImg,
name: name,
hours: hours,
},
{
rank: 7,
img: profileImg,
name: name,
hours: hours
rank: 6,
img: profileImg,
name: name,
hours: hours,
},
{
rank: 8,
img: profileImg,
name: name,
hours: hours
rank: 7,
img: profileImg,
name: name,
hours: hours,
},
{
rank: 9,
img: profileImg,
name: name,
hours: hours
}
]; // Temporary array for the leaderboard
rank: 8,
img: profileImg,
name: name,
hours: hours,
},
{
rank: 9,
img: profileImg,
name: name,
hours: hours,
},
]; // Temporary array for the leaderboard

const friends = [{
rank: 1,
img: profileImg,
name: "Jane Doe",
hours: 12
const friends = [
{
rank: 1,
img: profileImg,
name: "Jane Doe",
hours: 12,
},
{
rank: 2,
img: profileImg,
name: "Jane Doe",
hours: 12
rank: 2,
img: profileImg,
name: "Jane Doe",
hours: 12,
},
{
rank: 3,
img: profileImg,
name: "Jane Doe",
hours: 12
}
]; // Temporary array for the leaderboard

const colref = collection(db, 'users')
const [users, setUsers] = useState<any[]>([]);

useEffect(() => {
getDocs(colref)
.then((snapshot) => {
let getUsers: any[] = [];
snapshot.docs.forEach((doc) => {
getUsers.push({ ...doc.data(), id: doc.id });
});
console.log(getUsers);
setUsers(getUsers);
})
.catch((err) => {
console.log(err.message);
rank: 3,
img: profileImg,
name: "Jane Doe",
hours: 12,
},
]; // Temporary array for the leaderboard

const colref = collection(db, "users");
const [users, setUsers] = useState<any[]>([]);

useEffect(() => {
getDocs(colref)
.then((snapshot) => {
let getUsers: any[] = [];
snapshot.docs.forEach((doc) => {
getUsers.push({ ...doc.data(), id: doc.id });
});
}, []);
console.log(getUsers);
setUsers(getUsers);
})
.catch((err) => {
console.log(err.message);
});
}, []);

//sort users by their hours
const renderUsers = users.sort((a,b) => b.hours - a.hours).slice(0, 10);
//sort users by their hours
const renderUsers = users.sort((a, b) => b.hours - a.hours).slice(0, 10);

const [leaderboardFilter, setLeaderboardFilter] = useState("all"); // Filter for the leaderboard
const [leaderboardData, setLeaderboardData] = useState(all); // Data for the leaderboard
const [leaderboardFilter, setLeaderboardFilter] = useState("all"); // Filter for the leaderboard
const [leaderboardData, setLeaderboardData] = useState(all); // Data for the leaderboard
console.log(leaderboardData); // to satify the linter

function changeLeaderboardFilter(filter: string) {
setLeaderboardFilter(filter);
if (filter == "all") {
setLeaderboardData(all);
} else {
setLeaderboardData(friends);
}
function changeLeaderboardFilter(filter: string) {
setLeaderboardFilter(filter);
if (filter == "all") {
setLeaderboardData(all);
} else {
setLeaderboardData(friends);
}
let rank = 1;

return (
<div className="h-full w-full pt-7 pb-2 flex flex-col items-center bg-white rounded-2xl">
<h2 className="text-primary text-section-header font-semibold">Leaderboard</h2>

<img src={profileImg} alt="profile" className="object-cover w-[90px] h-[90px] rounded-full m-2" />

<h3 className="text-detail mb-1">{name}</h3>

<div className="flex flex-row items-center justify-center">
<p className="text-detail text-[10pt] text-primary-dark">{"Rank: " + ranking}</p>
<p className="text-detail text-[10pt] text-primary-dark ml-3">{"Hours: " + hours}</p>
</div>

<div className="flex flex-row items-center justify-center">
<button className={leaderboardFilter == "all" ? "bg-white text-black after:block after:h-1 after:rounded-lg after:bg-primary-dark" :"bg-white text-grey"} onClick={() => changeLeaderboardFilter("all")}>All</button>
<button className={leaderboardFilter == "friends" ? "bg-white text-black after:block after:h-1 after:rounded-lg after:bg-primary-dark" :"bg-white text-grey"} onClick={() => changeLeaderboardFilter("friends")}>My Friends</button>
</div>

<div className="w-[90%] mt-3 h-8 flex flex-row items-center justify-between bg-primary rounded-xl pt-4 px-3">
<h3 className="text-[7pt] text-white">Rank</h3>
<h3 className="text-[7pt] text-white">Volunteer</h3>
<h3 className="text-[7pt] text-white">Hours</h3>
</div>

<div className="w-[90%] h-full flex flex-col pt-4 px-3 scrollbar-none overflow-y-scroll">
{renderUsers.map((user:any, index: number) => (
<LeaderboardEntry key={user.rank} rank={index + 1} img={user.profile_picture} fname={user.firstName} lname={user.lastName} hours={user.hours} />

))}
</div>
</div>
);
}
// let rank = 1; // never used?

return (
<div className="h-full w-full pt-7 pb-2 flex flex-col items-center bg-white rounded-2xl">
<h2 className="text-primary text-section-header font-semibold">
Leaderboard
</h2>

<img
src={profileImg}
alt="profile"
className="object-cover w-[90px] h-[90px] rounded-full m-2"
/>

<h3 className="text-detail mb-1">{name}</h3>

<div className="flex flex-row items-center justify-center">
<p className="text-detail text-[10pt] text-primary-dark">
{"Rank: " + ranking}
</p>
<p className="text-detail text-[10pt] text-primary-dark ml-3">
{"Hours: " + hours}
</p>
</div>

<div className="flex flex-row items-center justify-center">
<button
className={
leaderboardFilter == "all"
? "bg-white text-black after:block after:h-1 after:rounded-lg after:bg-primary-dark"
: "bg-white text-grey"
}
onClick={() => changeLeaderboardFilter("all")}
>
All
</button>
<button
className={
leaderboardFilter == "friends"
? "bg-white text-black after:block after:h-1 after:rounded-lg after:bg-primary-dark"
: "bg-white text-grey"
}
onClick={() => changeLeaderboardFilter("friends")}
>
My Friends
</button>
</div>

<div className="w-[90%] mt-3 h-8 flex flex-row items-center justify-between bg-primary rounded-xl pt-4 px-3">
<h3 className="text-[7pt] text-white">Rank</h3>
<h3 className="text-[7pt] text-white">Volunteer</h3>
<h3 className="text-[7pt] text-white">Hours</h3>
</div>

<div className="w-[90%] h-full flex flex-col pt-4 px-3 scrollbar-none overflow-y-scroll">
{renderUsers.map((user: any, index: number) => (
<LeaderboardEntry
key={user.rank}
rank={index + 1}
img={user.profile_picture}
fname={user.firstName}
lname={user.lastName}
hours={user.hours}
/>
))}
</div>
</div>
);
}

export default Leaderboard;
export default Leaderboard;
7 changes: 4 additions & 3 deletions web/src/context/UserContext.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,15 +1,16 @@
import { createContext, Dispatch } from "react";
import { User } from "@components/legacy/UserDetails";

export interface Action {
type: string;
payload: any;
}

export interface UsersContextType {
users: User[];
users: any; // make sure to change this to the correct type
dispatch: Dispatch<Action>;
token: string | null;
}

export const UsersContext = createContext<UsersContextType | undefined>(undefined)
export const UsersContext = createContext<UsersContextType | undefined>(
undefined
);
Loading

0 comments on commit 2146969

Please sign in to comment.