From 4e0c42a69f3d2acf1d7d8fcbc1ea2ceccff1a4c9 Mon Sep 17 00:00:00 2001 From: MTG2000 Date: Wed, 10 Aug 2022 12:02:47 +0300 Subject: [PATCH 1/4] fix: typo on no-webln modal --- src/Components/Modals/NoWeblnModal/NoWeblnModal.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/Components/Modals/NoWeblnModal/NoWeblnModal.tsx b/src/Components/Modals/NoWeblnModal/NoWeblnModal.tsx index c044161..1037ffc 100644 --- a/src/Components/Modals/NoWeblnModal/NoWeblnModal.tsx +++ b/src/Components/Modals/NoWeblnModal/NoWeblnModal.tsx @@ -62,7 +62,7 @@ export default function NoWeblnModal({ onClose, direction, ...props }: ModalCard className="modal-card max-w-[343px] p-24 rounded-xl relative" > -

No WebLB Detected

+

No WebLN Detected

{content} ) From 2e369d4b3c72ab389e59540e95778264b074a255 Mon Sep 17 00:00:00 2001 From: MTG2000 Date: Wed, 10 Aug 2022 13:43:04 +0300 Subject: [PATCH 2/4] fix: remove empty space at the end of carousel, make categories carousel btns as the designs, fix shifting in padding between apps explore and category page --- .../Projects/pages/CategoryPage/CategoryPage.tsx | 2 +- .../Projects/pages/ExplorePage/Categories/Categories.tsx | 9 ++++++--- src/features/Projects/pages/ExplorePage/ExplorePage.tsx | 2 +- .../pages/ExplorePage/ProjectsRow/ProjectsRow.tsx | 6 +++++- 4 files changed, 13 insertions(+), 6 deletions(-) diff --git a/src/features/Projects/pages/CategoryPage/CategoryPage.tsx b/src/features/Projects/pages/CategoryPage/CategoryPage.tsx index e5cc0e4..da6c204 100644 --- a/src/features/Projects/pages/CategoryPage/CategoryPage.tsx +++ b/src/features/Projects/pages/CategoryPage/CategoryPage.tsx @@ -36,7 +36,7 @@ export default function CategoryPage() { {`${data?.getCategory.title!} Lightning Products`} -
+
- -
diff --git a/src/features/Projects/pages/ExplorePage/ExplorePage.tsx b/src/features/Projects/pages/ExplorePage/ExplorePage.tsx index eff9c10..27053cd 100644 --- a/src/features/Projects/pages/ExplorePage/ExplorePage.tsx +++ b/src/features/Projects/pages/ExplorePage/ExplorePage.tsx @@ -15,7 +15,7 @@ export default function ExplorePage() {
-
+
diff --git a/src/features/Projects/pages/ExplorePage/ProjectsRow/ProjectsRow.tsx b/src/features/Projects/pages/ExplorePage/ProjectsRow/ProjectsRow.tsx index fb8937b..71da859 100644 --- a/src/features/Projects/pages/ExplorePage/ProjectsRow/ProjectsRow.tsx +++ b/src/features/Projects/pages/ExplorePage/ProjectsRow/ProjectsRow.tsx @@ -26,7 +26,11 @@ export default function ProjectsRow({ title, link, projects }: Props) { const [slidesToScroll, setSlidesToScroll] = useState(1) const rowRef = useRef(null) - const { viewportRef, scrollSlides, canScrollNext, canScrollPrev, isClickAllowed } = useCarousel({ align: 'start', slidesToScroll }) + const { viewportRef, scrollSlides, canScrollNext, canScrollPrev, isClickAllowed } = useCarousel({ + align: 'start', + slidesToScroll, + containScroll: "trimSnaps", + }) const dispatch = useAppDispatch() From 4c50bfbdadfd7d64eaf2f7e8a19ddab062542b3d Mon Sep 17 00:00:00 2001 From: MTG2000 Date: Wed, 10 Aug 2022 14:06:45 +0300 Subject: [PATCH 3/4] update: navigation component on mobile --- src/Components/Navbar/NavMobile.tsx | 114 ++++++++++++++-------------- 1 file changed, 58 insertions(+), 56 deletions(-) diff --git a/src/Components/Navbar/NavMobile.tsx b/src/Components/Navbar/NavMobile.tsx index 023b0ea..db03d3b 100644 --- a/src/Components/Navbar/NavMobile.tsx +++ b/src/Components/Navbar/NavMobile.tsx @@ -90,44 +90,47 @@ export default function NavMobile() {
- {curUser !== undefined && - (curUser && - }> - { - e.syntheticEvent.preventDefault(); - navigate(createRoute({ type: 'profile', id: curUser.id, username: curUser.name })); - }} - className='!p-16 font-medium flex gap-16 hover:bg-gray-100 !rounded-12' - > - 👾 Profile - - { - e.syntheticEvent.preventDefault(); - navigate("/edit-profile"); - }} - className='!p-16 font-medium flex gap-16 hover:bg-gray-100 !rounded-12' - > - ⚙️ Settings - - { - e.syntheticEvent.preventDefault(); - navigate("/logout"); - }} - className='!p-16 font-medium flex gap-16 hover:bg-gray-100 !rounded-12' - > - 👋 Logout - - + {curUser ? + + }> + { + e.syntheticEvent.preventDefault(); + navigate(createRoute({ type: 'profile', id: curUser.id, username: curUser.name })); + }} + className='!p-16 font-medium flex gap-16 hover:bg-gray-100 !rounded-12' + > + 👾 Profile + + { + e.syntheticEvent.preventDefault(); + navigate("/edit-profile"); + }} + className='!p-16 font-medium flex gap-16 hover:bg-gray-100 !rounded-12' + > + ⚙️ Settings + + { + e.syntheticEvent.preventDefault(); + navigate("/logout"); + }} + className='!p-16 font-medium flex gap-16 hover:bg-gray-100 !rounded-12' + > + 👋 Logout + + + : + - ) }
@@ -149,25 +152,16 @@ export default function NavMobile() {
toggleDrawerOpen(false)} /> { - curUser ? - : - + !curUser && + }
    @@ -270,6 +264,14 @@ export default function NavMobile() { Donate +
  • + toggleDrawerOpen(false)} + className='text-body4 font-bold hover:text-primary-600'> + Logout 👋 + +
  • From 118dd3622ad0f2e07073ff24a035f324f309f6d6 Mon Sep 17 00:00:00 2001 From: MTG2000 Date: Wed, 10 Aug 2022 16:16:27 +0300 Subject: [PATCH 4/4] feat: change how the 'save changes' look and function in the profile settings --- .../pages/EditProfilePage/EditProfilePage.tsx | 2 +- .../SaveChangesCard/SaveChangesCard.tsx | 63 +++ .../UpdateMyProfileCard.tsx | 360 +++++++++--------- .../CommentsSettingsCard.tsx | 122 +++--- src/utils/helperFunctions.tsx | 3 +- src/utils/hooks/index.ts | 2 + src/utils/hooks/usePrompt.tsx | 56 +++ 7 files changed, 365 insertions(+), 243 deletions(-) create mode 100644 src/features/Profiles/pages/EditProfilePage/SaveChangesCard/SaveChangesCard.tsx create mode 100644 src/utils/hooks/usePrompt.tsx diff --git a/src/features/Profiles/pages/EditProfilePage/EditProfilePage.tsx b/src/features/Profiles/pages/EditProfilePage/EditProfilePage.tsx index 787c952..cbfc3fa 100644 --- a/src/features/Profiles/pages/EditProfilePage/EditProfilePage.tsx +++ b/src/features/Profiles/pages/EditProfilePage/EditProfilePage.tsx @@ -93,7 +93,7 @@ export default function EditProfilePage() { } -
    +
    } /> } /> diff --git a/src/features/Profiles/pages/EditProfilePage/SaveChangesCard/SaveChangesCard.tsx b/src/features/Profiles/pages/EditProfilePage/SaveChangesCard/SaveChangesCard.tsx new file mode 100644 index 0000000..c1d72f7 --- /dev/null +++ b/src/features/Profiles/pages/EditProfilePage/SaveChangesCard/SaveChangesCard.tsx @@ -0,0 +1,63 @@ +import React from 'react' +import { Link } from 'react-router-dom' +import Button from 'src/Components/Button/Button' +import Avatar from 'src/features/Profiles/Components/Avatar/Avatar' +import { useProfileQuery } from 'src/graphql' +import { trimText } from 'src/utils/helperFunctions' +import { useAppSelector } from 'src/utils/hooks' +import { createRoute } from 'src/utils/routing' + +interface Props { + isLoading?: boolean; + isDirty?: boolean; + onSubmit?: () => void + onCancel?: () => void; +} + +export default function SaveChangesCard(props: Props) { + + const userId = useAppSelector(state => state.user.me?.id!) + const profileQuery = useProfileQuery({ + variables: { + profileId: userId, + }, + }) + + if (!profileQuery.data?.profile) + return <> + + return ( +
    +
    + + + +
    +

    {profileQuery.data.profile ? trimText(profileQuery.data.profile.name, 30) : "Anonymouse"}

    + {profileQuery.data.profile.jobTitle &&

    {profileQuery.data.profile.jobTitle}

    } +
    + {/* {showTimeAgo &&

    + {dayjs().diff(props.date, 'hour') < 24 ? `${dayjs().diff(props.date, 'hour')}h ago` : undefined} +

    } */} +
    +

    {trimText(profileQuery.data.profile.bio, 120)}

    +
    + + +
    +
    + ) +} diff --git a/src/features/Profiles/pages/EditProfilePage/UpdateMyProfileCard/UpdateMyProfileCard.tsx b/src/features/Profiles/pages/EditProfilePage/UpdateMyProfileCard/UpdateMyProfileCard.tsx index 1053c4e..027dfef 100644 --- a/src/features/Profiles/pages/EditProfilePage/UpdateMyProfileCard/UpdateMyProfileCard.tsx +++ b/src/features/Profiles/pages/EditProfilePage/UpdateMyProfileCard/UpdateMyProfileCard.tsx @@ -5,8 +5,8 @@ import { NotificationsService } from "src/services/notifications.service"; import * as yup from "yup"; import { yupResolver } from "@hookform/resolvers/yup"; import Avatar from "src/features/Profiles/Components/Avatar/Avatar"; - - +import { usePrompt } from "src/utils/hooks"; +import SaveChangesCard from "../SaveChangesCard/SaveChangesCard"; interface Props { data: Pick = yup.object({ export default function UpdateMyProfileCard({ data, onClose }: Props) { - const { register, formState: { errors }, handleSubmit } = useForm({ + const { register, formState: { errors, isDirty, }, handleSubmit, reset } = useForm({ defaultValues: data, resolver: yupResolver(schema), mode: 'onBlur', @@ -77,6 +77,8 @@ export default function UpdateMyProfileCard({ data, onClose }: Props) { + usePrompt('You may have some unsaved changes. You still want to leave?', isDirty) + const onSubmit: SubmitHandler = data => { mutate({ @@ -94,6 +96,9 @@ export default function UpdateMyProfileCard({ data, onClose }: Props) { twitter: data.twitter, website: data.website, } + }, + onCompleted: () => { + reset(data); } }).catch(() => { NotificationsService.error('A network error happened'); @@ -102,186 +107,179 @@ export default function UpdateMyProfileCard({ data, onClose }: Props) { }; return ( -
    -
    -
    - +
    +
    +
    +
    + +
    +
    +
    +
    +

    + Name +

    +
    + +
    + {errors.name &&

    + {errors.name.message} +

    } +

    + Avatar +

    +
    + +
    + {errors.avatar &&

    + {errors.avatar.message} +

    } +

    + Bio +

    +
    +