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

fix: fix error store and edits

Browse Source
This commit is contained in:
gofnnp 2023-10-06 21:20:21 +04:00
parent 844d5d1295
commit a27b79e0eb
12 changed files with 132 additions and 96 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
package-lock.json generated
View File

@ -33,7 +33,7 @@
"@vitejs/plugin-react": "^4.0.0",
"eslint": "^8.41.0",
"eslint-plugin-react-hooks": "^4.6.0",
"eslint-plugin-react-refresh": "^0.4.1",
"eslint-plugin-react-refresh": "^0.4.3",
"typescript": "^5.0.4",
"vite": "^4.3.8"
}
@ -1756,9 +1756,9 @@
}
},
"node_modules/eslint-plugin-react-refresh": {
"version": "0.4.1",
"resolved": "https://registry.npmjs.org/eslint-plugin-react-refresh/-/eslint-plugin-react-refresh-0.4.1.tgz",
"integrity": "sha512-QgrvtRJkmV+m4w953LS146+6RwEe5waouubFVNLBfOjXJf6MLczjymO8fOcKj9jMS8aKkTCMJqiPu2WEeFI99A==",
"version": "0.4.3",
"resolved": "https://registry.npmjs.org/eslint-plugin-react-refresh/-/eslint-plugin-react-refresh-0.4.3.tgz",
"integrity": "sha512-Hh0wv8bUNY877+sI0BlCUlsS0TYYQqvzEwJsJJPM2WF4RnTStSnSR3zdJYa2nPOJgg3UghXi54lVyMSmpCalzA==",
"dev": true,
"peerDependencies": {
"eslint": ">=7"
@ -4627,9 +4627,9 @@
"requires": {}
},
"eslint-plugin-react-refresh": {
"version": "0.4.1",
"resolved": "https://registry.npmjs.org/eslint-plugin-react-refresh/-/eslint-plugin-react-refresh-0.4.1.tgz",
"integrity": "sha512-QgrvtRJkmV+m4w953LS146+6RwEe5waouubFVNLBfOjXJf6MLczjymO8fOcKj9jMS8aKkTCMJqiPu2WEeFI99A==",
"version": "0.4.3",
"resolved": "https://registry.npmjs.org/eslint-plugin-react-refresh/-/eslint-plugin-react-refresh-0.4.3.tgz",
"integrity": "sha512-Hh0wv8bUNY877+sI0BlCUlsS0TYYQqvzEwJsJJPM2WF4RnTStSnSR3zdJYa2nPOJgg3UghXi54lVyMSmpCalzA==",
"dev": true,
"requires": {}
},

2
package.json
View File

@ -35,7 +35,7 @@
"@vitejs/plugin-react": "^4.0.0",
"eslint": "^8.41.0",
"eslint-plugin-react-hooks": "^4.6.0",
"eslint-plugin-react-refresh": "^0.4.1",
"eslint-plugin-react-refresh": "^0.4.3",
"typescript": "^5.0.4",
"vite": "^4.3.8"
}

4
src/components/App/index.tsx
View File

@ -225,9 +225,7 @@ function Layout({ setIsSpecialOfferOpen }: LayoutProps): JSX.Element {
{showNavbar ? (
<Navbar isOpen={isMenuOpen} closeMenu={() => setIsMenuOpen(false)} />
) : null}
{
// showNavbarFooter &&
hasNavbarFooter(location.pathname) ? (
{showNavbarFooter && hasNavbarFooter(location.pathname) ? (
<NavbarFooter items={navbarItems} />
) : null}
</div>

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

@ -18,8 +18,9 @@ import {
} from "@/services/zodiac-sign";
import { Asset } from "@/api/resources/Assets";
import { getRandomArbitrary } from "@/services/random-value";
import Onboarding, { EDirectionOnboarding } from "../Onboarding";
import Onboarding from "../Onboarding";
import TextWithFinger from "../TextWithFinger";
import { EDirectionOnboarding } from "@/types";
function CompatibilityPage(): JSX.Element {
const { t, i18n } = useTranslation();
@ -143,6 +144,12 @@ function CompatibilityPage(): JSX.Element {
setCompatCategory(parseInt(event.target.value));
};
const handleNameOnboarding = () => {
if (!name.length) return;
setCurrentOnboarding(1);
dateRef.current?.scrollIntoView({ behavior: "smooth" });
};
return (
<section
className={`${styles.page} page`}
@ -166,59 +173,61 @@ function CompatibilityPage(): JSX.Element {
+
</Title>
<div className={styles["inputs-container"]}>
{!onboardingCompatibility.isShown && <>
{currentOnboarding === 0 && (
<Onboarding
targetRef={inputRef.current as HTMLDivElement}
isShow={currentOnboarding === 0}
direction={EDirectionOnboarding.BOTTOM}
showBackground={true}
>
<TextWithFinger
text={t("au.web_onbording.name")}
{!onboardingCompatibility?.isShown && (
<>
{currentOnboarding === 0 && (
<Onboarding
targetRef={inputRef.current as HTMLDivElement}
isShow={currentOnboarding === 0}
direction={EDirectionOnboarding.BOTTOM}
crossClickHandler={() => setCurrentOnboarding(1)}
/>
</Onboarding>
)}
{currentOnboarding === 1 && (
<Onboarding
targetRef={dateRef.current as HTMLDivElement}
isShow={currentOnboarding === 1}
direction={EDirectionOnboarding.BOTTOM}
showBackground={true}
>
<>
<button
className={styles["compatibility-onboarding__button"]}
disabled={!isChangeDate}
onClick={() => setCurrentOnboarding(2)}
>
Done
</button>
showBackground={true}
>
<TextWithFinger
text={t("au.web_onbording.date")}
text={t("au.web_onbording.name")}
direction={EDirectionOnboarding.BOTTOM}
crossClickHandler={handleNameOnboarding}
/>
</Onboarding>
)}
{currentOnboarding === 1 && (
<Onboarding
targetRef={dateRef.current as HTMLDivElement}
isShow={currentOnboarding === 1}
direction={EDirectionOnboarding.BOTTOM}
showBackground={true}
>
<>
<button
className={styles["compatibility-onboarding__button"]}
disabled={!isChangeDate}
onClick={() => setCurrentOnboarding(2)}
>
Done
</button>
<TextWithFinger
text={t("au.web_onbording.date")}
direction={EDirectionOnboarding.BOTTOM}
showCross={false}
/>
</>
</Onboarding>
)}
{currentOnboarding === 3 && (
<Onboarding
targetRef={mainButtonRef.current as HTMLDivElement}
isShow={currentOnboarding === 3}
direction={EDirectionOnboarding.TOP}
showBackground={true}
>
<TextWithFinger
text={""}
direction={EDirectionOnboarding.TOP}
showCross={false}
/>
</>
</Onboarding>
)}
{currentOnboarding === 3 && (
<Onboarding
targetRef={mainButtonRef.current as HTMLDivElement}
isShow={currentOnboarding === 3}
direction={EDirectionOnboarding.TOP}
showBackground={true}
>
<TextWithFinger
text={""}
direction={EDirectionOnboarding.TOP}
showCross={false}
/>
</Onboarding>
)}
</>}
</Onboarding>
)}
</>
)}
<div
className={styles["input-container__name-container"]}
style={{ zIndex: currentOnboarding === 0 ? 99 : 1 }}
@ -251,7 +260,7 @@ function CompatibilityPage(): JSX.Element {
<DatePicker onDateChange={handleValidDate} />
</div>
</div>
{currentOnboarding === 2 && !onboardingCompatibility.isShown && (
{currentOnboarding === 2 && !onboardingCompatibility?.isShown && (
<Onboarding
targetRef={categoriesRef.current as HTMLDivElement}
isShow={currentOnboarding === 2}

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

@ -46,7 +46,7 @@ function HomePage(): JSX.Element {
const onboardingConfigHome = useSelector(selectors.selectOnboardingHome);
const [isShowOnboardingHome, setIsShowOnboardingHome] = useState(
!onboardingConfigHome.isShown
!onboardingConfigHome?.isShown
);
useEffect(() => {
@ -166,7 +166,10 @@ function HomePage(): JSX.Element {
isShowNavbar ? styles["content__buttons--hidden"] : ""
}`}
>
<Onboarding targetRef={buttonsRef.current as HTMLDivElement} isShow={isShowOnboardingHome}>
<Onboarding
targetRef={buttonsRef.current as HTMLDivElement}
isShow={isShowOnboardingHome}
>
<TextWithFinger
text={t("au.web_onbording.start")}
crossClickHandler={() => setIsShowOnboardingHome(false)}

11
src/components/Navbar/index.tsx
View File

@ -1,5 +1,5 @@
import { useTranslation } from 'react-i18next'
import { Link } from 'react-router-dom'
import { Link, useNavigate } from 'react-router-dom'
import { useAuth } from '@/auth'
import { useLegal } from '@/legal'
import routes from '@/routes'
@ -15,8 +15,15 @@ const capitalize = (str: string) => str.charAt(0).toUpperCase() + str.slice(1)
function Navbar({ isOpen, closeMenu }: NavbarProps): JSX.Element {
const { logout } = useAuth()
const { t } = useTranslation()
const navigate = useNavigate()
const legal = useLegal()
const combinedClassNames = ['navbar', isOpen && 'navbar--open'].filter(Boolean).join(' ')
const handleLogout = () => {
navigate(routes.client.birthday())
logout()
}
return (
<aside className={combinedClassNames}>
<div className='navbar__overlay' onClick={closeMenu}></div>
@ -37,7 +44,7 @@ function Navbar({ isOpen, closeMenu }: NavbarProps): JSX.Element {
{t('contact_us')}
</a>
<hr />
<a href='#' onClick={logout}>Log Out</a>
<a href='#' onClick={handleLogout}>Log Out</a>
</nav>
</div>
</aside>

11
src/components/NavbarFooter/index.tsx
View File

@ -1,7 +1,7 @@
import { Link } from "react-router-dom";
import styles from "./styles.module.css";
import Onboarding from "../Onboarding";
import { useRef, useState } from "react";
import { useEffect, useRef, useState } from "react";
import TextWithFinger from "../TextWithFinger";
import { useDispatch, useSelector } from "react-redux";
import { actions, selectors } from "@/store";
@ -28,11 +28,18 @@ function NavbarFooter({ items }: INavbarHomeProps): JSX.Element {
);
const [isShowOnboardingNavbarFooter, setIsShowOnboardingNavbarFooter] =
useState(!onboardingConfigNavbarFooter.isShown);
useState(!onboardingConfigNavbarFooter?.isShown);
const [selectedOnboarding, setSelectedOnboarding] = useState(3);
const [rerender, setRerender] = useState(false);
console.log(rerender);
const buttonsRef = useRef([] as HTMLDivElement[]);
useEffect(() => {
setRerender((prev) => !prev);
}, [buttonsRef])
const setShownOnboarding = () => {
setIsShowOnboardingNavbarFooter(false);
dispatch(

27
src/components/Onboarding/index.tsx
View File

@ -1,12 +1,6 @@
import { useEffect, useRef, useState } from "react";
import styles from "./styles.module.css";
export enum EDirectionOnboarding {
LEFT = "left",
RIGHT = "right",
TOP = "top",
BOTTOM = "bottom",
}
import { EDirectionOnboarding } from "@/types";
interface OnboardingProps {
targetRef: HTMLElement;
@ -34,8 +28,7 @@ const getCoordinates = (
targetRef.offsetTop +
targetRef.offsetHeight / 2 -
onboardingRef.current.offsetHeight / 2,
left:
targetRef.offsetLeft - onboardingRef.current.offsetWidth,
left: targetRef.offsetLeft - onboardingRef.current.offsetWidth,
};
case EDirectionOnboarding.RIGHT:
return {
@ -84,7 +77,7 @@ function Onboarding({
isShow,
direction = EDirectionOnboarding.TOP,
showBackground = false,
classNameContainer = '',
classNameContainer = "",
children,
}: OnboardingProps): JSX.Element {
const onboardingRef = useRef<HTMLDivElement>(null);
@ -93,21 +86,29 @@ function Onboarding({
left: 0,
});
useEffect(() => {
if (!onboardingRef.current || !targetRef) {
return;
}
setCoordinates(getCoordinates(targetRef, direction, onboardingRef));
}, [direction, targetRef, children]);
const [top, left] = [coordinates.top, coordinates.left];
if (!isShow) {
return <></>;
}
return (
<div className={getClassNameContainer(direction, showBackground, classNameContainer)}>
<div
className={getClassNameContainer(
direction,
showBackground,
classNameContainer
)}
>
<div
className={`${styles["onboarding"]} ${
!targetRef || !onboardingRef.current ? styles["hide"] : ""
}`}
style={{ top: `${top}px`, left: `${left}px` }}
style={{ top: `${coordinates.top}px`, left: `${coordinates.left}px` }}
ref={onboardingRef}
>
{children}

2
src/components/TextWithFinger/index.tsx
View File

@ -1,4 +1,4 @@
import { EDirectionOnboarding } from "../Onboarding";
import { EDirectionOnboarding } from "@/types";
import styles from "./styles.module.css";
interface TextWithFingerProps {

28
src/store/index.ts
View File

@ -47,19 +47,6 @@ import {
} from "./userCallbacks";
const preloadedState = loadStore();
export const reducer = combineReducers({
token,
user,
form,
status,
subscriptionPlans,
aura,
payment,
compatibility,
userCallbacks,
siteConfig,
onboardingConfig,
});
export const actions = {
token: tokenActions,
user: userActions,
@ -94,6 +81,21 @@ export const selectors = {
selectOnboardingNavbarFooter,
...formSelectors,
};
export const reducer = combineReducers({
token,
user,
form,
status,
subscriptionPlans,
aura,
payment,
compatibility,
userCallbacks,
siteConfig,
onboardingConfig,
});
export type RootState = ReturnType<typeof reducer>;
export const store = configureStore({
reducer,

6
src/store/onboarding.ts
View File

@ -36,7 +36,7 @@ const onboardingConfigSlice = createSlice({
initialState,
reducers: {
update(state, action: PayloadAction<Partial<IOnboardingConfig>>) {
return { ...state, ...action.payload };
return { ...initialState, ...state, ...action.payload };
},
},
extraReducers: (builder) => builder.addCase("reset", () => initialState),
@ -44,7 +44,9 @@ const onboardingConfigSlice = createSlice({
export const { actions } = onboardingConfigSlice;
export const selectOnboarding = createSelector(
(state: { onboardingConfig: IOnboardingConfig }) => state.onboardingConfig,
(state: { onboardingConfig: IOnboardingConfig }) => {
return state.onboardingConfig
},
(onboardingConfig) => onboardingConfig
);
export const selectOnboardingHome = createSelector(

7
src/types.ts
View File

@ -6,6 +6,13 @@ declare global {
}
}
export enum EDirectionOnboarding {
LEFT = "left",
RIGHT = "right",
TOP = "top",
BOTTOM = "bottom",
}
export interface FormField<T> {
name: string
value: T