gofnnp/w-aura
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: breath page, onboarding compatibility, create profile items size, home page

Browse Source
This commit is contained in:
gofnnp 2023-10-11 01:44:21 +04:00
parent a27b79e0eb
commit 7ce001cc8f
8 changed files with 134 additions and 68 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
src/components/BreathPage/index.tsx
View File

@ -40,7 +40,7 @@ function BreathPage({ leoApng }: BreathPageProps): JSX.Element {
const navigateTimeOut = setTimeout(() => {
navigate(routes.client.breathResult());
}, 60_000);
}, 50_000);
return () => {
clearTimeout(navigateTimeOut);
@ -106,26 +106,7 @@ function BreathPage({ leoApng }: BreathPageProps): JSX.Element {
useApiCall<UserCallbacks.IUserCallbacks>(createCallback);
const handleCross = () => {
if (homeConfig.pathFromHome === EPathsFromHome.compatibility) {
dispatch(
actions.siteConfig.update({
home: {
pathFromHome: EPathsFromHome.compatibility,
isShowNavbar: true,
},
})
);
return navigate(routes.client.home());
}
if (homeConfig.pathFromHome === EPathsFromHome.breath) {
dispatch(
actions.siteConfig.update({
home: { pathFromHome: EPathsFromHome.breath, isShowNavbar: false },
})
);
return navigate(routes.client.compatibility());
}
return navigate(routes.client.home());
navigate(routes.client.breathResult());
};
return (

131
src/components/Compatibility/index.tsx
View File

@ -26,24 +26,29 @@ function CompatibilityPage(): JSX.Element {
const { t, i18n } = useTranslation();
const navigate = useNavigate();
const dispatch = useDispatch();
const [isDisabled, setIsDisabled] = useState(true);
const [isDisabledName, setIsDisabledName] = useState(true);
const [isDisabledDate, setIsDisabledDate] = useState(true);
const [isChangeDate, setIsChangeDate] = useState(false);
const [currentOnboarding, setCurrentOnboarding] = useState(0);
const [name, setName] = useState<string>("");
const [selectedDate, setSelectedDate] = useState<string | IDate>("");
const [compatCategory, setCompatCategory] = useState(1);
const homeConfig = useSelector(selectors.selectHome);
const showNavbarFooter = homeConfig.isShowNavbar;
const birthdate = useSelector(selectors.selectBirthdate);
const onboardingCompatibility = useSelector(
selectors.selectOnboardingCompatibility
);
const [isDisabled, setIsDisabled] = useState(true);
const [isDisabledName, setIsDisabledName] = useState(true);
const [isDisabledSelfName, setIsDisabledSelfName] = useState(true);
isDisabledSelfName;
const [isDisabledDate, setIsDisabledDate] = useState(true);
const [isChangeDate, setIsChangeDate] = useState(false);
const [currentOnboarding, setCurrentOnboarding] = useState(0);
const [name, setName] = useState<string>("");
const [selfName, setSelfName] = useState<string>("");
const [selectedDate, setSelectedDate] = useState<string | IDate>("");
const [compatCategory, setCompatCategory] = useState(1);
const zodiacSign = getZodiacSignByDate(birthdate);
const [asset, setAsset] = useState<Asset>();
const api = useApi();
const inputRef = useRef<HTMLInputElement>(null);
const inputSelfNameRef = useRef<HTMLInputElement>(null);
const inputNameRef = useRef<HTMLInputElement>(null);
const dateRef = useRef<HTMLInputElement>(null);
const categoriesRef = useRef<HTMLInputElement>(null);
const mainButtonRef = useRef<HTMLInputElement>(null);
@ -123,6 +128,14 @@ function CompatibilityPage(): JSX.Element {
}, [api, locale]);
const { data } = useApiCall<AICompatCategories.CompatCategory[]>(loadData);
const handleValidSelfName = (name: string) => {
console.log(name);
setIsDisabledSelfName(!name.length);
setSelfName(name);
checkAllDisabled();
};
const handleValidName = (name: string) => {
setIsDisabledName(!name.length);
setName(name);
@ -137,6 +150,7 @@ function CompatibilityPage(): JSX.Element {
};
const checkAllDisabled = () => {
// isDisabledSelfName
setIsDisabled(isDisabledName || isDisabledDate);
};
@ -144,10 +158,9 @@ function CompatibilityPage(): JSX.Element {
setCompatCategory(parseInt(event.target.value));
};
const handleNameOnboarding = () => {
if (!name.length) return;
setCurrentOnboarding(1);
dateRef.current?.scrollIntoView({ behavior: "smooth" });
const scrollToElementOnboarding = (nextOnboarding: number, ref: HTMLElement | null) => {
setCurrentOnboarding(nextOnboarding);
ref?.scrollIntoView({ behavior: "smooth" });
};
return (
@ -166,33 +179,81 @@ function CompatibilityPage(): JSX.Element {
{t("compatibility")}
</Title> */}
<div className={styles.content}>
<Title variant="h2" className={styles.iam}>
{t("iAm")}
</Title>
{onboardingCompatibility && (
<Title variant="h2" className={styles.iam}>
{t("iAm")}
</Title>
)}
{!onboardingCompatibility && (
<div
className={styles["input-container__name-container"]}
style={{ zIndex: currentOnboarding === 0 ? 100 : 1 }}
ref={inputSelfNameRef}
>
<NameInput
name="selfName"
value={selfName}
placeholder={t("au.name.my_name")}
onKeyDown={(e) => {
if (!selfName.length) return;
if (e.key === "Enter") {
(e.target as HTMLInputElement).blur();
}
}}
onValid={handleValidSelfName}
onInvalid={() => setIsDisabledSelfName(true)}
onBlur={() => {
if (!selfName.length) return;
setCurrentOnboarding(1);
inputNameRef.current?.scrollIntoView({ behavior: "smooth" });
}}
/>
</div>
)}
<Title variant="h3" className={styles.plus}>
+
</Title>
<div className={styles["inputs-container"]}>
{!onboardingCompatibility?.isShown && (
{!onboardingCompatibility && (
<>
{currentOnboarding === 0 && (
<Onboarding
targetRef={inputRef.current as HTMLDivElement}
targetRef={inputSelfNameRef.current as HTMLDivElement}
isShow={currentOnboarding === 0}
direction={EDirectionOnboarding.BOTTOM}
showBackground={true}
>
<TextWithFinger
text={t("au.onboarding.my_name")}
direction={EDirectionOnboarding.BOTTOM}
crossClickHandler={() => {
if (!selfName.length) return;
scrollToElementOnboarding(1, inputNameRef.current);
}}
/>
</Onboarding>
)}
{currentOnboarding === 1 && (
<Onboarding
targetRef={inputNameRef.current as HTMLDivElement}
isShow={currentOnboarding === 1}
direction={EDirectionOnboarding.BOTTOM}
showBackground={true}
>
<TextWithFinger
text={t("au.web_onbording.name")}
direction={EDirectionOnboarding.BOTTOM}
crossClickHandler={handleNameOnboarding}
crossClickHandler={() => {
if (!name.length) return;
scrollToElementOnboarding(2, dateRef.current);
}}
/>
</Onboarding>
)}
{currentOnboarding === 1 && (
{currentOnboarding === 2 && (
<Onboarding
targetRef={dateRef.current as HTMLDivElement}
isShow={currentOnboarding === 1}
isShow={currentOnboarding === 2}
direction={EDirectionOnboarding.BOTTOM}
showBackground={true}
>
@ -200,7 +261,7 @@ function CompatibilityPage(): JSX.Element {
<button
className={styles["compatibility-onboarding__button"]}
disabled={!isChangeDate}
onClick={() => setCurrentOnboarding(2)}
onClick={() => setCurrentOnboarding(3)}
>
Done
</button>
@ -212,10 +273,10 @@ function CompatibilityPage(): JSX.Element {
</>
</Onboarding>
)}
{currentOnboarding === 3 && (
{currentOnboarding === 4 && (
<Onboarding
targetRef={mainButtonRef.current as HTMLDivElement}
isShow={currentOnboarding === 3}
isShow={currentOnboarding === 4}
direction={EDirectionOnboarding.TOP}
showBackground={true}
>
@ -230,13 +291,13 @@ function CompatibilityPage(): JSX.Element {
)}
<div
className={styles["input-container__name-container"]}
style={{ zIndex: currentOnboarding === 0 ? 99 : 1 }}
ref={inputRef}
style={{ zIndex: currentOnboarding === 1 ? 99 : 1 }}
ref={inputNameRef}
>
<NameInput
name="name"
value={name}
placeholder={t("name")}
placeholder={t("au.name.person")}
onKeyDown={(e) => {
if (!name.length) return;
if (e.key === "Enter") {
@ -247,23 +308,23 @@ function CompatibilityPage(): JSX.Element {
onInvalid={() => setIsDisabledName(true)}
onBlur={() => {
if (!name.length) return;
setCurrentOnboarding(1);
setCurrentOnboarding(2);
dateRef.current?.scrollIntoView({ behavior: "smooth" });
}}
/>
</div>
<div
className={styles["input-container__date-container"]}
style={{ zIndex: currentOnboarding === 1 ? 99 : 1 }}
style={{ zIndex: currentOnboarding === 2 ? 99 : 1 }}
ref={dateRef}
>
<DatePicker onDateChange={handleValidDate} />
</div>
</div>
{currentOnboarding === 2 && !onboardingCompatibility?.isShown && (
{currentOnboarding === 3 && !onboardingCompatibility && (
<Onboarding
targetRef={categoriesRef.current as HTMLDivElement}
isShow={currentOnboarding === 2}
isShow={currentOnboarding === 3}
direction={EDirectionOnboarding.TOP}
showBackground={true}
>
@ -271,21 +332,21 @@ function CompatibilityPage(): JSX.Element {
text={t("au.web_onbording.category")}
direction={EDirectionOnboarding.TOP}
showCross={true}
crossClickHandler={() => setCurrentOnboarding(3)}
crossClickHandler={() => setCurrentOnboarding(4)}
/>
</Onboarding>
)}
{data && data.length && (
<div
className={styles["compatibility-categories"]}
style={{ zIndex: currentOnboarding === 2 ? 99 : 1 }}
style={{ zIndex: currentOnboarding === 3 ? 99 : 1 }}
ref={categoriesRef}
>
{data.map((item, index) => (
<div
className="compatibility-categories__item"
key={index}
onClick={() => setCurrentOnboarding(3)}
onClick={() => setCurrentOnboarding(4)}
>
<input
className={`${styles["compatibility-categories__input"]} ${
@ -308,7 +369,7 @@ function CompatibilityPage(): JSX.Element {
<div
style={{
position: "relative",
zIndex: currentOnboarding === 3 ? 99 : 1,
zIndex: currentOnboarding === 4 ? 99 : 1,
}}
ref={mainButtonRef}
>

24
src/components/CreateProfilePage/ProcessFlow.tsx
View File

@ -1,4 +1,4 @@
import { useEffect, useState } from 'react'
import { useEffect, useRef, useState } from 'react'
import ProcessItem from "./ProcessItem"
import styles from './styles.module.css'
@ -32,15 +32,28 @@ const getMultiplier = (currentIdx: number, length: number): number => {
return Math.max(length - (currentIdx + 1) - 1, 0)
}
const calculateTop = (currentIdx: number, length: number): number => {
const itemHeight = 63
return getMultiplier(currentIdx, length) * itemHeight
const calculateTop = (currentIdx: number, length: number, items: HTMLDivElement[]): number => {
return items.slice(currentIdx + 2).reduce((accumulator, item) => {
if (!item) return accumulator;
return accumulator + item.clientHeight
}, 1) + 8 * getMultiplier(currentIdx, length)
// const itemHeight = 63
// return getMultiplier(currentIdx, length) * itemHeight1?.clientHeight
}
function ProcessFlow({ items, onDone }: ProcessFlowProps): JSX.Element {
const [status, setStatus] = useState(ProcessStatus.Idle)
const [doneTaskIdx, setDoneTaskIdx] = useState(-1)
const itemsRef = useRef([] as HTMLDivElement[]);
const tasks = items.map(({ task }) => task)
const [rerender, setRerender] = useState(false);
rerender
useEffect(() => {
setRerender((prev) => !prev);
}, [itemsRef])
useEffect(() => {
if (status !== ProcessStatus.Idle) return
@ -54,8 +67,9 @@ function ProcessFlow({ items, onDone }: ProcessFlowProps): JSX.Element {
return <ProcessItem
key={idx}
label={label}
top={calculateTop(doneTaskIdx, items.length)}
top={calculateTop(doneTaskIdx, items.length, itemsRef.current)}
isDone={idx <= doneTaskIdx}
refItem={(el) => (itemsRef.current[idx] = el as HTMLDivElement)}
/>
}
return (

6
src/components/CreateProfilePage/ProcessItem.tsx
View File

@ -1,3 +1,4 @@
import { LegacyRef } from "react"
import Loader, { LoaderColor } from "../Loader"
import styles from "./styles.module.css"
@ -5,12 +6,13 @@ type ProcessItemProps = {
top: number
label: string
isDone: boolean
refItem: LegacyRef<HTMLDivElement>
}
function ProcessItem({ top, label, isDone }: ProcessItemProps): JSX.Element {
function ProcessItem({ top, label, isDone, refItem }: ProcessItemProps): JSX.Element {
return (
<div className={styles['process-item']} style={{ top: top }}>
<div ref={refItem} className={styles['process-item']} style={{ top: top }}>
<div className={styles['process-item__pick']}>
{
isDone

4
src/components/CreateProfilePage/styles.module.css
View File

@ -43,9 +43,9 @@
.process-item {
display: flex;
font-size: 24px;
font-size: 20px;
font-weight: 400;
margin-bottom: 24px;
margin-bottom: 8px;
line-height: 32px;
position: relative;
transition: top 0.4s ease-in-out;

3
src/components/HomePage/index.tsx
View File

@ -202,7 +202,8 @@ function HomePage(): JSX.Element {
variant="h3"
className={styles["content__daily-forecast-title"]}
>
{forecast.category}
{/* {forecast.category} */}
{t("aura.personal_aura.button")}
</Title>
<p className={styles["content__daily-forecast-body"]}>
{forecast.body}

8
src/store/compatibility.ts
View File

@ -5,6 +5,7 @@ import type { PayloadAction } from "@reduxjs/toolkit";
interface ICompatibility {
rightUser: IUser;
categoryId: number;
selfName: string;
}
interface IUser {
@ -18,6 +19,7 @@ const initialState: ICompatibility = {
birthDate: "",
},
categoryId: 1,
selfName: "I am",
};
const compatibilitySlice = createSlice({
@ -25,7 +27,7 @@ const compatibilitySlice = createSlice({
initialState,
reducers: {
update(state, action: PayloadAction<Partial<ICompatibility>>) {
return { ...state, ...action.payload };
return { ...initialState, ...state, ...action.payload };
},
},
extraReducers: (builder) => builder.addCase("reset", () => initialState),
@ -40,4 +42,8 @@ export const selectCategoryId = createSelector(
(state: { compatibility: ICompatibility }) => state.compatibility.categoryId,
(compatibility) => compatibility
);
export const selectSelfName = createSelector(
(state: { compatibility: ICompatibility }) => state.compatibility.selfName,
(compatibility) => compatibility
);
export default compatibilitySlice.reducer;

3
src/store/index.ts
View File

@ -32,7 +32,7 @@ import subscriptionPlans, {
} from "./subscriptionPlan";
import status, { actions as userStatusActions, selectStatus } from "./status";
import compatibility, {
actions as compatibilityActions,
actions as compatibilityActions, selectSelfName,
} from "./compatibility";
import userCallbacks, {
actions as userCallbacksActions,
@ -68,6 +68,7 @@ export const selectors = {
selectPlanById,
selectAuraCoordinates,
selectRightUser,
selectSelfName,
selectCategoryId,
selectSelectedPrice,
selectUserCallbacksDescription,