fix: auth screens (#2054)

This commit is contained in:
Aaryan Khandelwal 2023-09-01 17:10:06 +05:30 committed by GitHub
parent 441e83eba6
commit 54d781ef91
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 69 additions and 13 deletions

View File

@ -1,12 +1,17 @@
import { useEffect } from "react";
import Link from "next/link";
import Image from "next/image";
import { observer } from "mobx-react-lite";
import { useRouter } from "next/router";
// mobx
import { observer } from "mobx-react-lite";
// components
import { NavbarSearch } from "./search";
import { NavbarIssueBoardView } from "./issue-board-view";
import { NavbarIssueFilter } from "./issue-filter";
import { NavbarTheme } from "./theme";
// ui
import { PrimaryButton } from "components/ui";
// lib
import { useMobxStore } from "lib/mobx/store-provider";
// store
@ -25,11 +30,13 @@ const renderEmoji = (emoji: string | { name: string; color: string }) => {
};
const IssueNavbar = observer(() => {
const { project: projectStore }: RootStore = useMobxStore();
const { project: projectStore, user: userStore }: RootStore = useMobxStore();
// router
const router = useRouter();
const { workspace_slug, project_slug, board } = router.query;
const user = userStore?.currentUser;
useEffect(() => {
if (workspace_slug && project_slug) {
projectStore.fetchProjectSettings(workspace_slug.toString(), project_slug.toString());
@ -77,6 +84,32 @@ const IssueNavbar = observer(() => {
<div className="flex-shrink-0 relative">
<NavbarTheme />
</div>
{user ? (
<div className="border border-custom-border-200 rounded flex items-center gap-2 p-2">
{user.avatar && user.avatar !== "" ? (
<div className="h-5 w-5 rounded-full">
{/* eslint-disable-next-line @next/next/no-img-element */}
<img src={user.avatar} alt={user.display_name ?? ""} className="rounded-full" />
</div>
) : (
<div className="bg-custom-background-80 h-5 w-5 rounded-full grid place-items-center text-[10px] capitalize">
{(user.display_name ?? "A")[0]}
</div>
)}
<h6 className="text-xs font-medium">{user.display_name}</h6>
</div>
) : (
<div className="flex-shrink-0">
<Link href={`/?next_path=${router.asPath}`}>
<a>
<PrimaryButton className="flex-shrink-0" outline>
Sign in
</PrimaryButton>
</a>
</Link>
</div>
)}
</div>
);
});

View File

@ -1,10 +1,16 @@
import React, { useEffect } from "react";
import React from "react";
import Link from "next/link";
import { useRouter } from "next/router";
// mobx
import { observer } from "mobx-react-lite";
// lib
import { useMobxStore } from "lib/mobx/store-provider";
// components
import { CommentCard, AddComment } from "components/issues/peek-overview";
// ui
import { Icon, PrimaryButton } from "components/ui";
// types
import { IIssue } from "types/issue";
@ -20,10 +26,10 @@ export const PeekOverviewIssueActivity: React.FC<Props> = observer((props) => {
const comments = issueDetailStore.details[issueDetailStore.peekId || ""]?.comments || [];
console.log("issueDetailStore", issueDetailStore);
const user = userStore?.currentUser;
return (
<div>
<div className="pb-10">
<h4 className="font-medium">Activity</h4>
{workspace_slug && (
<div className="mt-4">
@ -32,11 +38,27 @@ export const PeekOverviewIssueActivity: React.FC<Props> = observer((props) => {
<CommentCard key={comment.id} comment={comment} workspaceSlug={workspace_slug?.toString()} />
))}
</div>
{user ? (
<>
{projectStore.deploySettings?.comments && (
<div className="mt-4">
<AddComment disabled={!userStore.currentUser} />
</div>
)}
</>
) : (
<div className="bg-custom-background-80 px-2 py-2.5 flex items-center justify-between gap-2 border border-custom-border-300 rounded">
<p className="flex gap-2 text-sm text-custom-text-200 break-words overflow-hidden">
<Icon iconName="lock" className="!text-sm" />
Sign in to add your comment
</p>
<Link href={`/?next_path=${router.asPath}`}>
<a>
<PrimaryButton className="flex-shrink-0 !px-7">Sign in</PrimaryButton>
</a>
</Link>
</div>
)}
</div>
)}
</div>

View File

@ -17,7 +17,7 @@ const HomePage = () => {
const { user: userStore } = useMobxStore();
const router = useRouter();
const { next_path = "/" } = router.query;
const { next_path } = router.query;
const { setToastAlert } = useToast();
@ -38,7 +38,7 @@ const HomePage = () => {
router.push(`/onboarding?next_path=${next_path}`);
return;
}
router.push(next_path.toString());
router.push((next_path ?? "/").toString());
};
const handleGoogleSignIn = async ({ clientId, credential }: any) => {

View File

@ -28,8 +28,9 @@ class UserStore implements IUserStore {
}
setCurrentUser = (user: any) => {
// TODO: destructure user object
this.currentUser = user;
runInAction(() => {
this.currentUser = { ...user };
});
};
/**