ColdBreeze/ColdBreeze-chat-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: onboarding

Browse Source
This commit is contained in:
Tristan Yang
2022-12-12 10:13:52 +08:00
parent 4059a67c1b
commit 0e0dec9c9e
11 changed files with 151 additions and 211 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/routes/onboarding/index.tsx
+21 -44
View File
@@ -1,41 +1,37 @@
import React, { FC } from "react";
import React, { useState } from "react";
import { Helmet } from "react-helmet";
import { Swiper, SwiperSlide } from "swiper/react";
import "swiper/css";
import { useWizard, Wizard } from 'react-use-wizard';
import WelcomePage from "./steps/welcomePage";
import ServerName from "./steps/serverName";
import AdminAccount from "./steps/adminAccount";
import WhoCanSignUp from "./steps/whoCanSignUp";
import InviteLink from "./steps/inviteLink";
import DonePage from "./steps/donePage";
import useServerSetup, { steps } from "./useServerSetup";
import steps from "./steps";
import StyledOnboardingPage from "./styled";
import { useTranslation } from "react-i18next";
interface Props {
step: string;
setStep: (step: string) => void;
}
const Navigator: FC<Props> = ({ step, setStep }) => {
const index = steps.map((value) => value.name).indexOf(step);
const canJumpTo = steps.find((value) => value.name === step)?.canJumpTo || [];
const Navigator = () => {
const { activeStep, goToStep } = useWizard();
const canJumpTo = steps[activeStep]?.canJumpTo || [];
console.log("active step", activeStep);
return (
<div className="navigator">
{steps.map((stepToRender, indexToRender) => {
const clickable = canJumpTo.includes(stepToRender.name);
const nodeCls = `node ${indexToRender === index ? "emphasized" : ""} ${indexToRender > index ? "disabled" : ""
const nodeCls = `node ${indexToRender === activeStep ? "emphasized" : ""} ${indexToRender > activeStep ? "disabled" : ""
} ${clickable ? "clickable" : ""}`;
const arrowCls = `arrow ${indexToRender >= index ? "disabled" : ""}`;
const arrowCls = `arrow ${indexToRender >= activeStep ? "disabled" : ""}`;
return (
<React.Fragment key={indexToRender}>
<span
className={nodeCls}
onClick={() => {
if (clickable) {
setStep(stepToRender.name);
goToStep(indexToRender);
}
}}
>
@@ -51,41 +47,22 @@ const Navigator: FC<Props> = ({ step, setStep }) => {
export default function OnboardingPage() {
const { t } = useTranslation("welcome");
const serverSetup = useServerSetup();
const [serverName, setServerName] = useState("");
return (
<>
<Helmet>
<title>{t("onboarding.title")}</title>
</Helmet>
<StyledOnboardingPage>
<Navigator {...serverSetup} />
<Swiper
spaceBetween={50}
allowTouchMove={false}
onSwiper={(swiper) => serverSetup.setSwiper(swiper)}
>
<SwiperSlide>
<WelcomePage {...serverSetup} />
</SwiperSlide>
<SwiperSlide>
<ServerName {...serverSetup} />
</SwiperSlide>
<SwiperSlide>
<AdminAccount {...serverSetup} />
</SwiperSlide>
<SwiperSlide>
<WhoCanSignUp {...serverSetup} />
</SwiperSlide>
<SwiperSlide>
{/* lazy call invite link API */}
{({ isActive }) => {
return isActive ? <InviteLink {...serverSetup} /> : null;
}}
</SwiperSlide>
<SwiperSlide>
<DonePage {...serverSetup} />
</SwiperSlide>
</Swiper>
<Wizard header={<Navigator />}>
<WelcomePage />
<ServerName serverName={serverName} setServerName={setServerName} />
<AdminAccount serverName={serverName} />
<WhoCanSignUp />
{/* lazy call invite link API */}
<InviteLink />
<DonePage serverName={serverName} />
</Wizard>
</StyledOnboardingPage>
</>
);
src/routes/onboarding/steps.ts
+40
View File
@@ -0,0 +1,40 @@
// import { useState } from "react";
import { t } from 'i18next';
// `name` for in-code usage, `label` for display
export interface Step {
name: string;
label: string;
canJumpTo?: string[];
}
const steps: Step[] = [
{
name: "welcomePage",
label: t("welcome:onboarding.welcome_page")
},
{
name: "serverName",
label: t("welcome:onboarding.set_name")
},
{
name: "adminAccount",
label: t("welcome:onboarding.admin_account")
},
{
name: "whoCanSignUp",
label: t("welcome:onboarding.who_sign_up")
},
{
name: "inviteLink",
label: t("welcome:onboarding.invites"),
canJumpTo: ["whoCanSignUp"]
},
{
name: "donePage",
label: t("welcome:onboarding.done"),
canJumpTo: ["whoCanSignUp", "inviteLink"]
}
];
export default steps;
src/routes/onboarding/steps/adminAccount.tsx
+50 -51
View File
@@ -1,4 +1,4 @@
import { useEffect, useState, FC } from "react";
import { useEffect, useState, FC, useRef } from "react";
import styled from "styled-components";
import toast from "react-hot-toast";
import { useDispatch } from "react-redux";
@@ -13,6 +13,7 @@ import { useLoginMutation } from "../../../app/services/auth";
import { updateInitialized } from "../../../app/slices/auth.data";
import { useAppSelector } from "../../../app/store";
import { useTranslation } from "react-i18next";
import { useWizard } from "react-use-wizard";
const StyledWrapper = styled.div`
height: 100%;
@@ -36,7 +37,9 @@ const StyledWrapper = styled.div`
margin-bottom: 24px;
}
> .input {
form {
> .input {
margin-bottom: 20px;
width: 360px;
height: 44px;
font-weight: 400;
@@ -46,18 +49,13 @@ const StyledWrapper = styled.div`
border: 1px solid #d0d5dd;
border-radius: 8px;
box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05);
> .inner {
padding: 0;
font-weight: 400;
font-size: 16px;
line-height: 24px;
}
&:not(:nth-last-child(2)) {
margin-bottom: 20px;
}
}
}}
> .button {
width: 360px;
@@ -66,13 +64,13 @@ const StyledWrapper = styled.div`
`;
type Props = {
serverName: string;
nextStep: () => void;
};
const AdminAccount: FC<Props> = ({ serverName, nextStep }) => {
const AdminAccount: FC<Props> = ({ serverName }) => {
const { t } = useTranslation("welcome", { keyPrefix: "onboarding" });
const { nextStep } = useWizard();
const formRef = useRef<HTMLFormElement | undefined>();
const loggedIn = useAppSelector((store) => !!store.authData.token);
const dispatch = useDispatch();
const [createAdmin, { isLoading: isSigningUp, isError: signUpError, isSuccess: signUpOk }] = useCreateAdminMutation();
const [login, { isLoading: isLoggingIn, isError: loginError, }] = useLoginMutation();
const { data: serverData } = useGetServerQuery();
@@ -127,50 +125,51 @@ const AdminAccount: FC<Props> = ({ serverName, nextStep }) => {
<StyledWrapper>
<span className="primaryText">{t("admin_title")}</span>
<span className="secondaryText">{t("admin_desc")}</span>
<StyledInput
className="input"
placeholder="Enter your email"
value={email}
onChange={(e) => setEmail(e.target.value)}
/>
<StyledInput
className="input"
type="password"
placeholder="Enter your password"
value={password}
onChange={(e) => setPassword(e.target.value)}
/>
<StyledInput
className="input"
type="password"
placeholder="Confirm your password"
value={confirm}
onChange={(e) => setConfirm(e.target.value)}
/>
<form ref={formRef} action="/">
<StyledInput
className="input"
placeholder="Enter your email"
type={"email"}
required
value={email}
onChange={(e) => setEmail(e.target.value)}
/>
<StyledInput
className="input"
type="password"
required
minLength={6}
placeholder="Enter your password"
value={password}
onChange={(e) => setPassword(e.target.value)}
/>
<StyledInput
className="input"
type="password"
required
minLength={6}
placeholder="Confirm your password"
value={confirm}
onChange={(e) => setConfirm(e.target.value)}
/>
</form>
<StyledButton
className="button"
onClick={async () => {
// Verification for admin credentials
if (email === "") {
toast.error("Please enter admin email!");
return;
} else if (password === "") {
toast.error("Please enter admin password!");
return;
} else if (password.length < 6) {
toast.error("Password length greater than 6!");
return;
} else if (password !== confirm) {
toast.error("Two passwords do not match!");
return;
const formEle = formRef?.current;
if (formEle) {
if (!formEle.checkValidity()) {
formEle.reportValidity();
return;
}
// nextStep();
createAdmin({
email,
name: "Admin",
password,
gender: 0
});
}
createAdmin({
email,
name: "Admin",
password,
gender: 0
});
}}
>
{!(isSigningUp || isLoggingIn || isUpdatingServer) ? t("sign") : "..."}
src/routes/onboarding/steps/inviteLink.tsx
+3 -2
View File
@@ -3,6 +3,7 @@ import StyledInput from "../../../common/component/styled/Input";
import StyledButton from "../../../common/component/styled/Button";
import useInviteLink from "../../../common/hook/useInviteLink";
import { useTranslation } from "react-i18next";
import { useWizard } from "react-use-wizard";
const StyledWrapper = styled.div`
height: 100%;
@@ -73,10 +74,10 @@ const StyledWrapper = styled.div`
margin-top: 24px;
}
`;
export default function InviteLink({ nextStep }: { nextStep: () => void }) {
export default function InviteLink() {
const { t } = useTranslation("welcome", { keyPrefix: "onboarding" });
const { t: ct } = useTranslation();
const { nextStep } = useWizard();
const { link, linkCopied, copyLink } = useInviteLink();
return (
<StyledWrapper>
src/routes/onboarding/steps/serverName.tsx
+3 -2
View File
@@ -4,6 +4,7 @@ import toast from "react-hot-toast";
import StyledInput from "../../../common/component/styled/Input";
import StyledButton from "../../../common/component/styled/Button";
import { useTranslation } from "react-i18next";
import { useWizard } from "react-use-wizard";
const StyledWrapper = styled.div`
height: 100%;
@@ -49,10 +50,10 @@ const StyledWrapper = styled.div`
type Props = {
serverName: string;
setServerName: (name: string) => void;
nextStep: () => void;
};
const ServerName: FC<Props> = ({ serverName, setServerName, nextStep }) => {
const ServerName: FC<Props> = ({ serverName, setServerName }) => {
const { t } = useTranslation("welcome", { keyPrefix: "onboarding" });
const { nextStep } = useWizard();
return (
<StyledWrapper>
<span className="primaryText">{t("new_server")}</span>
src/routes/onboarding/steps/welcomePage.tsx
+4 -1
View File
@@ -1,7 +1,9 @@
import styled from "styled-components";
import StyledButton from "../../../common/component/styled/Button";
import PlayIcon from "../../../assets/icons/play.svg?url";
import { useTranslation } from "react-i18next";
import { useWizard } from "react-use-wizard";
const StyledWrapper = styled.div`
height: 100%;
@@ -44,8 +46,9 @@ const StyledWrapper = styled.div`
}
`;
export default function WelcomePage({ nextStep }: { nextStep: () => void }) {
export default function WelcomePage() {
const { t } = useTranslation("welcome", { keyPrefix: "onboarding" });
const { nextStep } = useWizard();
return (
<StyledWrapper>
<span className="primaryText">{t("welcome")}</span>
src/routes/onboarding/steps/whoCanSignUp.tsx
+23 -9
View File
@@ -6,6 +6,7 @@ import StyledButton from "../../../common/component/styled/Button";
import { useGetLoginConfigQuery, useUpdateLoginConfigMutation } from "../../../app/services/server";
import { WhoCanSignUp } from "../../../types/server";
import { useTranslation } from "react-i18next";
import { useWizard } from "react-use-wizard";
const StyledWrapper = styled.div`
height: 100%;
@@ -40,16 +41,23 @@ const StyledWrapper = styled.div`
}
`;
export default function SignUpSetting({ nextStep }: { nextStep: () => void }) {
export default function SignUpSetting() {
const { t } = useTranslation("welcome");
const { data: loginConfig } = useGetLoginConfigQuery();
const { t: st } = useTranslation("setting");
const { nextStep } = useWizard();
const { data: loginConfig, refetch } = useGetLoginConfigQuery();
const [updateLoginConfig, { isSuccess, error }] = useUpdateLoginConfigMutation();
const [value, setValue] = useState<WhoCanSignUp>();
useEffect(() => {
refetch();
}, []);
// Sync to `value` when `loginConfig` is fetched
useEffect(() => {
if (loginConfig) {
console.log("login config", loginConfig.who_can_sign_up);
setValue(loginConfig.who_can_sign_up);
}
}, [loginConfig]);
@@ -69,21 +77,27 @@ export default function SignUpSetting({ nextStep }: { nextStep: () => void }) {
<StyledWrapper>
<span className="primaryText">{t("onboarding.invite_title")}</span>
<span className="secondaryText">{t("onboarding.invite_desc")}</span>
<StyledRadio
options={[t("overview.sign_up.everyone", { ns: "setting" }), t("overview.sign_up.invite", { ns: "setting" })]}
{value && <StyledRadio
options={[st("overview.sign_up.everyone"), st("overview.sign_up.invite")]}
values={["EveryOne", "InvitationOnly"]}
value={value}
onChange={setValue}
/>
/>}
<StyledButton
className="button"
disabled={!value}
onClick={() => {
// nextStep();
if (loginConfig !== undefined) {
updateLoginConfig({
...loginConfig,
who_can_sign_up: value
});
if (loginConfig.who_can_sign_up !== value) {
updateLoginConfig({
...loginConfig,
who_can_sign_up: value
});
} else {
nextStep();
}
}
}}
>
src/routes/onboarding/styled.tsx
-5
View File
@@ -3,7 +3,6 @@ import styled from "styled-components";
const StyledOnboardingPage = styled.div`
height: 100vh;
overflow-y: auto;
> .navigator {
position: absolute;
top: 20px;
@@ -39,10 +38,6 @@ const StyledOnboardingPage = styled.div`
}
}
}
> .swiper {
height: 100%;
}
`;
export default StyledOnboardingPage;
src/routes/onboarding/useServerSetup.ts
-75
View File
@@ -1,75 +0,0 @@
import { useCallback, useState } from "react";
import { Swiper } from "swiper/types";
import { t } from 'i18next';
// `name` for in-code usage, `label` for display
export interface Step {
name: string;
label: string;
canJumpTo?: string[];
}
const steps: Step[] = [
{
name: "welcomePage",
label: t("welcome:onboarding.welcome_page")
},
{
name: "serverName",
label: t("welcome:onboarding.set_name")
},
{
name: "adminAccount",
label: t("welcome:onboarding.admin_account")
},
{
name: "whoCanSignUp",
label: t("welcome:onboarding.who_sign_up")
},
{
name: "inviteLink",
label: t("welcome:onboarding.invites"),
canJumpTo: ["whoCanSignUp"]
},
{
name: "donePage",
label: t("welcome:onboarding.done"),
canJumpTo: ["whoCanSignUp", "inviteLink"]
}
];
export default function useServerSetup() {
const [swiper, setSwiper] = useState<Swiper | null>(null);
const [index, setIndex] = useState<number>(0);
const step = steps[index].name;
const setStep = useCallback(
(name: string) => {
const newIndex = steps.map((step) => step.name).indexOf(name);
setIndex(newIndex);
if (swiper !== null) {
swiper.slideTo(newIndex);
}
},
[swiper]
);
const nextStep = useCallback(() => {
setIndex((prev) => prev + 1);
if (swiper !== null) {
swiper.slideNext(500);
}
}, [swiper]);
const [serverName, setServerName] = useState("");
return {
swiper,
setSwiper,
step,
setStep,
nextStep,
serverName,
setServerName
};
}
export { steps };