diff --git a/src/features/Projects/pages/ListProjectPage/Components/ProjectListedModal/ProjectDetailsTab.stories.tsx b/src/features/Projects/pages/ListProjectPage/Components/ProjectListedModal/ProjectDetailsTab.stories.tsx new file mode 100644 index 0000000..e3dbd67 --- /dev/null +++ b/src/features/Projects/pages/ListProjectPage/Components/ProjectListedModal/ProjectDetailsTab.stories.tsx @@ -0,0 +1,26 @@ +import { ComponentStory, ComponentMeta } from '@storybook/react'; +import ProjectListedModal from './ProjectListedModal'; + +export default { + title: 'Projects/List Project Page/Modals/Project Listed Modal', + component: ProjectListedModal, + argTypes: { + backgroundColor: { control: 'color' }, + }, +} as ComponentMeta; + + +const Template: ComponentStory = (args) => + + +export const Default = Template.bind({}); +Default.args = { + project: { + id: 12, + name: "BOLT FUN", + img: "https://picsum.photos/id/870/150/150.jpg", + tagline: "An awesome directory for lightning projects and makers" + } +} + + diff --git a/src/features/Projects/pages/ListProjectPage/Components/ProjectListedModal/ProjectListedModal.tsx b/src/features/Projects/pages/ListProjectPage/Components/ProjectListedModal/ProjectListedModal.tsx new file mode 100644 index 0000000..0964b6c --- /dev/null +++ b/src/features/Projects/pages/ListProjectPage/Components/ProjectListedModal/ProjectListedModal.tsx @@ -0,0 +1,96 @@ +import { motion } from 'framer-motion' +import { useAppSelector, useMediaQuery, useWindowSize } from 'src/utils/hooks'; +import { ModalCard, modalCardVariants } from 'src/Components/Modals/ModalsContainer/ModalsContainer' +import Button from 'src/Components/Button/Button' +import { IoClose } from 'react-icons/io5'; +import NutImg from './nut.png' +import AlbyImg from './alby.png' +import Avatar from 'src/features/Profiles/Components/Avatar/Avatar'; +import { createRoute } from 'src/utils/routing'; +import Confetti from 'react-confetti' +import { Portal } from 'src/Components/Portal/Portal'; + + +interface Props extends ModalCard { + project: { + id: number, + img: string, + name: string, + tagline: string, + } +} + +export default function ProjectListedModal({ onClose, direction, project, ...props }: Props) { + + const size = useWindowSize(); + + const isSmallScreen = useMediaQuery('screen and (max-width: 680px)') + + return ( + + + + + +

Product listed!

+
+ +

{project.name}

+
+

+ Nice work, you successfully listed your product! Here are a few ideas to get your started. +

+ +
+
+
+ ✍️ +
+
+

+ Stories +

+

+ Tell the maker community about your product. +

+
+
+
+
+ ⚔️ +
+
+

+ Start hacking +

+

+ Kickstart your hacking journey with a tournament. +

+
+
+
+ +
+ + +
+ + ) +} diff --git a/src/features/Projects/pages/ListProjectPage/Components/ProjectListedModal/index.ts b/src/features/Projects/pages/ListProjectPage/Components/ProjectListedModal/index.ts new file mode 100644 index 0000000..c93533d --- /dev/null +++ b/src/features/Projects/pages/ListProjectPage/Components/ProjectListedModal/index.ts @@ -0,0 +1,4 @@ + +import { lazyModal } from 'src/utils/helperFunctions'; + +export const { LazyComponent: ProjectListedModal } = lazyModal(() => import('./ProjectListedModal')) \ No newline at end of file diff --git a/src/features/Projects/pages/ListProjectPage/Components/SaveChangesCard/SaveChangesCard.tsx b/src/features/Projects/pages/ListProjectPage/Components/SaveChangesCard/SaveChangesCard.tsx index a423c85..0a05370 100644 --- a/src/features/Projects/pages/ListProjectPage/Components/SaveChangesCard/SaveChangesCard.tsx +++ b/src/features/Projects/pages/ListProjectPage/Components/SaveChangesCard/SaveChangesCard.tsx @@ -7,6 +7,8 @@ import { IListProjectForm } from "../FormContainer/FormContainer"; import { useMemo, useState } from 'react' import { tabs } from '../../ListProjectPage' import { NotificationsService } from 'src/services' +import { useAppDispatch } from 'src/utils/hooks'; +import { openModal } from 'src/redux/features/modals.slice'; interface Props { currentTab: keyof typeof tabs @@ -16,6 +18,7 @@ export default function SaveChangesCard(props: Props) { const { handleSubmit, formState: { errors, isDirty, }, reset, getValues, watch } = useFormContext(); const navigate = useNavigate(); + const dispatch = useAppDispatch(); const [isLoading, setIsLoading] = useState(false); const isUpdating = useMemo(() => !!getValues('id'), [getValues]); @@ -29,7 +32,21 @@ export default function SaveChangesCard(props: Props) { } const clickSubmit = handleSubmit(data => { - NotificationsService.success("Product listed successfully") + + if (isUpdating) + NotificationsService.success("Saved changes successfully") + else { + dispatch(openModal({ + Modal: "ProjectListedModal", props: { + project: { + id: data.id!, + name: data.name, + img: data.thumbnail_image || "https://picsum.photos/id/870/150/150.jpg", + tagline: data.tagline, + } + } + })) + } console.log(data); }, () => { NotificationsService.error("Please fill all the required fields"); diff --git a/src/redux/features/modals.slice.ts b/src/redux/features/modals.slice.ts index c6c3a27..32506a3 100644 --- a/src/redux/features/modals.slice.ts +++ b/src/redux/features/modals.slice.ts @@ -1,6 +1,7 @@ import { createSlice, PayloadAction } from "@reduxjs/toolkit"; import { Login_ScanningWalletCard, Login_ExternalWalletCard, Login_NativeWalletCard, Login_SuccessCard } from "src/Components/Modals/Login"; import { ProjectDetailsCard } from "src/features/Projects/pages/ProjectPage/ProjectDetailsCard"; +import { ProjectListedModal } from "src/features/Projects/pages/ListProjectPage/Components/ProjectListedModal"; import VoteCard from "src/features/Projects/pages/ProjectPage/VoteCard/VoteCard"; import { InsertImageModal } from 'src/Components/Inputs/TextEditor/InsertImageModal' import { InsertVideoModal } from 'src/Components/Inputs/TextEditor/InsertVideoModal' @@ -37,7 +38,7 @@ export const ALL_MODALS = { ConfirmModal, NoWeblnModal, LinkingAccountModal, - + ProjectListedModal, // Text Editor Modals InsertImageModal, InsertVideoModal, diff --git a/src/styles/index.scss b/src/styles/index.scss index 96fdc2e..b24c8c2 100644 --- a/src/styles/index.scss +++ b/src/styles/index.scss @@ -3,7 +3,7 @@ $screen-xs-min: 320px; @import "./tw.scss", "./shared.scss", "./vendors.scss", "./scrollbar.scss", - "./ui_state.scss"; + "./ui_state.scss", "./portals.scss"; @import "/src/styles/mixins/index.scss"; html { diff --git a/src/styles/portals.scss b/src/styles/portals.scss new file mode 100644 index 0000000..d856f8c --- /dev/null +++ b/src/styles/portals.scss @@ -0,0 +1,6 @@ +#confetti { + z-index: 3000; + position: fixed; + inset: 0; + pointer-events: none; +} diff --git a/src/styles/ui_state.scss b/src/styles/ui_state.scss index 3f8527f..aa2e496 100644 --- a/src/styles/ui_state.scss +++ b/src/styles/ui_state.scss @@ -1,3 +1,10 @@ :root { --navHeight: 0; + + // Z Indexes + --baseZ: 10; + --navZ: var(--baseZ) + 1; + --popupZ: var(--navZ) + 1; + --modalZ: var(--popupZ) + 1; + --particlesZ: var(--modalZ) + 1; } diff --git a/src/utils/routing/routes.ts b/src/utils/routing/routes.ts index 2f60a0b..845aaeb 100644 --- a/src/utils/routing/routes.ts +++ b/src/utils/routing/routes.ts @@ -14,6 +14,10 @@ type RouteOptions = title?: string, username?: string, } + | { + type: "edit-story", + id?: number, + } | { type: "bounty", id: string | number, @@ -47,6 +51,10 @@ export function createRoute(options: RouteOptions) { return `/blog/post/story/${options.id}` + (options.title ? `/${toSlug(options.title)}` : ""); + + if (options.type === "edit-story") + return `/blog/create-post` + (options.id ? `?id=${options.id}` : '') + if (options.type === "bounty") return `/blog/post/bounty/${options.id}` + (options.title ? `/${toSlug(options.title)}` : "");