format nicer
This commit is contained in:
Arjun Patel
+72
-52
@@ -6,113 +6,133 @@ import { Team, TeamStatus } from "../../models/team";
|
||||
import { User, UserStatus } from "../../models/user";
|
||||
import TeamService from "../../services/teamService";
|
||||
|
||||
const initialSite: string = 'https://'
|
||||
const initialSite: string = "https://";
|
||||
|
||||
const teamService = new TeamService()
|
||||
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()
|
||||
const { currUser } = useAuth();
|
||||
const [error, setError] = useState<string>("");
|
||||
const [loading, setLoading] = useState<Boolean>(true);
|
||||
const router = useRouter();
|
||||
|
||||
useEffect(() => {
|
||||
(async function() {
|
||||
(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')
|
||||
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')
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
router.push("/teams/login");
|
||||
}
|
||||
|
||||
setLoading(false)
|
||||
setLoading(false);
|
||||
})();
|
||||
}, [])
|
||||
}, []);
|
||||
|
||||
async function handleSubmit(e) {
|
||||
e.preventDefault()
|
||||
e.preventDefault();
|
||||
|
||||
setLoading(true)
|
||||
setLoading(true);
|
||||
|
||||
if (!teamName) {
|
||||
setError('You must input a team name!')
|
||||
return
|
||||
setError("You must input a team name!");
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
const team = new Team()
|
||||
team.name = teamName
|
||||
team.createdByUserId = currUser.uid
|
||||
team.status = TeamStatus.created
|
||||
|
||||
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
|
||||
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)
|
||||
const createdTeamId = await teamService.createTeam(team);
|
||||
router.push("/teams/" + createdTeamId);
|
||||
} catch (error) {
|
||||
setError(error.message);
|
||||
}
|
||||
|
||||
setLoading(false)
|
||||
setLoading(false);
|
||||
}
|
||||
|
||||
const [teamName, setTeamName] = useState<string>('')
|
||||
const [companySite, setcompanySite] = useState<string>(initialSite)
|
||||
const [teamName, setTeamName] = useState<string>("");
|
||||
const [companySite, setcompanySite] = useState<string>(initialSite);
|
||||
|
||||
return (
|
||||
<form
|
||||
<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}
|
||||
onSubmit={handleSubmit}
|
||||
>
|
||||
{/* header */}
|
||||
<div className="text-lg">🙌Create a Team</div>
|
||||
|
||||
{
|
||||
error && <span className="text-red-300 text-md">{error}</span>
|
||||
}
|
||||
{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 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)} />
|
||||
<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">
|
||||
<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
|
||||
type="submit"
|
||||
className="text-sm text-white font-semibold py-2 px-5 bg-teal-500 rounded"
|
||||
>
|
||||
{"Continue ->"}
|
||||
</button>
|
||||
}
|
||||
|
||||
)}
|
||||
</span>
|
||||
</form>
|
||||
)
|
||||
}
|
||||
);
|
||||
}
|
||||
|
||||
+123
-74
@@ -6,125 +6,165 @@ import { User } from "../../models/user";
|
||||
import UserService from "../../services/userService";
|
||||
import Image from "next/image";
|
||||
|
||||
|
||||
export default function Profile() {
|
||||
const { currUser, logOut } = useAuth()
|
||||
const [user, setUser] = useState<User | null>(null)
|
||||
const { currUser, logOut } = useAuth();
|
||||
const [user, setUser] = useState<User | null>(null);
|
||||
|
||||
const router = useRouter()
|
||||
const userService: UserService = new UserService()
|
||||
const router = useRouter();
|
||||
const userService: UserService = new UserService();
|
||||
|
||||
useEffect(() => {
|
||||
(async function() {
|
||||
(async function () {
|
||||
try {
|
||||
// if not authenticated, take user to the login
|
||||
if (!currUser) {
|
||||
console.log('not authenticated...routing from dashboard to teams home')
|
||||
console.log(
|
||||
"not authenticated...routing from dashboard to teams home"
|
||||
);
|
||||
// router.push('/teams/login')
|
||||
}
|
||||
|
||||
// get user
|
||||
const returnedUser: User|null = await userService.getUser(currUser.uid)
|
||||
// get user
|
||||
const returnedUser: User | null = await userService.getUser(
|
||||
currUser.uid
|
||||
);
|
||||
|
||||
// if the user is null, then go ahead and create the user even though it's not there yet
|
||||
if (!returnedUser) {
|
||||
userService.createUser(currUser.uid, currUser.email, currUser.photoURL)
|
||||
userService.createUser(
|
||||
currUser.uid,
|
||||
currUser.email,
|
||||
currUser.photoURL
|
||||
);
|
||||
}
|
||||
|
||||
console.log('got user from the backend')
|
||||
console.log("got user from the backend");
|
||||
|
||||
setUser(returnedUser)
|
||||
setNickname(returnedUser.nickName ?? '')
|
||||
setFirstName(returnedUser.firstName ?? currUser.displayName.split(" ")[0])
|
||||
setLastName(returnedUser.lastName ?? '')
|
||||
} catch(error) {
|
||||
console.log(error)
|
||||
router.push('/teams/login')
|
||||
setUser(returnedUser);
|
||||
setNickname(returnedUser.nickName ?? "");
|
||||
setFirstName(
|
||||
returnedUser.firstName ?? currUser.displayName.split(" ")[0]
|
||||
);
|
||||
setLastName(returnedUser.lastName ?? "");
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
router.push("/teams/login");
|
||||
}
|
||||
})();
|
||||
}, [])
|
||||
}, []);
|
||||
|
||||
async function handleSubmit(e) {
|
||||
e.preventDefault();
|
||||
|
||||
if (!firstName) {
|
||||
setError('Must input first name')
|
||||
return
|
||||
setError("Must input first name");
|
||||
return;
|
||||
} else if (!lastName) {
|
||||
setError('Must input last name')
|
||||
return
|
||||
setError("Must input last name");
|
||||
return;
|
||||
} else if (!nickname) {
|
||||
setError('Must input nickname')
|
||||
return
|
||||
setError("Must input nickname");
|
||||
return;
|
||||
} else if (nickname.length > 22) {
|
||||
setError('nickname must be less than 22 characters')
|
||||
return
|
||||
setError("nickname must be less than 22 characters");
|
||||
return;
|
||||
}
|
||||
|
||||
// create the user in the backend or just merge results
|
||||
let newUser = new User()
|
||||
newUser.id = currUser.uid
|
||||
newUser.firstName = firstName
|
||||
newUser.lastName = lastName
|
||||
newUser.nickName = nickname
|
||||
newUser.avatarUrl = currUser.photoURL
|
||||
let newUser = new User();
|
||||
newUser.id = currUser.uid;
|
||||
newUser.firstName = firstName;
|
||||
newUser.lastName = lastName;
|
||||
newUser.nickName = nickname;
|
||||
newUser.avatarUrl = currUser.photoURL;
|
||||
|
||||
try {
|
||||
await userService.updateUser(newUser)
|
||||
router.push('/teams')
|
||||
}
|
||||
catch(error) {
|
||||
setError('Something went wrong in saving your information. Please try again.')
|
||||
await userService.updateUser(newUser);
|
||||
router.push("/teams");
|
||||
} catch (error) {
|
||||
setError(
|
||||
"Something went wrong in saving your information. Please try again."
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
const [firstName, setFirstName] = useState<string>(currUser.displayName.split(" ")[0]);
|
||||
const [lastName, setLastName] = useState<string>('');
|
||||
const [nickname, setNickname] = useState<string>('')
|
||||
const [error, setError] = useState<string>('')
|
||||
const [firstName, setFirstName] = useState<string>(
|
||||
currUser.displayName.split(" ")[0]
|
||||
);
|
||||
const [lastName, setLastName] = useState<string>("");
|
||||
const [nickname, setNickname] = useState<string>("");
|
||||
const [error, setError] = useState<string>("");
|
||||
|
||||
return (
|
||||
<form
|
||||
<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}
|
||||
onSubmit={handleSubmit}
|
||||
>
|
||||
{/* header */}
|
||||
<div className="text-lg">Profile</div>
|
||||
|
||||
{
|
||||
error && <span className="text-red-300 text-md">{error}</span>
|
||||
}
|
||||
{error && <span className="text-red-300 text-md">{error}</span>}
|
||||
|
||||
<Divider />
|
||||
|
||||
<span className="flex flex-col items-start">
|
||||
<span className="text-md">Avatar</span>
|
||||
<span className="text-gray-300 text-xs">Please change your google image to change this.</span>
|
||||
<img src={user ? user.avatarUrl : currUser.photoURL} alt="asdf" className="rounded-lg mt-2" />
|
||||
<span className="text-gray-300 text-xs">
|
||||
Please change your google image to change this.
|
||||
</span>
|
||||
<img
|
||||
src={user ? user.avatarUrl : currUser.photoURL}
|
||||
alt="asdf"
|
||||
className="rounded-lg mt-2"
|
||||
/>
|
||||
</span>
|
||||
|
||||
<span className="flex flex-col items-start">
|
||||
<span className="text-md">Email</span>
|
||||
<span className="text-gray-300 text-xs mb-2">This is set from your Google account and cannot be changed.</span>
|
||||
<input disabled className="w-full rounded-lg bg-gray-100 p-3" value={user ? user.emailAddress : currUser.email} readOnly />
|
||||
<span className="text-gray-300 text-xs mb-2">
|
||||
This is set from your Google account and cannot be changed.
|
||||
</span>
|
||||
<input
|
||||
disabled
|
||||
className="w-full rounded-lg bg-gray-100 p-3"
|
||||
value={user ? user.emailAddress : currUser.email}
|
||||
readOnly
|
||||
/>
|
||||
</span>
|
||||
|
||||
<span className="flex flex-col items-start">
|
||||
<span className="text-md">First Name</span>
|
||||
<span className="text-gray-300 text-xs mb-2"></span>
|
||||
<input placeholder="ex. John" className="w-full rounded-lg bg-gray-50 p-3" value={firstName} onChange={e => setFirstName(e.target.value)} />
|
||||
<input
|
||||
placeholder="ex. John"
|
||||
className="w-full rounded-lg bg-gray-50 p-3"
|
||||
value={firstName}
|
||||
onChange={(e) => setFirstName(e.target.value)}
|
||||
/>
|
||||
</span>
|
||||
|
||||
<span className="flex flex-col items-start">
|
||||
<span className="text-md">Last Name</span>
|
||||
<span className="text-gray-300 text-xs mb-2"></span>
|
||||
<input placeholder="ex. Brown" className="w-full rounded-lg bg-gray-50 p-3" value={lastName} onChange={e => setLastName(e.target.value)} />
|
||||
<input
|
||||
placeholder="ex. Brown"
|
||||
className="w-full rounded-lg bg-gray-50 p-3"
|
||||
value={lastName}
|
||||
onChange={(e) => setLastName(e.target.value)}
|
||||
/>
|
||||
</span>
|
||||
|
||||
<span className="flex flex-col items-start">
|
||||
<span className="text-md">Nickname</span>
|
||||
<span className="text-gray-300 text-xs mb-2">What does your team call you?</span>
|
||||
<input placeholder="ex. nicky" className="w-full rounded-lg bg-gray-50 p-3" value={nickname} onChange={e => setNickname(e.target.value)} />
|
||||
<span className="text-gray-300 text-xs mb-2">
|
||||
What does your team call you?
|
||||
</span>
|
||||
<input
|
||||
placeholder="ex. nicky"
|
||||
className="w-full rounded-lg bg-gray-50 p-3"
|
||||
value={nickname}
|
||||
onChange={(e) => setNickname(e.target.value)}
|
||||
/>
|
||||
</span>
|
||||
|
||||
<Divider />
|
||||
@@ -132,24 +172,33 @@ export default function Profile() {
|
||||
<span className="flex flex-row justify-end space-x-2">
|
||||
{/* if they already had a nickname, they are probably revisiting this page */}
|
||||
{/* can't cancel if they are a new user */}
|
||||
{
|
||||
user && user.nickName ?
|
||||
<>
|
||||
<button onClick={() => router.push('/teams') } 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>
|
||||
</>
|
||||
:
|
||||
<>
|
||||
{/* if they already had a nickname, they are probably revisiting this page */}
|
||||
<button type="submit" className='text-sm text-white font-semibold py-2 px-5 bg-teal-500 rounded'>
|
||||
{'Continue ->'}
|
||||
</button>
|
||||
</>
|
||||
}
|
||||
|
||||
{user && user.nickName ? (
|
||||
<>
|
||||
<button
|
||||
onClick={() => router.push("/teams")}
|
||||
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>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
{/* if they already had a nickname, they are probably revisiting this page */}
|
||||
<button
|
||||
type="submit"
|
||||
className="text-sm text-white font-semibold py-2 px-5 bg-teal-500 rounded"
|
||||
>
|
||||
{"Continue ->"}
|
||||
</button>
|
||||
</>
|
||||
)}
|
||||
</span>
|
||||
</form>
|
||||
)
|
||||
}
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user