fix: authorize editor (#2122)

This commit is contained in:
Dakshesh Jain 2023-09-11 12:24:46 +05:30 committed by GitHub
parent 8de93d0081
commit 7842c4b2ea
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 107 additions and 2 deletions

View File

@ -15,6 +15,7 @@ import { Spinner } from "components/ui";
type Props = {
children: React.ReactNode;
fullScreen?: boolean;
};
const getIfInWebview = (userAgent: NavigatorID["userAgent"]) => {
@ -30,7 +31,7 @@ const useMobileDetect = () => {
return getIfInWebview(userAgent);
};
const WebViewLayout: React.FC<Props> = ({ children }) => {
const WebViewLayout: React.FC<Props> = ({ children, fullScreen = true }) => {
const { data: currentUser, error } = useSWR(CURRENT_USER, () => userService.currentUser());
const isWebview = useMobileDetect();
@ -47,7 +48,7 @@ const WebViewLayout: React.FC<Props> = ({ children }) => {
}
return (
<div className="h-screen w-full bg-custom-background-100">
<div className={fullScreen ? "h-screen w-full bg-custom-background-100" : ""}>
{error || !isWebview ? (
<div className="flex flex-col items-center justify-center gap-y-3 h-full text-center text-custom-text-200">
<AlertCircle size={64} />

View File

@ -0,0 +1,104 @@
import { useEffect, useState } from "react";
// next
import type { NextPage } from "next";
import { useRouter } from "next/router";
// cookies
import Cookies from "js-cookie";
// react-hook-form
import { Controller, useForm } from "react-hook-form";
// layouts
import WebViewLayout from "layouts/web-view-layout";
// components
import { TipTapEditor } from "components/tiptap";
import { PrimaryButton, Spinner } from "components/ui";
const Editor: NextPage = () => {
const [isLoading, setIsLoading] = useState(false);
const router = useRouter();
const { workspaceSlug, editable } = router.query;
const isEditable = editable === "true";
const {
watch,
setValue,
control,
formState: { errors },
} = useForm({
defaultValues: {
data: "",
data_html: "",
},
});
useEffect(() => {
setIsLoading(true);
if (!isEditable) return;
setIsLoading(false);
const data_html = Cookies.get("data_html");
setValue("data_html", data_html ?? "");
}, [isEditable, setValue]);
return (
<WebViewLayout fullScreen={isLoading}>
{isLoading ? (
<div className="w-full h-full flex items-center justify-center">
<Spinner />
</div>
) : (
<>
<Controller
name="data_html"
control={control}
render={({ field: { value, onChange } }) => (
<TipTapEditor
borderOnFocus={false}
value={
!value ||
value === "" ||
(typeof value === "object" && Object.keys(value).length === 0)
? watch("data_html")
: value
}
editable={isEditable}
noBorder={true}
workspaceSlug={workspaceSlug?.toString() ?? ""}
debouncedUpdatesEnabled={true}
customClassName="min-h-[150px] shadow-sm"
editorContentCustomClassNames="pb-9"
onChange={(description: Object, description_html: string) => {
onChange(description_html);
setValue("data_html", description_html);
setValue("data", JSON.stringify(description));
}}
/>
)}
/>
{isEditable && (
<PrimaryButton
className="mt-4 w-[calc(100%-30px)] h-[45px] mx-[15px] text-[17px]"
onClick={() => {
console.log(
"submitted",
JSON.stringify({
data_html: watch("data_html"),
})
);
}}
>
Submit
</PrimaryButton>
)}
</>
)}
</WebViewLayout>
);
};
export default Editor;