= (args) => ;
export const Default = Template.bind({});
Default.args = {
-
+ projectId: 1,
}
diff --git a/src/features/Projects/pages/ProjectPage/ProjectDetailsCard/ProjectDetailsCard.tsx b/src/features/Projects/pages/ProjectPage/ProjectDetailsCard/ProjectDetailsCard.tsx
index 92ecda4..1040098 100644
--- a/src/features/Projects/pages/ProjectPage/ProjectDetailsCard/ProjectDetailsCard.tsx
+++ b/src/features/Projects/pages/ProjectPage/ProjectDetailsCard/ProjectDetailsCard.tsx
@@ -36,9 +36,11 @@ export default function ProjectDetailsCard({ direction, projectId, ...props }: P
const { loading, error } = useProjectDetailsQuery({
variables: { projectId: projectId! },
onCompleted: data => {
-
dispatch(setProject(data.getProject))
},
+ onError: () => {
+ dispatch(setProject(null));
+ },
skip: !Boolean(projectId)
});
@@ -48,7 +50,6 @@ export default function ProjectDetailsCard({ direction, projectId, ...props }: P
}, [dispatch]);
const closeModal = () => {
- dispatch(setProject(null));
props.onClose?.();
}
@@ -126,7 +127,7 @@ export default function ProjectDetailsCard({ direction, projectId, ...props }: P
}
- { }, ...props }: Props) {
}, 100), 100);
const handlePressDown = () => {
+ console.log('HANDLE PRESS DOWN');
setWasActive(true);
onPressDown();
}
@@ -67,6 +68,8 @@ export default function VoteButton({ onVote = () => { }, ...props }: Props) {
const handlePressUp = (event?: any) => {
if (!wasActive) return;
+ console.log('HANDLE PRESS UP');
+
setWasActive(false);
if (event?.preventDefault) event.preventDefault();
onPressUp();
diff --git a/src/redux/features/modals.slice.ts b/src/redux/features/modals.slice.ts
index a2f56b0..a4657b7 100644
--- a/src/redux/features/modals.slice.ts
+++ b/src/redux/features/modals.slice.ts
@@ -6,6 +6,7 @@ import InsertImageModal from 'src/Components/Inputs/TextEditor/InsertImageModal/
import { Claim_FundWithdrawCard, Claim_CopySignatureCard, Claim_GenerateSignatureCard, Claim_SubmittedCard } from "src/features/Projects/pages/ProjectPage/ClaimProject";
import { ModalCard } from "src/Components/Modals/ModalsContainer/ModalsContainer";
import { ComponentProps } from "react";
+import { generateId } from "src/utils/helperFunctions";
export enum Direction {
START,
@@ -48,9 +49,11 @@ type ModalAction =
-interface OpenModal {
+interface ModalObject {
+ id: string
Modal: ModalAction['Modal'],
props?: any;
+ isOpen: boolean
}
interface StoreState {
@@ -58,8 +61,8 @@ interface StoreState {
isLoading: boolean;
direction: Direction;
flows: keyof typeof ALL_MODALS[];
- toOpenLater: OpenModal | null;
- openModals: OpenModal[];
+ toOpenLater: ModalObject | null;
+ openModals: ModalObject[];
isMobileScreen?: boolean;
}
@@ -69,7 +72,7 @@ const initialState = {
direction: Direction.START,
flows: [] as any,
toOpenLater: null,
- openModals: [] as OpenModal[],
+ openModals: [] as ModalObject[],
} as StoreState;
export const modalSlice = createSlice({
@@ -82,7 +85,9 @@ export const modalSlice = createSlice({
scheduleModal(state, action: PayloadAction) {
state.toOpenLater = {
+ id: generateId(),
Modal: action.payload.Modal,
+ isOpen: false,
};
},
@@ -90,7 +95,7 @@ export const modalSlice = createSlice({
if (state.toOpenLater) {
state.direction = Direction.START;
state.isOpen = true;
- state.openModals.push(state.toOpenLater);
+ state.openModals.push({ ...state.toOpenLater, isOpen: true });
state.toOpenLater = null;
}
},
@@ -114,8 +119,10 @@ export const modalSlice = createSlice({
state.openModals.push({
+ id: generateId(),
Modal: action.payload.Modal,
- props
+ props,
+ isOpen: true
});
},
@@ -124,7 +131,7 @@ export const modalSlice = createSlice({
action: PayloadAction
) {
state.direction = action.payload.direction;
- state.openModals.pop();
+ state.openModals[state.openModals.length - 1].isOpen = false;
let props: any = {};
@@ -133,16 +140,23 @@ export const modalSlice = createSlice({
props = { ...props, ...action.payload.props }
state.openModals.push({
+ id: generateId(),
Modal: action.payload.Modal,
props,
+ isOpen: true,
});
},
closeModal(state) {
state.direction = Direction.EXIT;
- state.openModals.pop();
- state.isOpen = Boolean(state.openModals.length);
+ state.openModals[state.openModals.length - 1].isOpen = false;
+ state.isOpen = Boolean(state.openModals.filter(modal => modal.isOpen).length);
},
+
+ removeClosedModal(state, action: PayloadAction) {
+ state.openModals = state.openModals.filter(m => m.id !== action.payload)
+
+ }
},
});
@@ -156,6 +170,7 @@ export const {
scheduleModal,
openSceduledModal,
removeScheduledModal,
+ removeClosedModal
} = modalSlice.actions;
diff --git a/src/styles/index.scss b/src/styles/index.scss
index e9040a5..c6c8d33 100644
--- a/src/styles/index.scss
+++ b/src/styles/index.scss
@@ -2,6 +2,11 @@
@import './tw.scss',"./shared.scss",'./vendors.scss';
+
+html{
+ width: 100vw;
+}
+
body {
overflow-x: hidden;
/* background-color: #F8FAFC; */
@@ -62,13 +67,29 @@ svg {
/* Firefox */
}
-.no-scrollbar ::-webkit-scrollbar {
+.no-scrollbar::-webkit-scrollbar {
display: none;
/* Safari and Chrome */
}
+
+
@media (pointer: coarse) {
.touch-device\:hidden {
display: none;
}
}
+.ReactModal__Overlay {
+ opacity: 0;
+ transition: opacity 900ms ease-in-out;
+}
+
+.ReactModal__Overlay--after-open {
+ opacity: 1;
+}
+
+.ReactModal__Overlay--before-close {
+ opacity: 0;
+ transition-timing-function: ease-in;
+ transition-duration: 400ms;
+}
\ No newline at end of file
diff --git a/src/utils/helperFunctions.tsx b/src/utils/helperFunctions.tsx
index c81ac69..7af4a09 100644
--- a/src/utils/helperFunctions.tsx
+++ b/src/utils/helperFunctions.tsx
@@ -57,4 +57,9 @@ export function lazyModal>
export function trimText(text: string, length: number) {
return text.slice(0, length) + (text.length > length ? "..." : "")
+}
+
+export function generateId() {
+ // TODO: Change to proper generator
+ return Math.random().toString();
}
\ No newline at end of file
diff --git a/src/utils/hooks/usePressHolder.ts b/src/utils/hooks/usePressHolder.ts
index cd4da2e..74fbc43 100644
--- a/src/utils/hooks/usePressHolder.ts
+++ b/src/utils/hooks/usePressHolder.ts
@@ -9,11 +9,12 @@ export const usePressHolder = (onHold: () => any, holdThreshold: number = 400) =
});
const onPressDown = () => {
- requestAnimationFrame(timer)
+ ref.current.timerID = requestAnimationFrame(timer)
}
const onPressUp = () => {
+ console.log('ON PRESS UP');
cancelAnimationFrame(ref.current.timerID);
ref.current.cntr = 0;
diff --git a/src/utils/storybook/decorators.tsx b/src/utils/storybook/decorators.tsx
index 46ab9fc..879cdab 100644
--- a/src/utils/storybook/decorators.tsx
+++ b/src/utils/storybook/decorators.tsx
@@ -74,7 +74,7 @@ export const AppDecorator: DecoratorFn = (Component) => {
return
}
-export const wrapModal: DecoratorFn = (Component) => { }}>
+export const wrapModal: DecoratorFn = (Component) => { }}>
export const wrapPage: DecoratorFn = (Component) =>
@@ -83,22 +83,27 @@ export const wrapPage: DecoratorFn = (Component) =>
+
+
+ )
+ // return (
+ //
+ //
+ //
+ //
+ //
+ //
+ //
+ // );
}
export const centerDecorator: DecoratorFn = (Story) => {