cleaning, prolly broke a lot but whatever
This commit is contained in:
Arjun Patel
@@ -19,7 +19,7 @@ import Announcements from "../components/demo/Announcements";
|
||||
import Rooms from "../components/demo/Rooms";
|
||||
import VoiceLineConceptDemo from "../components/demo/VoiceLineConceptDemo";
|
||||
|
||||
import MainLogo from "../components/MainLogo";
|
||||
import MainLogo from "../components/Logo/MainLogo";
|
||||
import { Divider, Tooltip, Image as AntDImage } from "antd";
|
||||
import LangingPageLayout from "../components/Layouts/LandingPageLayout";
|
||||
import LandingPageActionBar from "../components/demo/LandingPageActionBar";
|
||||
|
||||
@@ -1,16 +1,16 @@
|
||||
import { useRouter } from "next/router";
|
||||
import React, { ReactElement } from "react";
|
||||
import Conversations from "../../components/v2/Conversations";
|
||||
import Done from "../../components/v2/Done";
|
||||
import Drawer from "../../components/v2/Drawer";
|
||||
import Header from "../../components/v2/Header";
|
||||
import Later from "../../components/v2/Later";
|
||||
import Sidebar from "../../components/v2/Sidebar";
|
||||
import Conversations from "../../components/MainTabsOrPages/Conversations";
|
||||
import Done from "../../components/MainTabsOrPages/Done";
|
||||
import Drawer from "../../components/MainTabsOrPages/Drawer";
|
||||
import Header from "../../components/MainTabsOrPages/Header";
|
||||
import Later from "../../components/MainTabsOrPages/Later";
|
||||
import Sidebar from "../../components/MainTabsOrPages/Sidebar";
|
||||
import { CSSTransition, SwitchTransition } from "react-transition-group";
|
||||
import CreateConversation from "../../components/v2/CreateConversation";
|
||||
import CreateConversation from "../../components/FullPageExperiences/CreateConversation.tsx";
|
||||
import { FaArrowLeft } from "react-icons/fa";
|
||||
import KeyboardShortcutHandler from "../../components/v2/KeyboardShortcutHandler";
|
||||
import SearchResults from "../../components/v2/SearchResults";
|
||||
import KeyboardShortcutHandler from "../../components/MainTabsOrPages/KeyboardShortcutHandler";
|
||||
import SearchResults from "../../components/FullPageExperiences/SearchResults";
|
||||
import { QueryRoutes, Routes } from "@nirvana/common/helpers/routes";
|
||||
|
||||
export default function Me() {
|
||||
|
||||
@@ -1,134 +0,0 @@
|
||||
import { GetServerSidePropsContext, GetServerSidePropsResult } from "next";
|
||||
import { useRouter } from "next/router";
|
||||
import { useEffect, useState } from "react";
|
||||
import Header from "../../components/Dashboard/Header";
|
||||
import Rooms from "../../components/Dashboard/Rooms";
|
||||
import TeamVoiceLine from "../../components/Dashboard/TeamVoiceLine";
|
||||
import BackgroundLayout from "../../components/Layouts/BackgroundLayout";
|
||||
import Loading from "../../components/Loading";
|
||||
import AudioContextProvider from "../../contexts/keyboardContext";
|
||||
import { useAuth } from "../../contexts/authContext";
|
||||
import {
|
||||
TeamDashboardContextProvider,
|
||||
useTeamDashboardContext,
|
||||
} from "../../contexts/teamDashboardContext";
|
||||
import { Team } from "../../models/team";
|
||||
import { TeamMemberStatus } from "../../models/teamMember";
|
||||
import { UserStatus } from "../../models/user";
|
||||
import TeamService from "../../services/teamService";
|
||||
import UserService from "../../services/userService";
|
||||
import Announcements from "../../components/Dashboard/Announcements";
|
||||
import Links from "../../components/Dashboard/Links";
|
||||
import Office from "../../components/Dashboard/Office";
|
||||
import ShortcutHelpModal from "../../components/Modals/ShortcutHelpModal";
|
||||
|
||||
// User has switched back to the tab
|
||||
const onFocus = () => {
|
||||
console.log("Tab is in focus");
|
||||
};
|
||||
|
||||
// User has switched away from the tab (AKA tab is hidden)
|
||||
const onBlur = () => {
|
||||
console.log("Tab is blurred");
|
||||
};
|
||||
|
||||
const alertUserAboutClosing = (ev) => {
|
||||
// change user status to offline
|
||||
|
||||
ev.preventDefault();
|
||||
return (ev.returnValue = "are you sure?");
|
||||
};
|
||||
|
||||
const userService = new UserService();
|
||||
|
||||
function TeamDashboard() {
|
||||
const { currUser } = useAuth();
|
||||
const router = useRouter();
|
||||
const teamDashboardContext = useTeamDashboardContext();
|
||||
|
||||
// user goes offline
|
||||
const handleTabClosing = () => {
|
||||
// change status of user
|
||||
userService.updateUserStatus(currUser.uid, UserStatus.offline);
|
||||
};
|
||||
|
||||
// shows browser alert to warn user of exiting
|
||||
const alertUserAboutClosing = (event: any) => {
|
||||
event.preventDefault();
|
||||
event.returnValue = "";
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
// set the document title based on the team
|
||||
// todo: update based on who sent you a message
|
||||
document.title = teamDashboardContext.team.name;
|
||||
|
||||
window.addEventListener("focus", onFocus);
|
||||
window.addEventListener("blur", onBlur);
|
||||
// Calls onFocus when the window first loads
|
||||
onFocus();
|
||||
|
||||
// set user to online until he closes tab/window
|
||||
userService.updateUserStatus(currUser.uid, UserStatus.online);
|
||||
|
||||
window.addEventListener("beforeunload", alertUserAboutClosing);
|
||||
window.addEventListener("unload", handleTabClosing);
|
||||
return () => {
|
||||
// Specify how to clean up after this effect:
|
||||
window.removeEventListener("focus", onFocus);
|
||||
window.removeEventListener("blur", onBlur);
|
||||
window.removeEventListener("beforeunload", alertUserAboutClosing);
|
||||
window.removeEventListener("unload", handleTabClosing);
|
||||
};
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<>
|
||||
<ShortcutHelpModal />
|
||||
|
||||
<div className="container mx-auto py-10 lg:px-10 flex flex-col space-y-5">
|
||||
<Header />
|
||||
|
||||
<div className="flex flex-row items-start lg:space-x-5 h-[56rem]">
|
||||
<div className="hidden lg:flex flex-col max-w-sm space-y-5 h-full">
|
||||
<Office />
|
||||
|
||||
<TeamVoiceLine />
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col space-y-5 flex-1 h-full">
|
||||
<Announcements />
|
||||
|
||||
<Rooms />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Links />
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
export default function TeamDashboardWrapper() {
|
||||
return (
|
||||
<TeamDashboardContextProvider>
|
||||
<AudioContextProvider>
|
||||
<BackgroundLayout>
|
||||
<TeamDashboard />
|
||||
</BackgroundLayout>
|
||||
</AudioContextProvider>
|
||||
</TeamDashboardContextProvider>
|
||||
);
|
||||
}
|
||||
|
||||
export async function getServerSideProps(context: GetServerSidePropsContext) {
|
||||
// basic check if this team exists
|
||||
|
||||
// todo check if authenticated
|
||||
|
||||
// todo check if this user is in this team
|
||||
|
||||
return {
|
||||
props: {},
|
||||
};
|
||||
}
|
||||
@@ -1,396 +0,0 @@
|
||||
import { Divider } from "antd";
|
||||
import { useRouter } from "next/router";
|
||||
import { useEffect, useState } from "react";
|
||||
import Loading from "../../../components/Loading";
|
||||
import {
|
||||
TeamDashboardContextProvider,
|
||||
useTeamDashboardContext,
|
||||
} from "../../../contexts/teamDashboardContext";
|
||||
import {
|
||||
TeamMember,
|
||||
TeamMemberRole,
|
||||
TeamMemberStatus,
|
||||
} from "../../../models/teamMember";
|
||||
import { toast } from "react-hot-toast";
|
||||
import { Team, TeamStatus } from "../../../models/team";
|
||||
|
||||
import {
|
||||
FaMoneyBillWave,
|
||||
FaTrash,
|
||||
FaPaperPlane,
|
||||
FaArrowLeft,
|
||||
} from "react-icons/fa";
|
||||
import TeamService from "../../../services/teamService";
|
||||
import Router from "next/router";
|
||||
import Moment from "react-moment";
|
||||
|
||||
export default function TeamAdminWrapper() {
|
||||
return (
|
||||
<TeamDashboardContextProvider>
|
||||
<TeamAdmin />
|
||||
</TeamDashboardContextProvider>
|
||||
);
|
||||
}
|
||||
|
||||
const initialSite: string = "https://";
|
||||
|
||||
function renderTeamMemberStatus(status: TeamMemberStatus) {
|
||||
switch (status) {
|
||||
case TeamMemberStatus.invited:
|
||||
return (
|
||||
<span className="text-gray-700 ml-1 bg-gray-200 p-1 rounded-md text-xs font-bold mt-2">
|
||||
invited
|
||||
</span>
|
||||
);
|
||||
case TeamMemberStatus.activated:
|
||||
return (
|
||||
<span className="text-sky-700 ml-1 bg-sky-200 p-1 rounded-md text-xs font-bold mt-2">
|
||||
active
|
||||
</span>
|
||||
);
|
||||
case TeamMemberStatus.deleted:
|
||||
return (
|
||||
<span className="text-red-700 ml-1 bg-red-200 p-1 rounded-md text-xs font-bold mt-2">
|
||||
deleted
|
||||
</span>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
const teamService = new TeamService();
|
||||
|
||||
function TeamAdmin() {
|
||||
const router = useRouter();
|
||||
const { teamid } = router.query;
|
||||
const { team, userTeamMember, teamMembers, user } = useTeamDashboardContext();
|
||||
|
||||
const [error, setError] = useState<string>("");
|
||||
const [teamName, setTeamName] = useState<string>(team.name);
|
||||
const [companySite, setcompanySite] = useState<string>(team.companySite);
|
||||
const [inviteEmail, setInviteEmail] = useState<string>("");
|
||||
const [loading, setLoading] = useState<Boolean>(true);
|
||||
|
||||
useEffect(() => {
|
||||
(async function () {
|
||||
// have checks for team and part of team or not in context
|
||||
try {
|
||||
// if not admin, I shouldn't be here
|
||||
if (userTeamMember.role != TeamMemberRole.admin) {
|
||||
toast.error("You are not allowed here!");
|
||||
router.push("/teams");
|
||||
}
|
||||
} catch (error) {
|
||||
console.log("something went wrong in admin team page");
|
||||
router.push("/teams");
|
||||
}
|
||||
|
||||
setLoading(false);
|
||||
})();
|
||||
}, []);
|
||||
|
||||
async function handleSubmitTeamUpdate(e) {
|
||||
e.preventDefault();
|
||||
|
||||
setLoading(true);
|
||||
|
||||
if (!teamName) {
|
||||
setError("You must input a team name!");
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
const updatedTeam = new Team();
|
||||
updatedTeam.id = team.id;
|
||||
updatedTeam.name = teamName;
|
||||
updatedTeam.createdByUserId = user.id;
|
||||
updatedTeam.status = TeamStatus.created;
|
||||
|
||||
if (companySite != initialSite) {
|
||||
// make sure to put null in database for the team
|
||||
updatedTeam.companySite = companySite;
|
||||
}
|
||||
|
||||
// update team name and company site if it changed
|
||||
await teamService.updateTeam(updatedTeam);
|
||||
|
||||
// take user back to team dashboard
|
||||
router.push("/teams/" + team.id);
|
||||
} catch (error) {
|
||||
setError(error.message);
|
||||
console.log(error);
|
||||
}
|
||||
|
||||
setLoading(false);
|
||||
}
|
||||
|
||||
async function handleSubmitNewTeamMember(e) {
|
||||
e.preventDefault();
|
||||
|
||||
setLoading(true);
|
||||
|
||||
if (!inviteEmail) {
|
||||
setError("You must input a valid email!");
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
const newInviteTeamMember = new TeamMember();
|
||||
newInviteTeamMember.inviteEmailAddress = inviteEmail;
|
||||
newInviteTeamMember.invitedByUserId = user.id;
|
||||
newInviteTeamMember.status = TeamMemberStatus.invited;
|
||||
newInviteTeamMember.teamId = team.id;
|
||||
|
||||
await teamService.createTeamInvite(newInviteTeamMember);
|
||||
|
||||
Router.reload();
|
||||
} catch (error) {
|
||||
toast.error("something went wrong");
|
||||
}
|
||||
}
|
||||
|
||||
async function handleDeleteTeamMember(e, teamMemberId: string) {
|
||||
e.preventDefault();
|
||||
|
||||
setLoading(true);
|
||||
|
||||
try {
|
||||
await teamService.updateTeamMemberStatus(
|
||||
teamMemberId,
|
||||
TeamMemberStatus.deleted
|
||||
);
|
||||
|
||||
Router.reload();
|
||||
} catch (error) {
|
||||
toast.error("unable to delete team member");
|
||||
}
|
||||
}
|
||||
|
||||
if (loading) {
|
||||
return <Loading />;
|
||||
}
|
||||
|
||||
async function handleInviteTeamMember(e, teamMemberId: string) {
|
||||
e.preventDefault();
|
||||
setLoading(true);
|
||||
|
||||
try {
|
||||
await teamService.updateTeamMemberStatus(
|
||||
teamMemberId,
|
||||
TeamMemberStatus.invited
|
||||
);
|
||||
|
||||
Router.reload();
|
||||
} catch (error) {
|
||||
toast.error("unable to delete team member");
|
||||
}
|
||||
}
|
||||
|
||||
if (loading) {
|
||||
return <Loading />;
|
||||
}
|
||||
|
||||
// get count of all active and invited users...
|
||||
const activeOrInvited = teamMembers.filter(
|
||||
(tmember) =>
|
||||
tmember.status == TeamMemberStatus.invited ||
|
||||
tmember.status == TeamMemberStatus.activated
|
||||
);
|
||||
const teamSpotsRemaining =
|
||||
(team.allowedUserCount || 0) - activeOrInvited.length - 1;
|
||||
|
||||
return (
|
||||
<div className="container mx-auto max-w-screen-sm m-10 bg-white p-10 rounded-lg shadow-md">
|
||||
<form
|
||||
onSubmit={handleSubmitTeamUpdate}
|
||||
className="flex flex-col space-y-5"
|
||||
>
|
||||
{/* header */}
|
||||
<div className="text-lg flex flex-row items-center space-x-2">
|
||||
<FaArrowLeft
|
||||
className="hover:cursor-pointer"
|
||||
onClick={() => router.push("/teams/" + teamid)}
|
||||
/>{" "}
|
||||
<span>Manage Team</span>
|
||||
</div>
|
||||
|
||||
{error && <span className="text-red-300 text-md">{error}</span>}
|
||||
|
||||
<Divider />
|
||||
|
||||
<span className="flex flex-col items-start">
|
||||
<span className="text-md">Team Name</span>
|
||||
<span className="text-gray-300 text-xs mb-2">
|
||||
Everyone in your team will see this.
|
||||
</span>
|
||||
<input
|
||||
placeholder="ex. AirBnB"
|
||||
className="w-full rounded-lg bg-gray-50 p-3"
|
||||
value={teamName}
|
||||
onChange={(e) => setTeamName(e.target.value)}
|
||||
/>
|
||||
</span>
|
||||
|
||||
<span className="flex flex-col items-start">
|
||||
<span className="text-md">Company Site</span>
|
||||
<span className="text-gray-300 text-xs mb-2">optional</span>
|
||||
<input
|
||||
placeholder="ex. https://"
|
||||
className="w-full rounded-lg bg-gray-50 p-3"
|
||||
value={companySite}
|
||||
onChange={(e) => setcompanySite(e.target.value)}
|
||||
/>
|
||||
</span>
|
||||
|
||||
<Divider />
|
||||
|
||||
<span className="flex flex-row justify-end space-x-2">
|
||||
<button
|
||||
onClick={() => router.push("/teams/" + team.id)}
|
||||
className="bg-gray-100 py-2 px-5 rounded text-gray-400"
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
<button
|
||||
type="submit"
|
||||
className="text-sm text-white font-semibold py-2 px-5 bg-teal-500 rounded"
|
||||
>
|
||||
Save
|
||||
</button>
|
||||
</span>
|
||||
</form>
|
||||
|
||||
<form
|
||||
className="flex flex-col space-y-5"
|
||||
onSubmit={handleSubmitNewTeamMember}
|
||||
>
|
||||
<Divider />
|
||||
|
||||
<span className="flex flex-row justify-start items-start">
|
||||
<FaMoneyBillWave className="text-5xl text-green-500" />
|
||||
|
||||
<span className="flex flex-col justify-start ml-2">
|
||||
<span className="text-md ">Billing</span>
|
||||
<span className="text-md text-gray-500 mr-20">
|
||||
Please email{" "}
|
||||
<button className="underline decoration-teal-500 text-brown-500">
|
||||
usenirvana@gmail.com
|
||||
</button>{" "}
|
||||
to open more spots for your team.
|
||||
</span>
|
||||
</span>
|
||||
|
||||
<span className="ml-auto text-center text-orange-700 bg-orange-200 p-1 rounded-md text-sm font-bold mt-2">
|
||||
{teamSpotsRemaining} spots remaining
|
||||
</span>
|
||||
</span>
|
||||
|
||||
<Divider />
|
||||
|
||||
<span className="text-md">Team</span>
|
||||
|
||||
{/* current user */}
|
||||
<div className="flex flex-row">
|
||||
<img src={user.avatarUrl} alt="asdf" className="rounded-full w-12" />
|
||||
<span className="flex flex-col items-start ml-2">
|
||||
<span className="text-md text-gray-500">
|
||||
{user.firstName + " " + user.lastName}
|
||||
|
||||
<span className="text-green-700 ml-1 bg-green-200 p-1 rounded-md text-xs font-bold mt-2">
|
||||
admin
|
||||
</span>
|
||||
|
||||
{renderTeamMemberStatus(userTeamMember.status)}
|
||||
</span>
|
||||
<span className="text-xs text-gray-200">{user.emailAddress}</span>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{/* mapping all team members */}
|
||||
{teamMembers.map((tmember, i) => {
|
||||
return (
|
||||
<div key={i} className="flex flex-row items-center">
|
||||
<div className="rounded-full w-12 animate-pulse bg-gray-200 h-12" />
|
||||
|
||||
<span className="flex flex-col items-start ml-2">
|
||||
<span className="text-md text-gray-500">
|
||||
{tmember.inviteEmailAddress}
|
||||
|
||||
{renderTeamMemberStatus(tmember.status)}
|
||||
</span>
|
||||
|
||||
{/* todo: date joined */}
|
||||
{/* <Moment date={tmember} className="text-xs text-gray-200" /> */}
|
||||
</span>
|
||||
|
||||
{tmember.status == TeamMemberStatus.deleted &&
|
||||
teamSpotsRemaining > 0 ? (
|
||||
<button
|
||||
onClick={(e) => handleInviteTeamMember(e, tmember.id)}
|
||||
className="ml-auto bg-gray-300 bg-opacity-25 p-2 rounded hover:bg-opacity-40"
|
||||
>
|
||||
<FaPaperPlane className="text-sm text-teal-500 " />
|
||||
</button>
|
||||
) : (
|
||||
<></>
|
||||
)}
|
||||
{tmember.status == TeamMemberStatus.invited ||
|
||||
tmember.status == TeamMemberStatus.activated ? (
|
||||
<button
|
||||
onClick={(e) => handleDeleteTeamMember(e, tmember.id)}
|
||||
className="bg-orange-300 bg-opacity-25 p-2 ml-auto rounded hover:bg-opacity-40"
|
||||
>
|
||||
<FaTrash className="text-sm text-orange-500 " />
|
||||
</button>
|
||||
) : (
|
||||
<></>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
|
||||
{/* input for adding people */}
|
||||
{teamSpotsRemaining > 0 ? (
|
||||
<>
|
||||
<span className="flex flex-col items-start">
|
||||
<span className="text-md">Add Members</span>
|
||||
<span className="text-red-300 text-md mb-2">
|
||||
IMPORTANT: Tell them to sign up at{" "}
|
||||
<span className="underline decoration-teal-500">
|
||||
usenirvana.com{" "}
|
||||
</span>{" "}
|
||||
using this same email address.
|
||||
</span>
|
||||
<input
|
||||
placeholder="ex. [email protected]"
|
||||
className="w-full rounded-lg bg-gray-50 p-3"
|
||||
value={inviteEmail}
|
||||
onChange={(e) => setInviteEmail(e.target.value)}
|
||||
/>
|
||||
</span>
|
||||
|
||||
<span className="flex flex-row justify-end space-x-2">
|
||||
{inviteEmail ? (
|
||||
<button
|
||||
type="submit"
|
||||
className="text-sm text-white font-semibold py-2 px-5 bg-teal-500 rounded"
|
||||
>
|
||||
Add
|
||||
</button>
|
||||
) : (
|
||||
<button
|
||||
type="submit"
|
||||
className="text-sm text-white font-semibold py-2 px-5 bg-gray-200 rounded"
|
||||
disabled
|
||||
>
|
||||
Add
|
||||
</button>
|
||||
)}
|
||||
</span>
|
||||
</>
|
||||
) : (
|
||||
<></>
|
||||
)}
|
||||
</form>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,142 +0,0 @@
|
||||
import { Divider } from "antd";
|
||||
import { useRouter } from "next/router";
|
||||
import { useEffect, useState } from "react";
|
||||
import { useAuth } from "../../contexts/authContext";
|
||||
import { Team, TeamStatus } from "../../models/team";
|
||||
import { User, UserStatus } from "../../models/user";
|
||||
import TeamService from "../../services/teamService";
|
||||
|
||||
const initialSite: string = "https://";
|
||||
|
||||
const teamService = new TeamService();
|
||||
|
||||
export default function CreateTeam() {
|
||||
const { currUser } = useAuth();
|
||||
const [error, setError] = useState<string>("");
|
||||
const [loading, setLoading] = useState<Boolean>(true);
|
||||
const router = useRouter();
|
||||
|
||||
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");
|
||||
}
|
||||
|
||||
// todo if user is in a team already, notify them to make sure
|
||||
// buttt most likely will already be routed to the correct place from the router...don't do the router's job
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
router.push("/teams/login");
|
||||
}
|
||||
|
||||
setLoading(false);
|
||||
})();
|
||||
}, []);
|
||||
|
||||
async function handleSubmit(e) {
|
||||
e.preventDefault();
|
||||
|
||||
setLoading(true);
|
||||
|
||||
if (!teamName) {
|
||||
setError("You must input a team name!");
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
const team = new Team();
|
||||
team.name = teamName;
|
||||
team.createdByUserId = currUser.uid;
|
||||
team.status = TeamStatus.created;
|
||||
team.allowedUserCount = 2;
|
||||
|
||||
if (companySite != initialSite) {
|
||||
// make sure to put null in database for the team
|
||||
team.companySite = companySite;
|
||||
}
|
||||
|
||||
// provision a team with state of initiated
|
||||
const createdTeamId = await teamService.createTeam(team);
|
||||
router.push("/teams/" + createdTeamId);
|
||||
} catch (error) {
|
||||
setError(error.message);
|
||||
}
|
||||
|
||||
setLoading(false);
|
||||
}
|
||||
|
||||
const [teamName, setTeamName] = useState<string>("");
|
||||
const [companySite, setcompanySite] = useState<string>(initialSite);
|
||||
|
||||
return (
|
||||
<form
|
||||
className="container mx-auto flex flex-col max-w-md m-10 bg-white p-10 rounded-lg shadow-md space-y-5"
|
||||
onSubmit={handleSubmit}
|
||||
>
|
||||
{/* header */}
|
||||
<div className="text-lg">🙌Create a Team</div>
|
||||
|
||||
{error && <span className="text-red-300 text-md">{error}</span>}
|
||||
|
||||
<Divider />
|
||||
|
||||
<span className="flex flex-col items-start">
|
||||
<span className="text-md">Team Name</span>
|
||||
<span className="text-gray-300 text-xs mb-2">
|
||||
Everyone in your team will see this. You can always change this later.
|
||||
</span>
|
||||
<input
|
||||
placeholder="ex. AirBnB"
|
||||
className="w-full rounded-lg bg-gray-50 p-3"
|
||||
value={teamName}
|
||||
onChange={(e) => setTeamName(e.target.value)}
|
||||
/>
|
||||
</span>
|
||||
|
||||
<span className="flex flex-col items-start">
|
||||
<span className="text-md">Company Site</span>
|
||||
<span className="text-gray-300 text-xs mb-2">optional</span>
|
||||
<input
|
||||
placeholder="ex. https://"
|
||||
className="w-full rounded-lg bg-gray-50 p-3"
|
||||
value={companySite}
|
||||
onChange={(e) => setcompanySite(e.target.value)}
|
||||
/>
|
||||
</span>
|
||||
|
||||
<Divider />
|
||||
|
||||
<span className="flex flex-row justify-end space-x-2">
|
||||
<button
|
||||
onClick={(e) => {
|
||||
e.preventDefault();
|
||||
router.push("/teams");
|
||||
}}
|
||||
className="bg-gray-100 py-2 px-5 rounded text-gray-400"
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
{loading ? (
|
||||
<div
|
||||
className="spinner-border animate-spin inline-block w-8 h-8 border-4 rounded-full text-blue-600"
|
||||
role="status"
|
||||
>
|
||||
<span className="text-black hidden">Loading...</span>
|
||||
</div>
|
||||
) : (
|
||||
<button
|
||||
type="submit"
|
||||
className="text-sm text-white font-semibold py-2 px-5 bg-teal-500 rounded"
|
||||
>
|
||||
{"Continue ->"}
|
||||
</button>
|
||||
)}
|
||||
</span>
|
||||
</form>
|
||||
);
|
||||
}
|
||||
@@ -1,240 +0,0 @@
|
||||
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;
|
||||
@@ -2,7 +2,7 @@ import { useRouter } from "next/router";
|
||||
import { useEffect } from "react";
|
||||
import { FaArrowLeft } from "react-icons/fa";
|
||||
import { FcGoogle } from "react-icons/fc";
|
||||
import MainLogo from "../../components/MainLogo";
|
||||
import MainLogo from "../../components/Logo/MainLogo";
|
||||
import { useAuth } from "../../contexts/authContext";
|
||||
|
||||
export default function Login() {
|
||||
|
||||
Reference in New Issue
Block a user