241 lines
7.7 KiB
TypeScript
241 lines
7.7 KiB
TypeScript
import { useAuth } from "../../contexts/authContext";
|
|
import { useRouter } from "next/router";
|
|
import { useEffect, useState } from "react";
|
|
import UserService from "../../services/userService";
|
|
import { User } from "../../models/user";
|
|
import { GetServerSidePropsContext } from "next";
|
|
import firebaseAdmin from "firebase-admin";
|
|
import {
|
|
FaPeopleCarry,
|
|
FaArrowRight,
|
|
FaBullhorn,
|
|
FaPlus,
|
|
} from "react-icons/fa";
|
|
import BackgroundLayout from "../../components/Layouts/BackgroundLayout";
|
|
import TeamService from "../../services/teamService";
|
|
import Loading from "../../components/Loading";
|
|
import { TeamMemberStatus } from "../../models/teamMember";
|
|
import { Divider, Tooltip } from "antd";
|
|
import { Team } from "../../models/team";
|
|
import moment from "moment";
|
|
|
|
/**
|
|
* figure out where to take the user based on everything
|
|
*/
|
|
|
|
const userService: UserService = new UserService();
|
|
const teamService: TeamService = new TeamService();
|
|
|
|
function RouteHandler() {
|
|
const { currUser } = useAuth();
|
|
const router = useRouter();
|
|
|
|
const [loading, setLoading] = useState<Boolean>(true);
|
|
const [user, setUser] = useState<User | null>(null);
|
|
const [teams, setTeams] = useState<Team[]>([]);
|
|
|
|
useEffect(() => {
|
|
(async function () {
|
|
try {
|
|
// if not authenticated, take user to the login
|
|
if (!currUser) {
|
|
console.log(
|
|
"not authenticated...routing from dashboard to teams home"
|
|
);
|
|
router.push("/teams/login");
|
|
return;
|
|
}
|
|
|
|
// get user
|
|
const returnedUser: User | null = await userService.getUser(
|
|
currUser.uid
|
|
);
|
|
|
|
// if user has no profile, then go to create profile
|
|
if (
|
|
!returnedUser ||
|
|
!returnedUser.firstName ||
|
|
!returnedUser.lastName ||
|
|
!returnedUser.nickName
|
|
) {
|
|
console.log("no profile for the user, routing him/her there");
|
|
router.push("/teams/profile");
|
|
return;
|
|
}
|
|
setUser(returnedUser);
|
|
|
|
// get all teams that this user id is active in
|
|
// get all of the teams that this user's email is invited to
|
|
const teams: Team[] = await teamService.getActiveOrInvitedTeamsbyUser(
|
|
currUser.uid,
|
|
returnedUser.emailAddress
|
|
);
|
|
|
|
setTeams(teams);
|
|
|
|
setLoading(false);
|
|
} catch (error) {
|
|
console.log(error);
|
|
router.push("/teams/login");
|
|
}
|
|
})();
|
|
}, []);
|
|
|
|
if (loading || !user) {
|
|
return <Loading />;
|
|
}
|
|
|
|
// not in a team yet, and have not created a team yet
|
|
return (
|
|
<div className="container mx-auto flex flex-col max-w-screen-md m-10 bg-white p-10 rounded-lg shadow-md space-y-5">
|
|
{/* header */}
|
|
<div className="flex flex-row items-center justify-between">
|
|
<span className="flex flex-col justify-start">
|
|
<div className="text-lg">👋Hey, {user.firstName}</div>
|
|
<span className="text-gray-300 text-md">
|
|
Let's get you started.
|
|
</span>
|
|
</span>
|
|
|
|
<Tooltip title={"Click to Edit Profile"}>
|
|
<button onClick={() => router.push("/teams/profile")}>
|
|
<img
|
|
src={user ? user.avatarUrl : currUser.photoURL}
|
|
alt="avatar"
|
|
className="rounded-full w-12 shadow-lg"
|
|
/>
|
|
</button>
|
|
</Tooltip>
|
|
</div>
|
|
|
|
<div className="flex flex-row items-center">
|
|
<span className="text-gray-400">Your Teams</span>
|
|
<Tooltip title={"Add members and get started immediately!"}>
|
|
<button
|
|
onClick={() => window.open("/teams/create", "_self")}
|
|
className="ml-auto rounded text-xs font-semibold bg-gray-200 p-2 text-teal-600 shadow-lg flex flex-row items-center space-x-2"
|
|
>
|
|
<FaPlus />
|
|
<span>Create</span>
|
|
</button>
|
|
</Tooltip>
|
|
</div>
|
|
|
|
{/* all teams part of */}
|
|
<div className="flex flex-row flex-wrap">
|
|
{teams.map((team) => {
|
|
console.log(team);
|
|
return (
|
|
<span
|
|
key={team.id}
|
|
className="group hover:bg-teal-600 hover:bg-opacity-10 transition-all
|
|
p-5 rounded bg-gray-200 bg-opacity-20 flex flex-row justify-between items-center w-[20rem] m-2"
|
|
>
|
|
<span className="flex flex-col mr-10 items-start">
|
|
<span className="flex flex-row items-center space-x-2">
|
|
<span className="text-lg text-teal-600 group-hover:font-semibold transition-all">
|
|
{team.name}
|
|
</span>
|
|
<Tooltip title={"Number of pro spots purchased"}>
|
|
<span className="bg-teal-600 bg-opacity-50 text-xs rounded-full w-5 h-5 flex items-center justify-evenly text-white shrink-0">
|
|
{team.allowedUserCount || 2}
|
|
</span>
|
|
</Tooltip>
|
|
</span>
|
|
|
|
{team.companySite && (
|
|
<span
|
|
onClick={() => window.open(team.companySite, "_blank")}
|
|
className="text-xs hover:cursor-pointer font-semibold text-gray-500"
|
|
>
|
|
{team.companySite}
|
|
</span>
|
|
)}
|
|
|
|
<span className="text-xs text-gray-300">
|
|
{"created: " + moment(team.createdDate.toDate()).fromNow()}
|
|
</span>
|
|
</span>
|
|
|
|
<Tooltip title={"Go to " + team.name}>
|
|
<span
|
|
onClick={() => window.open("/teams/" + team.id, "_blank")}
|
|
className="ml-auto hover:cursor-pointer transition-all bg-gray-500 bg-opacity-25 p-2 rounded group-hover:bg-opacity-40 group-hover:bg-teal-500"
|
|
>
|
|
<FaArrowRight className="text-sm text-white" />
|
|
</span>
|
|
</Tooltip>
|
|
</span>
|
|
);
|
|
})}
|
|
|
|
{teams.length == 0 ? (
|
|
<button className="group flex flex-row py-5 px-3 items-center border border-dashed rounded">
|
|
<FaBullhorn className="text-5xl text-orange-300" />
|
|
|
|
<span className="flex flex-col items-start ml-2 mr-10">
|
|
<span className="text-gray-500">Remind Your Manager</span>
|
|
<span className="text-gray-300 text-xs text-left">
|
|
Your account email is {user.emailAddress}
|
|
</span>
|
|
</span>
|
|
</button>
|
|
) : (
|
|
""
|
|
)}
|
|
</div>
|
|
|
|
<span className="text-gray-300 ml-auto text-md mt-10">
|
|
or learn more about{" "}
|
|
<button
|
|
onClick={() => window.open("/", "_self")}
|
|
className="underline font-satisfy text-xl text-teal-500 decoration-teal-500"
|
|
>
|
|
nirvana
|
|
</button>
|
|
</span>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export async function getServerSideProps(context: GetServerSidePropsContext) {
|
|
// const cookies = nookies.get(context);
|
|
|
|
// var user: User | null = null
|
|
|
|
// if (cookies.token) {
|
|
// try {
|
|
// const headers: HeadersInit = {
|
|
// 'Content-Type': 'application/json',
|
|
// Authorization: JSON.stringify({ token: cookies.token })
|
|
// };
|
|
// const result = await unfetch('/api/auth/validateToken', { headers });
|
|
// console.log(result)
|
|
|
|
// // get user data
|
|
// const userService: UserService = new UserService()
|
|
|
|
// // the user is authenticated!
|
|
|
|
// // FETCH STUFF HERE!! 🚀
|
|
|
|
// // user = await userService.getUser("asdf")
|
|
// } catch (e) {
|
|
// // let exceptions fail silently
|
|
// // could be invalid token, just let client-side deal with that
|
|
|
|
// console.log(e)
|
|
// }
|
|
// }
|
|
|
|
// // Pass data to the page via props
|
|
// return { props: {
|
|
// user
|
|
// }
|
|
// }
|
|
|
|
return { props: {} };
|
|
}
|
|
|
|
export default RouteHandler;
|