From 8cadced1aa5bdacae54082581fa3ec10a88746cc Mon Sep 17 00:00:00 2001 From: sriram veeraghanta Date: Wed, 30 Aug 2023 13:41:25 +0530 Subject: [PATCH] fix: moving to pages dir and downgrading next to 12 --- .../[project_slug]/layout.tsx | 64 ------- apps/space/app/layout.tsx | 31 ---- apps/space/app/page.tsx | 171 ------------------ .../accounts}/email-code-form.tsx | 0 .../accounts}/email-password-form.tsx | 0 .../accounts}/email-reset-password-form.tsx | 0 .../accounts}/github-login-button.tsx | 8 +- .../accounts}/google-login.tsx | 0 .../accounts/onboarding-form.tsx} | 21 +-- .../issues/filters-render/index.tsx | 9 +- .../label/filter-label-block.tsx | 9 +- .../issues/filters-render/label/index.tsx | 9 +- .../priority/filter-priority-block.tsx | 10 +- .../issues/filters-render/priority/index.tsx | 9 +- .../state/filter-state-block.tsx | 9 +- .../issues/filters-render/state/index.tsx | 9 +- .../issues/navbar/issue-board-view.tsx | 10 +- .../components/issues/navbar/issue-filter.tsx | 14 +- .../issues/peek-overview/add-comment.tsx | 17 +- .../peek-overview/issue-emoji-reactions.tsx | 18 +- .../peek-overview/issue-vote-reactions.tsx | 14 +- apps/space/layouts/project-layout.tsx | 31 ++++ apps/space/lib/mobx/store-init.tsx | 20 +- apps/space/next.config.js | 1 - apps/space/package.json | 14 +- .../[project_slug]/index.tsx} | 104 +++++------ .../[workspace_slug]/index.tsx} | 0 apps/space/pages/_app.tsx | 20 +- apps/space/pages/_document.tsx | 2 +- apps/space/pages/index.tsx | 7 + .../page.tsx => pages/onboarding/index.tsx} | 17 +- .../project-not-published/index.tsx} | 0 apps/space/store/user.ts | 2 - 33 files changed, 165 insertions(+), 485 deletions(-) delete mode 100644 apps/space/app/[workspace_slug]/[project_slug]/layout.tsx delete mode 100644 apps/space/app/layout.tsx delete mode 100644 apps/space/app/page.tsx rename apps/space/{app/(auth)/components => components/accounts}/email-code-form.tsx (100%) rename apps/space/{app/(auth)/components => components/accounts}/email-password-form.tsx (100%) rename apps/space/{app/(auth)/components => components/accounts}/email-reset-password-form.tsx (100%) rename apps/space/{app/(auth)/components => components/accounts}/github-login-button.tsx (92%) rename apps/space/{app/(auth)/components => components/accounts}/google-login.tsx (100%) rename apps/space/{app/onboarding/components/user-details.tsx => components/accounts/onboarding-form.tsx} (95%) create mode 100644 apps/space/layouts/project-layout.tsx rename apps/space/{app/[workspace_slug]/[project_slug]/page.tsx => pages/[workspace_slug]/[project_slug]/index.tsx} (60%) rename apps/space/{app/[workspace_slug]/page.tsx => pages/[workspace_slug]/index.tsx} (100%) create mode 100644 apps/space/pages/index.tsx rename apps/space/{app/onboarding/page.tsx => pages/onboarding/index.tsx} (91%) rename apps/space/{app/project-not-published/page.tsx => pages/project-not-published/index.tsx} (100%) diff --git a/apps/space/app/[workspace_slug]/[project_slug]/layout.tsx b/apps/space/app/[workspace_slug]/[project_slug]/layout.tsx deleted file mode 100644 index 81006dbb7..000000000 --- a/apps/space/app/[workspace_slug]/[project_slug]/layout.tsx +++ /dev/null @@ -1,64 +0,0 @@ -// next imports -import Link from "next/link"; -import Image from "next/image"; -import { Metadata, ResolvingMetadata } from "next"; -// components -import IssueNavbar from "components/issues/navbar"; -import IssueFilter from "components/issues/filters-render"; -// service -import ProjectService from "services/project.service"; -import { redirect } from "next/navigation"; - -type LayoutProps = { - params: { workspace_slug: string; project_slug: string }; -}; - -export async function generateMetadata({ params }: LayoutProps): Promise { - // read route params - const { workspace_slug, project_slug } = params; - const projectServiceInstance = new ProjectService(); - - try { - const project = await projectServiceInstance?.getProjectSettingsAsync(workspace_slug, project_slug); - - return { - title: `${project?.project_details?.name} | ${workspace_slug}`, - description: `${ - project?.project_details?.description || `${project?.project_details?.name} | ${workspace_slug}` - }`, - icons: `data:image/svg+xml,${ - typeof project?.project_details?.emoji != "object" - ? String.fromCodePoint(parseInt(project?.project_details?.emoji)) - : "✈️" - }`, - }; - } catch (error: any) { - if (error?.data?.error) { - redirect(`/project-not-published`); - } - return {}; - } -} - -const RootLayout = ({ children }: { children: React.ReactNode }) => ( -
-
- -
- -
{children}
- -
- -
- plane logo -
-
- Powered by Plane Deploy -
- -
-
-); - -export default RootLayout; diff --git a/apps/space/app/layout.tsx b/apps/space/app/layout.tsx deleted file mode 100644 index 1cb5fc643..000000000 --- a/apps/space/app/layout.tsx +++ /dev/null @@ -1,31 +0,0 @@ -"use client"; - -// root styles -import "styles/globals.css"; - -// next theme -import { ThemeProvider } from "next-themes"; - -// toast alert -import { ToastContextProvider } from "contexts/toast.context"; - -// mobx store provider -import { MobxStoreProvider } from "lib/mobx/store-provider"; -import MobxStoreInit from "lib/mobx/store-init"; - -const RootLayout = ({ children }: { children: React.ReactNode }) => ( - - - - - - -
{children}
- - - - - -); - -export default RootLayout; diff --git a/apps/space/app/page.tsx b/apps/space/app/page.tsx deleted file mode 100644 index 746e1c6d1..000000000 --- a/apps/space/app/page.tsx +++ /dev/null @@ -1,171 +0,0 @@ -"use client"; - -import React, { useEffect } from "react"; - -// next -import Image from "next/image"; -import Router from "next/router"; -import { useRouter, useSearchParams } from "next/navigation"; - -// assets -import BluePlaneLogoWithoutText from "public/plane-logos/blue-without-text.png"; - -// mobx -import { observer } from "mobx-react-lite"; -import { useMobxStore } from "lib/mobx/store-provider"; - -// services -import authenticationService from "services/authentication.service"; - -// hooks -import useToast from "hooks/use-toast"; - -// components -import { EmailPasswordForm } from "./(auth)/components/email-password-form"; -import { GithubLoginButton } from "./(auth)/components/github-login-button"; -import { GoogleLoginButton } from "./(auth)/components/google-login"; -import { EmailCodeForm } from "./(auth)/components/email-code-form"; - -const HomePage = () => { - const { user: userStore } = useMobxStore(); - - const router = useRouter(); - const searchParams = useSearchParams(); - - const { setToastAlert } = useToast(); - - const onSignInError = (error: any) => { - setToastAlert({ - title: "Error signing in!", - type: "error", - message: error?.error || "Something went wrong. Please try again later or contact the support team.", - }); - }; - - const onSignInSuccess = (response: any) => { - const isOnboarded = response?.user?.onboarding_step?.profile_complete || false; - const nextPath = searchParams?.get("next_path") || "/"; - - userStore.setCurrentUser(response?.user); - - if (!isOnboarded) { - router.push(`/onboarding?next_path=${nextPath}`); - return; - } - - router.push(nextPath); - }; - - const handleGoogleSignIn = async ({ clientId, credential }: any) => { - try { - if (clientId && credential) { - const socialAuthPayload = { - medium: "google", - credential, - clientId, - }; - const response = await authenticationService.socialAuth(socialAuthPayload); - - onSignInSuccess(response); - } else { - throw Error("Cant find credentials"); - } - } catch (err: any) { - onSignInError(err); - } - }; - - const handleGitHubSignIn = async (credential: string) => { - try { - if (process.env.NEXT_PUBLIC_GITHUB_ID && credential) { - const socialAuthPayload = { - medium: "github", - credential, - clientId: process.env.NEXT_PUBLIC_GITHUB_ID, - }; - const response = await authenticationService.socialAuth(socialAuthPayload); - onSignInSuccess(response); - } else { - throw Error("Cant find credentials"); - } - } catch (err: any) { - onSignInError(err); - } - }; - - const handlePasswordSignIn = async (formData: any) => { - await authenticationService - .emailLogin(formData) - .then((response) => { - try { - if (response) { - onSignInSuccess(response); - } - } catch (err: any) { - onSignInError(err); - } - }) - .catch((err) => onSignInError(err)); - }; - - const handleEmailCodeSignIn = async (response: any) => { - try { - if (response) { - onSignInSuccess(response); - } - } catch (err: any) { - onSignInError(err); - } - }; - - return ( -
-
-
-
-
- Plane Logo -
-
-
-
-
- {parseInt(process.env.NEXT_PUBLIC_ENABLE_OAUTH || "0") ? ( - <> -

- Sign in to Plane -

-
-
- -
-
- - -
-
- - ) : ( - - )} - - {parseInt(process.env.NEXT_PUBLIC_ENABLE_OAUTH || "0") ? ( -

- By signing up, you agree to the{" "} - - Terms & Conditions - -

- ) : null} -
-
-
- ); -}; - -export default observer(HomePage); diff --git a/apps/space/app/(auth)/components/email-code-form.tsx b/apps/space/components/accounts/email-code-form.tsx similarity index 100% rename from apps/space/app/(auth)/components/email-code-form.tsx rename to apps/space/components/accounts/email-code-form.tsx diff --git a/apps/space/app/(auth)/components/email-password-form.tsx b/apps/space/components/accounts/email-password-form.tsx similarity index 100% rename from apps/space/app/(auth)/components/email-password-form.tsx rename to apps/space/components/accounts/email-password-form.tsx diff --git a/apps/space/app/(auth)/components/email-reset-password-form.tsx b/apps/space/components/accounts/email-reset-password-form.tsx similarity index 100% rename from apps/space/app/(auth)/components/email-reset-password-form.tsx rename to apps/space/components/accounts/email-reset-password-form.tsx diff --git a/apps/space/app/(auth)/components/github-login-button.tsx b/apps/space/components/accounts/github-login-button.tsx similarity index 92% rename from apps/space/app/(auth)/components/github-login-button.tsx rename to apps/space/components/accounts/github-login-button.tsx index 54f215421..4ba47b421 100644 --- a/apps/space/app/(auth)/components/github-login-button.tsx +++ b/apps/space/components/accounts/github-login-button.tsx @@ -1,9 +1,7 @@ import { useEffect, useState, FC } from "react"; - import Link from "next/link"; import Image from "next/image"; -import { useSearchParams } from "next/navigation"; - +import { useRouter } from "next/router"; // next-themes import { useTheme } from "next-themes"; // images @@ -18,9 +16,9 @@ export const GithubLoginButton: FC = ({ handleSignIn }) const [loginCallBackURL, setLoginCallBackURL] = useState(undefined); const [gitCode, setGitCode] = useState(null); - const searchParams = useSearchParams(); + const router = useRouter(); - const code = searchParams?.get("code"); + const { code } = router.query; const { theme } = useTheme(); diff --git a/apps/space/app/(auth)/components/google-login.tsx b/apps/space/components/accounts/google-login.tsx similarity index 100% rename from apps/space/app/(auth)/components/google-login.tsx rename to apps/space/components/accounts/google-login.tsx diff --git a/apps/space/app/onboarding/components/user-details.tsx b/apps/space/components/accounts/onboarding-form.tsx similarity index 95% rename from apps/space/app/onboarding/components/user-details.tsx rename to apps/space/components/accounts/onboarding-form.tsx index d9bdec54b..c40465b3f 100644 --- a/apps/space/app/onboarding/components/user-details.tsx +++ b/apps/space/components/accounts/onboarding-form.tsx @@ -1,30 +1,20 @@ import { useEffect, Fragment } from "react"; - -// next -import { useSearchParams, useRouter } from "next/navigation"; - +import { useRouter } from "next/router"; // react-hook-form import { Controller, useForm } from "react-hook-form"; - // mobx import { observer } from "mobx-react-lite"; import { useMobxStore } from "lib/mobx/store-provider"; - // headless ui import { Listbox, Transition } from "@headlessui/react"; - // icons import { ChevronDownIcon, CheckIcon } from "@heroicons/react/20/solid"; - // constants import { USER_ROLES } from "constants/workspace"; - // hooks import useToast from "hooks/use-toast"; - // services import UserService from "services/user.service"; - // ui import { Input, PrimaryButton } from "components/ui"; @@ -38,11 +28,11 @@ type Props = { user?: any; }; -export const UserDetails: React.FC = observer(({ user }) => { +export const OnBoardingForm: React.FC = observer(({ user }) => { const { setToastAlert } = useToast(); const router = useRouter(); - const searchParams = useSearchParams(); + const { next_path } = router.query; const { user: userStore } = useMobxStore(); @@ -71,10 +61,7 @@ export const UserDetails: React.FC = observer(({ user }) => { .updateMe(payload) .then((response) => { userStore.setCurrentUser(response); - - const nextPath = searchParams?.get("next_path") || "/"; - router.push(nextPath); - + router.push(next_path?.toString() || "/"); setToastAlert({ type: "success", title: "Success!", diff --git a/apps/space/components/issues/filters-render/index.tsx b/apps/space/components/issues/filters-render/index.tsx index 74493a4c8..dcb6edf4b 100644 --- a/apps/space/components/issues/filters-render/index.tsx +++ b/apps/space/components/issues/filters-render/index.tsx @@ -1,7 +1,4 @@ -"use client"; - -import { useRouter, useParams } from "next/navigation"; - +import { useRouter } from "next/router"; // mobx react lite import { observer } from "mobx-react-lite"; // components @@ -16,9 +13,7 @@ const IssueFilter = observer(() => { const store: RootStore = useMobxStore(); const router = useRouter(); - const routerParams = useParams(); - - const { workspace_slug, project_slug } = routerParams as { workspace_slug: string; project_slug: string }; + const { workspace_slug, project_slug } = router.query as { workspace_slug: string; project_slug: string }; const clearAllFilters = () => { router.replace( diff --git a/apps/space/components/issues/filters-render/label/filter-label-block.tsx b/apps/space/components/issues/filters-render/label/filter-label-block.tsx index 800121dbe..8dffa0544 100644 --- a/apps/space/components/issues/filters-render/label/filter-label-block.tsx +++ b/apps/space/components/issues/filters-render/label/filter-label-block.tsx @@ -1,7 +1,4 @@ -"use client"; - -import { useRouter, useParams } from "next/navigation"; - +import { useRouter } from "next/router"; // mobx react lite import { observer } from "mobx-react-lite"; // mobx hook @@ -13,9 +10,7 @@ export const RenderIssueLabel = observer(({ label }: { label: IIssueLabel }) => const store = useMobxStore(); const router = useRouter(); - const routerParams = useParams(); - - const { workspace_slug, project_slug } = routerParams as { workspace_slug: string; project_slug: string }; + const { workspace_slug, project_slug } = router.query as { workspace_slug: string; project_slug: string }; const removeLabelFromFilter = () => { router.replace( diff --git a/apps/space/components/issues/filters-render/label/index.tsx b/apps/space/components/issues/filters-render/label/index.tsx index 946a29c74..ff8995eac 100644 --- a/apps/space/components/issues/filters-render/label/index.tsx +++ b/apps/space/components/issues/filters-render/label/index.tsx @@ -1,7 +1,4 @@ -"use client"; - -import { useRouter, useParams } from "next/navigation"; - +import { useRouter } from "next/router"; // mobx react lite import { observer } from "mobx-react-lite"; // components @@ -16,9 +13,7 @@ const IssueLabelFilter = observer(() => { const store: RootStore = useMobxStore(); const router = useRouter(); - const routerParams = useParams(); - - const { workspace_slug, project_slug } = routerParams as { workspace_slug: string; project_slug: string }; + const { workspace_slug, project_slug } = router.query as { workspace_slug: string; project_slug: string }; const clearLabelFilters = () => { router.replace( diff --git a/apps/space/components/issues/filters-render/priority/filter-priority-block.tsx b/apps/space/components/issues/filters-render/priority/filter-priority-block.tsx index b38c72a37..39e62a817 100644 --- a/apps/space/components/issues/filters-render/priority/filter-priority-block.tsx +++ b/apps/space/components/issues/filters-render/priority/filter-priority-block.tsx @@ -1,7 +1,4 @@ -"use client"; - -import { useRouter, useParams } from "next/navigation"; - +import { useRouter } from "next/router"; // mobx react lite import { observer } from "mobx-react-lite"; // mobx hook @@ -13,10 +10,7 @@ export const RenderIssuePriority = observer(({ priority }: { priority: IIssuePri const store = useMobxStore(); const router = useRouter(); - - const routerParams = useParams(); - - const { workspace_slug, project_slug } = routerParams as { workspace_slug: string; project_slug: string }; + const { workspace_slug, project_slug } = router.query as { workspace_slug: string; project_slug: string }; const removePriorityFromFilter = () => { router.replace( diff --git a/apps/space/components/issues/filters-render/priority/index.tsx b/apps/space/components/issues/filters-render/priority/index.tsx index 8f0f369c2..e8d873468 100644 --- a/apps/space/components/issues/filters-render/priority/index.tsx +++ b/apps/space/components/issues/filters-render/priority/index.tsx @@ -1,7 +1,4 @@ -"use client"; - -import { useRouter, useParams } from "next/navigation"; - +import { useRouter } from "next/router"; // mobx react lite import { observer } from "mobx-react-lite"; // mobx hook @@ -17,9 +14,7 @@ const IssuePriorityFilter = observer(() => { const store = useMobxStore(); const router = useRouter(); - const routerParams = useParams(); - - const { workspace_slug, project_slug } = routerParams as { workspace_slug: string; project_slug: string }; + const { workspace_slug, project_slug } = router.query as { workspace_slug: string; project_slug: string }; const clearPriorityFilters = () => { router.replace( diff --git a/apps/space/components/issues/filters-render/state/filter-state-block.tsx b/apps/space/components/issues/filters-render/state/filter-state-block.tsx index 3eb5dcd07..d7d280e60 100644 --- a/apps/space/components/issues/filters-render/state/filter-state-block.tsx +++ b/apps/space/components/issues/filters-render/state/filter-state-block.tsx @@ -1,7 +1,4 @@ -"use client"; - -import { useRouter, useParams } from "next/navigation"; - +import { useRouter } from "next/router"; // mobx react lite import { observer } from "mobx-react-lite"; // mobx hook @@ -15,9 +12,7 @@ export const RenderIssueState = observer(({ state }: { state: IIssueState }) => const store = useMobxStore(); const router = useRouter(); - const routerParams = useParams(); - - const { workspace_slug, project_slug } = routerParams as { workspace_slug: string; project_slug: string }; + const { workspace_slug, project_slug } = router.query as { workspace_slug: string; project_slug: string }; const stateGroup = issueGroupFilter(state.group); diff --git a/apps/space/components/issues/filters-render/state/index.tsx b/apps/space/components/issues/filters-render/state/index.tsx index e991f4a44..a4cb9082b 100644 --- a/apps/space/components/issues/filters-render/state/index.tsx +++ b/apps/space/components/issues/filters-render/state/index.tsx @@ -1,7 +1,4 @@ -"use client"; - -import { useRouter, useParams } from "next/navigation"; - +import { useRouter } from "next/router"; // mobx react lite import { observer } from "mobx-react-lite"; // components @@ -16,9 +13,7 @@ const IssueStateFilter = observer(() => { const store: RootStore = useMobxStore(); const router = useRouter(); - const routerParams = useParams(); - - const { workspace_slug, project_slug } = routerParams as { workspace_slug: string; project_slug: string }; + const { workspace_slug, project_slug } = router.query as { workspace_slug: string; project_slug: string }; const clearStateFilters = () => { router.replace( diff --git a/apps/space/components/issues/navbar/issue-board-view.tsx b/apps/space/components/issues/navbar/issue-board-view.tsx index 7bcb88eb1..0f4dc4b40 100644 --- a/apps/space/components/issues/navbar/issue-board-view.tsx +++ b/apps/space/components/issues/navbar/issue-board-view.tsx @@ -1,8 +1,4 @@ -"use client"; - -// next imports -import { useRouter, useParams, useSearchParams } from "next/navigation"; -// mobx react lite +import { useRouter } from "next/router"; import { observer } from "mobx-react-lite"; // constants import { issueViews } from "constants/data"; @@ -16,9 +12,7 @@ export const NavbarIssueBoardView = observer(() => { const store: RootStore = useMobxStore(); const router = useRouter(); - const routerParams = useParams(); - - const { workspace_slug, project_slug } = routerParams as { workspace_slug: string; project_slug: string }; + const { workspace_slug, project_slug } = router.query as { workspace_slug: string; project_slug: string }; const handleCurrentBoardView = (boardView: TIssueBoardKeys) => { store?.issue?.setCurrentIssueBoardView(boardView); diff --git a/apps/space/components/issues/navbar/issue-filter.tsx b/apps/space/components/issues/navbar/issue-filter.tsx index aa481194a..72dc365f7 100644 --- a/apps/space/components/issues/navbar/issue-filter.tsx +++ b/apps/space/components/issues/navbar/issue-filter.tsx @@ -1,18 +1,12 @@ -"use client"; - -import { useRouter, usePathname } from "next/navigation"; - -import { ChevronDownIcon } from "@heroicons/react/20/solid"; - -// mobx react lite +import { useRouter } from "next/router"; import { observer } from "mobx-react-lite"; +// icons +import { ChevronDownIcon } from "@heroicons/react/20/solid"; // mobx import { useMobxStore } from "lib/mobx/store-provider"; import { RootStore } from "store/root"; - // components import { Dropdown } from "components/ui/dropdown"; - // constants import { issueGroupFilter } from "constants/data"; @@ -22,7 +16,7 @@ export const NavbarIssueFilter = observer(() => { const store: RootStore = useMobxStore(); const router = useRouter(); - const pathName = usePathname(); + const pathName = router.asPath; const handleOnSelect = (key: "states" | "labels" | "priorities", value: string) => { if (key === "states") { diff --git a/apps/space/components/issues/peek-overview/add-comment.tsx b/apps/space/components/issues/peek-overview/add-comment.tsx index ede25f32d..9a1d61e6c 100644 --- a/apps/space/components/issues/peek-overview/add-comment.tsx +++ b/apps/space/components/issues/peek-overview/add-comment.tsx @@ -1,22 +1,15 @@ import React, { useRef } from "react"; - -import { useParams } from "next/navigation"; - +import { useRouter } from "next/router"; import { observer } from "mobx-react-lite"; -import { useMobxStore } from "lib/mobx/store-provider"; - -// react-hook-form import { useForm, Controller } from "react-hook-form"; - +// lib +import { useMobxStore } from "lib/mobx/store-provider"; // hooks import useToast from "hooks/use-toast"; - // ui import { SecondaryButton } from "components/ui"; - // types import { Comment } from "store/types"; - // components import Tiptap, { ITiptapRichTextEditor } from "components/tiptap"; @@ -48,8 +41,8 @@ export const AddComment: React.FC = observer((props) => { reset, } = useForm({ defaultValues }); - const routerParams = useParams(); - const { workspace_slug, project_slug } = routerParams as { workspace_slug: string; project_slug: string }; + const router = useRouter(); + const { workspace_slug, project_slug } = router.query as { workspace_slug: string; project_slug: string }; const { issue: issueStore, user: userStore } = useMobxStore(); diff --git a/apps/space/components/issues/peek-overview/issue-emoji-reactions.tsx b/apps/space/components/issues/peek-overview/issue-emoji-reactions.tsx index e89eb9879..2f51b5955 100644 --- a/apps/space/components/issues/peek-overview/issue-emoji-reactions.tsx +++ b/apps/space/components/issues/peek-overview/issue-emoji-reactions.tsx @@ -1,25 +1,17 @@ -"use client"; - -// react import { useEffect } from "react"; - -// next -import { useParams } from "next/navigation"; - -// mobx +import { useRouter } from "next/router"; import { observer } from "mobx-react-lite"; +// lib import { useMobxStore } from "lib/mobx/store-provider"; - // helpers import { groupReactions, renderEmoji } from "helpers/emoji.helper"; - -// ui +// components import { ReactionSelector } from "components/ui"; export const IssueEmojiReactions: React.FC = observer(() => { - const routerParams = useParams(); + const router = useRouter(); - const { workspace_slug, project_slug } = routerParams as { workspace_slug: string; project_slug: string }; + const { workspace_slug, project_slug } = router.query as { workspace_slug: string; project_slug: string }; const { user: userStore, issue: issueStore } = useMobxStore(); diff --git a/apps/space/components/issues/peek-overview/issue-vote-reactions.tsx b/apps/space/components/issues/peek-overview/issue-vote-reactions.tsx index f02c24221..77653614e 100644 --- a/apps/space/components/issues/peek-overview/issue-vote-reactions.tsx +++ b/apps/space/components/issues/peek-overview/issue-vote-reactions.tsx @@ -1,21 +1,15 @@ -"use client"; - -// react import { useState, useEffect, useRef } from "react"; - -// next -import { useParams } from "next/navigation"; - -// mobx import { observer } from "mobx-react-lite"; +import { useRouter } from "next/router"; +// lib import { useMobxStore } from "lib/mobx/store-provider"; export const IssueVotes: React.FC = observer(() => { const [isSubmitting, setIsSubmitting] = useState(false); - const routerParams = useParams(); + const router = useRouter(); - const { workspace_slug, project_slug } = routerParams as { workspace_slug: string; project_slug: string }; + const { workspace_slug, project_slug } = router.query as { workspace_slug: string; project_slug: string }; const { user: userStore, issue: issueStore } = useMobxStore(); diff --git a/apps/space/layouts/project-layout.tsx b/apps/space/layouts/project-layout.tsx new file mode 100644 index 000000000..2de2a75eb --- /dev/null +++ b/apps/space/layouts/project-layout.tsx @@ -0,0 +1,31 @@ +import Link from "next/link"; +import Image from "next/image"; +// components +import IssueNavbar from "components/issues/navbar"; + +type LayoutProps = { + params: { workspace_slug: string; project_slug: string }; +}; + +const ProjectLayout = ({ children }: { children: React.ReactNode }) => ( +
+
+ +
+
{children}
+ +
+); + +export default ProjectLayout; diff --git a/apps/space/lib/mobx/store-init.tsx b/apps/space/lib/mobx/store-init.tsx index f0203083f..93d2006c0 100644 --- a/apps/space/lib/mobx/store-init.tsx +++ b/apps/space/lib/mobx/store-init.tsx @@ -2,7 +2,7 @@ import { useEffect } from "react"; // next imports -import { useSearchParams } from "next/navigation"; +import { useRouter } from "next/router"; // mobx store import { useMobxStore } from "lib/mobx/store-provider"; import { RootStore } from "store/root"; @@ -10,8 +10,8 @@ import { RootStore } from "store/root"; const MobxStoreInit = () => { const store: RootStore = useMobxStore(); - // search params - const routerSearchparams = useSearchParams(); + const router = useRouter(); + const { states, labels, priorities } = router.query as { states: string[]; labels: string[]; priorities: string[] }; useEffect(() => { // theme @@ -21,16 +21,10 @@ const MobxStoreInit = () => { }, [store?.theme]); useEffect(() => { - if (!routerSearchparams) return; - - const states = routerSearchparams.get("states"); - const labels = routerSearchparams.get("labels"); - const priorities = routerSearchparams.get("priorities"); - - store.issue.userSelectedLabels = labels?.split(",") || []; - store.issue.userSelectedPriorities = priorities?.split(",") || []; - store.issue.userSelectedStates = states?.split(",") || []; - }, [routerSearchparams, store.issue]); + store.issue.userSelectedLabels = labels || []; + store.issue.userSelectedPriorities = priorities || []; + store.issue.userSelectedStates = states || []; + }, [store.issue]); return <>; }; diff --git a/apps/space/next.config.js b/apps/space/next.config.js index 4128b636a..ce021afe9 100644 --- a/apps/space/next.config.js +++ b/apps/space/next.config.js @@ -6,7 +6,6 @@ const nextConfig = { swcMinify: true, experimental: { outputFileTracingRoot: path.join(__dirname, "../../"), - appDir: true, }, output: "standalone", }; diff --git a/apps/space/package.json b/apps/space/package.json index 3bb064e79..80e6467f9 100644 --- a/apps/space/package.json +++ b/apps/space/package.json @@ -10,17 +10,11 @@ }, "dependencies": { "@headlessui/react": "^1.7.13", - "@types/node": "18.14.1", - "@types/nprogress": "^0.2.0", - "@types/react": "18.0.28", - "@types/react-dom": "18.0.11", "axios": "^1.3.4", - "eslint": "8.34.0", - "eslint-config-next": "13.2.1", "js-cookie": "^3.0.1", "mobx": "^6.10.0", "mobx-react-lite": "^4.0.3", - "next": "^13.4.16", + "next": "12.3.2", "next-theme": "^0.1.5", "nprogress": "^0.2.0", "react": "^18.2.0", @@ -31,8 +25,14 @@ "devDependencies": { "@tailwindcss/typography": "^0.5.9", "@types/js-cookie": "^3.0.3", + "@types/node": "18.14.1", + "@types/nprogress": "^0.2.0", + "@types/react": "18.0.28", + "@types/react-dom": "18.0.11", "@types/uuid": "^9.0.1", "autoprefixer": "^10.4.13", + "eslint": "8.34.0", + "eslint-config-next": "13.2.1", "postcss": "^8.4.21", "tailwindcss": "^3.2.7" } diff --git a/apps/space/app/[workspace_slug]/[project_slug]/page.tsx b/apps/space/pages/[workspace_slug]/[project_slug]/index.tsx similarity index 60% rename from apps/space/app/[workspace_slug]/[project_slug]/page.tsx rename to apps/space/pages/[workspace_slug]/[project_slug]/index.tsx index f27b6d16d..57a8b8770 100644 --- a/apps/space/app/[workspace_slug]/[project_slug]/page.tsx +++ b/apps/space/pages/[workspace_slug]/[project_slug]/index.tsx @@ -1,8 +1,5 @@ -"use client"; - import { useEffect, useState } from "react"; -// next imports -import { useRouter, useParams, useSearchParams } from "next/navigation"; +import { useRouter } from "next/router"; // mobx import { observer } from "mobx-react-lite"; // components @@ -17,26 +14,23 @@ import { RootStore } from "store/root"; import { useMobxStore } from "lib/mobx/store-provider"; // types import { TIssueBoardKeys } from "store/types"; +import ProjectLayout from "layouts/project-layout"; const WorkspaceProjectPage = () => { const store: RootStore = useMobxStore(); const router = useRouter(); - const routerParams = useParams(); - const routerSearchparams = useSearchParams(); const activeIssueId = store.issue.activePeekOverviewIssueId; - const { workspace_slug, project_slug } = routerParams as { workspace_slug: string; project_slug: string }; - const board = - routerSearchparams && - routerSearchparams.get("board") != null && - (routerSearchparams.get("board") as TIssueBoardKeys | ""); - - const states = routerSearchparams && routerSearchparams.get("states") != null && routerSearchparams.get("states"); - const labels = routerSearchparams && routerSearchparams.get("labels") != null && routerSearchparams.get("labels"); - const priorities = - routerSearchparams && routerSearchparams.get("priorities") != null && routerSearchparams.get("priorities"); + const { workspace_slug, project_slug, board, states, labels, priorities } = router.query as { + workspace_slug: string; + project_slug: string; + board: TIssueBoardKeys; + states: string[]; + labels: string[]; + priorities: string[]; + }; // updating default board view when we are in the issues page useEffect(() => { @@ -114,46 +108,48 @@ const WorkspaceProjectPage = () => { }, [workspace_slug, project_slug, store?.project, store?.issue, states, labels, priorities]); return ( -
- store.issue.setActivePeekOverviewIssueId(null)} - issue={store?.issue?.issues?.find((_issue) => _issue.id === activeIssueId) || null} - workspaceSlug={workspace_slug} - /> + +
+ store.issue.setActivePeekOverviewIssueId(null)} + issue={store?.issue?.issues?.find((_issue) => _issue.id === activeIssueId) || null} + workspaceSlug={workspace_slug} + /> - {store?.issue?.loader && !store.issue.issues ? ( -
Loading...
- ) : ( - <> - {store?.issue?.error ? ( -
- Something went wrong. -
- ) : ( - store?.issue?.currentIssueBoardView && ( - <> - {store?.issue?.currentIssueBoardView === "list" && ( -
-
- + {store?.issue?.loader && !store.issue.issues ? ( +
Loading...
+ ) : ( + <> + {store?.issue?.error ? ( +
+ Something went wrong. +
+ ) : ( + store?.issue?.currentIssueBoardView && ( + <> + {store?.issue?.currentIssueBoardView === "list" && ( +
+
+ +
-
- )} - {store?.issue?.currentIssueBoardView === "kanban" && ( -
- -
- )} - {store?.issue?.currentIssueBoardView === "calendar" && } - {store?.issue?.currentIssueBoardView === "spreadsheet" && } - {store?.issue?.currentIssueBoardView === "gantt" && } - - ) - )} - - )} -
+ )} + {store?.issue?.currentIssueBoardView === "kanban" && ( +
+ +
+ )} + {store?.issue?.currentIssueBoardView === "calendar" && } + {store?.issue?.currentIssueBoardView === "spreadsheet" && } + {store?.issue?.currentIssueBoardView === "gantt" && } + + ) + )} + + )} +
+ ); }; diff --git a/apps/space/app/[workspace_slug]/page.tsx b/apps/space/pages/[workspace_slug]/index.tsx similarity index 100% rename from apps/space/app/[workspace_slug]/page.tsx rename to apps/space/pages/[workspace_slug]/index.tsx diff --git a/apps/space/pages/_app.tsx b/apps/space/pages/_app.tsx index 8681006e1..bec0f9bba 100644 --- a/apps/space/pages/_app.tsx +++ b/apps/space/pages/_app.tsx @@ -1,10 +1,24 @@ +import type { AppProps } from "next/app"; +import { ThemeProvider } from "next-themes"; // styles import "styles/globals.css"; -// types -import type { AppProps } from "next/app"; +// contexts +import { ToastContextProvider } from "contexts/toast.context"; +// mobx store provider +import { MobxStoreProvider } from "lib/mobx/store-provider"; +import MobxStoreInit from "lib/mobx/store-init"; function MyApp({ Component, pageProps }: AppProps) { - return ; + return ( + + + + + + + + + ); } export default MyApp; diff --git a/apps/space/pages/_document.tsx b/apps/space/pages/_document.tsx index 8b41d05fc..91cf943a3 100644 --- a/apps/space/pages/_document.tsx +++ b/apps/space/pages/_document.tsx @@ -5,7 +5,7 @@ class MyDocument extends Document { return ( - +
diff --git a/apps/space/pages/index.tsx b/apps/space/pages/index.tsx new file mode 100644 index 000000000..ae93b1ba3 --- /dev/null +++ b/apps/space/pages/index.tsx @@ -0,0 +1,7 @@ +import React from "react"; + +const HomePage = () => ( +
Plane Deploy
+); + +export default HomePage; diff --git a/apps/space/app/onboarding/page.tsx b/apps/space/pages/onboarding/index.tsx similarity index 91% rename from apps/space/app/onboarding/page.tsx rename to apps/space/pages/onboarding/index.tsx index feca1b8f5..b77639db0 100644 --- a/apps/space/app/onboarding/page.tsx +++ b/apps/space/pages/onboarding/index.tsx @@ -1,28 +1,19 @@ -"use client"; - import React, { useEffect } from "react"; - -// next import Image from "next/image"; - // assets import BluePlaneLogoWithoutText from "public/plane-logos/blue-without-text.png"; import BlackHorizontalLogo from "public/plane-logos/black-horizontal-with-blue-logo.svg"; - // mobx import { observer } from "mobx-react-lite"; import { useMobxStore } from "lib/mobx/store-provider"; - // services import authenticationService from "services/authentication.service"; - // hooks import useToast from "hooks/use-toast"; - // components -import { UserDetails } from "./components/user-details"; +import { OnBoardingForm } from "components/accounts/onboarding-form"; -const HomePage = () => { +const OnBoardingPage = () => { const { user: userStore } = useMobxStore(); const user = userStore?.currentUser; @@ -52,11 +43,11 @@ const HomePage = () => {
- +
); }; -export default observer(HomePage); +export default observer(OnBoardingPage); diff --git a/apps/space/app/project-not-published/page.tsx b/apps/space/pages/project-not-published/index.tsx similarity index 100% rename from apps/space/app/project-not-published/page.tsx rename to apps/space/pages/project-not-published/index.tsx diff --git a/apps/space/store/user.ts b/apps/space/store/user.ts index 916ad3521..5b0e22ae8 100644 --- a/apps/space/store/user.ts +++ b/apps/space/store/user.ts @@ -1,5 +1,3 @@ -import { redirect } from "next/navigation"; - // mobx import { observable, action, computed, makeObservable, runInAction } from "mobx"; // service