118 lines
3.8 KiB
TypeScript
118 lines
3.8 KiB
TypeScript
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
|
|
|
|
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={() => 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>
|
|
)
|
|
} |