From 3ebd12b0298c5773b60a3a75663a55d2f7b48ff2 Mon Sep 17 00:00:00 2001 From: MTG2000 Date: Wed, 17 Aug 2022 16:36:19 +0300 Subject: [PATCH] feat: added skeletons to profile tabs, added api mocsk to profile --- .../PostCard/Header/Header.Skeleton.tsx | 3 +- .../pages/EditProfilePage/EditProfilePage.tsx | 6 +++ .../LinkedAccountsCard/LinkedAccountsCard.tsx | 49 ------------------- .../PreferencesTab.Skeleton.tsx | 45 +++++++++++++++++ .../PreferencesTab/PreferencesTab.tsx | 15 ++++-- .../PreferencesTab/profilePreferences.graphql | 2 + .../SaveChangesCard/SaveChangesCard.tsx | 1 - .../UpdateMyProfileTab.Skeleton.tsx | 30 ++++++++++++ .../UpdateMyProfileTab/UpdateMyProfileTab.tsx | 3 +- src/graphql/index.tsx | 6 ++- src/mocks/data/users.ts | 4 +- src/mocks/handlers.ts | 24 +++++++++ src/mocks/resolvers.ts | 11 +++-- 13 files changed, 134 insertions(+), 65 deletions(-) create mode 100644 src/features/Profiles/pages/EditProfilePage/PreferencesTab/PreferencesTab.Skeleton.tsx create mode 100644 src/features/Profiles/pages/EditProfilePage/UpdateMyProfileTab/UpdateMyProfileTab.Skeleton.tsx diff --git a/src/features/Posts/Components/PostCard/Header/Header.Skeleton.tsx b/src/features/Posts/Components/PostCard/Header/Header.Skeleton.tsx index 9917276..41b4a0e 100644 --- a/src/features/Posts/Components/PostCard/Header/Header.Skeleton.tsx +++ b/src/features/Posts/Components/PostCard/Header/Header.Skeleton.tsx @@ -1,5 +1,4 @@ -import Avatar from 'src/features/Profiles/Components/Avatar/Avatar'; -import dayjs from 'dayjs' + import Skeleton from 'react-loading-skeleton'; interface Props { diff --git a/src/features/Profiles/pages/EditProfilePage/EditProfilePage.tsx b/src/features/Profiles/pages/EditProfilePage/EditProfilePage.tsx index 6a9a6a0..870bf14 100644 --- a/src/features/Profiles/pages/EditProfilePage/EditProfilePage.tsx +++ b/src/features/Profiles/pages/EditProfilePage/EditProfilePage.tsx @@ -29,6 +29,12 @@ export default function EditProfilePage() { const isMediumScreen = useMediaQuery(MEDIA_QUERIES.isMedium); + const user = useAppSelector(state => state.user.me) + + + if (!user) + return + return ( <> diff --git a/src/features/Profiles/pages/EditProfilePage/PreferencesTab/LinkedAccountsCard/LinkedAccountsCard.tsx b/src/features/Profiles/pages/EditProfilePage/PreferencesTab/LinkedAccountsCard/LinkedAccountsCard.tsx index d4d179c..b05d1e3 100644 --- a/src/features/Profiles/pages/EditProfilePage/PreferencesTab/LinkedAccountsCard/LinkedAccountsCard.tsx +++ b/src/features/Profiles/pages/EditProfilePage/PreferencesTab/LinkedAccountsCard/LinkedAccountsCard.tsx @@ -17,59 +17,10 @@ interface Props { -// function reducer(state: State, action: Action): State { -// switch (action.type) { -// case 'set': -// return { -// hasNewChanges: false, -// keys: [...action.payload], -// oldKeys: [...action.payload], -// } -// case 'delete': -// if (state.keys.length === 1) -// return state; -// return { -// hasNewChanges: true, -// oldKeys: state.oldKeys, -// keys: [...state.keys.slice(0, action.payload.idx), ...state.keys.slice(action.payload.idx + 1)] -// }; -// case 'update': -// return { -// hasNewChanges: true, -// oldKeys: state.oldKeys, -// keys: state.keys.map((item, idx) => { -// if (idx === action.payload.idx) -// return { -// ...item, -// name: action.payload.value -// } -// return item; -// }), - -// } -// case 'cancel': -// return { -// hasNewChanges: false, -// keys: [...state.oldKeys], -// oldKeys: state.oldKeys, -// } -// } -// } - export default function LinkedAccountsCard({ value, onChange }: Props) { const dispatch = useAppDispatch(); const inputsRefs = useRef[]>([]); - // const [keysState, keysDispatch] = useReducer(reducer, { keys: [], oldKeys: [], hasNewChanges: false, }); - - // const [updateKeys, updatingKeysStatus] = useUpdateUserWalletsKeysMutation({ - // onCompleted: data => { - // keysDispatch({ - // type: "set", - // payload: data.updateUserWalletKeys - // }) - // } - // }) const connectNewWallet = () => { dispatch(openModal({ Modal: "LinkingAccountModal" })) diff --git a/src/features/Profiles/pages/EditProfilePage/PreferencesTab/PreferencesTab.Skeleton.tsx b/src/features/Profiles/pages/EditProfilePage/PreferencesTab/PreferencesTab.Skeleton.tsx new file mode 100644 index 0000000..2e236a1 --- /dev/null +++ b/src/features/Profiles/pages/EditProfilePage/PreferencesTab/PreferencesTab.Skeleton.tsx @@ -0,0 +1,45 @@ +import React from 'react' +import Card from 'src/Components/Card/Card'; +import Skeleton from 'react-loading-skeleton'; + +export default function PreferencesTabSkeleton() { + return ( +
+
+ +

+

+ + +

+ +
+
    + {Array(3).fill(0).map((_, idx) => +
  • +
    + +
    +
    • + )} +
+ +
+ + +

+

+ + + +

+
+ +
+
+ +
+
+ ) +} diff --git a/src/features/Profiles/pages/EditProfilePage/PreferencesTab/PreferencesTab.tsx b/src/features/Profiles/pages/EditProfilePage/PreferencesTab/PreferencesTab.tsx index d62909f..657d75d 100644 --- a/src/features/Profiles/pages/EditProfilePage/PreferencesTab/PreferencesTab.tsx +++ b/src/features/Profiles/pages/EditProfilePage/PreferencesTab/PreferencesTab.tsx @@ -1,9 +1,8 @@ import LinkedAccountsCard from './LinkedAccountsCard/LinkedAccountsCard'; import CommentsSettingsCard from './CommentsSettingsCard/CommentsSettingsCard'; import { UpdateUserPreferencesMutationVariables, useMyProfilePreferencesQuery, useUpdateUserPreferencesMutation } from 'src/graphql'; -import LoadingPage from 'src/Components/LoadingPage/LoadingPage'; import NotFoundPage from "src/features/Shared/pages/NotFoundPage/NotFoundPage"; - +import PreferencesTabSkeleton from './PreferencesTab.Skeleton' import * as yup from "yup"; import { yupResolver } from "@hookform/resolvers/yup"; import { Controller, SubmitHandler, useForm } from 'react-hook-form'; @@ -12,6 +11,7 @@ import { toast } from 'react-toastify'; import { NotificationsService } from 'src/services'; import { NetworkStatus } from '@apollo/client'; import { usePrompt } from 'src/utils/hooks'; +import { useEffect } from 'react'; interface Props { @@ -45,11 +45,16 @@ export default function PreferencesTab() { }); const [mutate, mutationStatus] = useUpdateUserPreferencesMutation(); - usePrompt('You may have some unsaved changes. You still want to leave?', isDirty) + useEffect(() => { + console.log("MOUNTED"); + + }, []) + + // usePrompt('You may have some unsaved changes. You still want to leave?', isDirty) - if (query.networkStatus === NetworkStatus.loading) - return + if (query.loading) + return if (!query.data?.me) return diff --git a/src/features/Profiles/pages/EditProfilePage/PreferencesTab/profilePreferences.graphql b/src/features/Profiles/pages/EditProfilePage/PreferencesTab/profilePreferences.graphql index 6077304..0f23571 100644 --- a/src/features/Profiles/pages/EditProfilePage/PreferencesTab/profilePreferences.graphql +++ b/src/features/Profiles/pages/EditProfilePage/PreferencesTab/profilePreferences.graphql @@ -1,5 +1,6 @@ query MyProfilePreferences { me { + id walletsKeys { key name @@ -11,6 +12,7 @@ query MyProfilePreferences { mutation UpdateUserPreferences($walletsKeys: [UserKeyInputType!]) { updateUserPreferences(userKeys: $walletsKeys) { + id walletsKeys { key name diff --git a/src/features/Profiles/pages/EditProfilePage/SaveChangesCard/SaveChangesCard.tsx b/src/features/Profiles/pages/EditProfilePage/SaveChangesCard/SaveChangesCard.tsx index 0011cd5..941814c 100644 --- a/src/features/Profiles/pages/EditProfilePage/SaveChangesCard/SaveChangesCard.tsx +++ b/src/features/Profiles/pages/EditProfilePage/SaveChangesCard/SaveChangesCard.tsx @@ -3,7 +3,6 @@ import { Link } from 'react-router-dom' import Button from 'src/Components/Button/Button' import Card from 'src/Components/Card/Card' 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' diff --git a/src/features/Profiles/pages/EditProfilePage/UpdateMyProfileTab/UpdateMyProfileTab.Skeleton.tsx b/src/features/Profiles/pages/EditProfilePage/UpdateMyProfileTab/UpdateMyProfileTab.Skeleton.tsx new file mode 100644 index 0000000..51e7e45 --- /dev/null +++ b/src/features/Profiles/pages/EditProfilePage/UpdateMyProfileTab/UpdateMyProfileTab.Skeleton.tsx @@ -0,0 +1,30 @@ +import Card from 'src/Components/Card/Card'; +import Skeleton from 'react-loading-skeleton'; + +export default function UpdateProfileAboutTabSkeleton() { + return ( +
+
+ +
+
+
+
+
+ +
+ +

+

+ +

+
+
+ +
+
+ +
+
+ ) +} diff --git a/src/features/Profiles/pages/EditProfilePage/UpdateMyProfileTab/UpdateMyProfileTab.tsx b/src/features/Profiles/pages/EditProfilePage/UpdateMyProfileTab/UpdateMyProfileTab.tsx index 14dbe90..2af4dbe 100644 --- a/src/features/Profiles/pages/EditProfilePage/UpdateMyProfileTab/UpdateMyProfileTab.tsx +++ b/src/features/Profiles/pages/EditProfilePage/UpdateMyProfileTab/UpdateMyProfileTab.tsx @@ -12,6 +12,7 @@ import Card from "src/Components/Card/Card"; import LoadingPage from "src/Components/LoadingPage/LoadingPage"; import NotFoundPage from "src/features/Shared/pages/NotFoundPage/NotFoundPage"; import { setUser } from "src/redux/features/user.slice"; +import UpdateProfileAboutTabSkeleton from "./UpdateMyProfileTab.Skeleton"; interface Props { } @@ -75,7 +76,7 @@ export default function UpdateMyProfileTab() { if (profileQuery.loading) - return + return if (!profileQuery.data?.me) return diff --git a/src/graphql/index.tsx b/src/graphql/index.tsx index d6c2f98..f9f95ac 100644 --- a/src/graphql/index.tsx +++ b/src/graphql/index.tsx @@ -573,14 +573,14 @@ export type PostDetailsQuery = { __typename?: 'Query', getPostById: { __typename export type MyProfilePreferencesQueryVariables = Exact<{ [key: string]: never; }>; -export type MyProfilePreferencesQuery = { __typename?: 'Query', me: { __typename?: 'MyProfile', nostr_prv_key: string | null, nostr_pub_key: string | null, walletsKeys: Array<{ __typename?: 'WalletKey', key: string, name: string }> } | null }; +export type MyProfilePreferencesQuery = { __typename?: 'Query', me: { __typename?: 'MyProfile', id: number, nostr_prv_key: string | null, nostr_pub_key: string | null, walletsKeys: Array<{ __typename?: 'WalletKey', key: string, name: string }> } | null }; export type UpdateUserPreferencesMutationVariables = Exact<{ walletsKeys: InputMaybe | UserKeyInputType>; }>; -export type UpdateUserPreferencesMutation = { __typename?: 'Mutation', updateUserPreferences: { __typename?: 'MyProfile', nostr_pub_key: string | null, nostr_prv_key: string | null, walletsKeys: Array<{ __typename?: 'WalletKey', key: string, name: string }> } }; +export type UpdateUserPreferencesMutation = { __typename?: 'Mutation', updateUserPreferences: { __typename?: 'MyProfile', id: number, nostr_pub_key: string | null, nostr_prv_key: string | null, walletsKeys: Array<{ __typename?: 'WalletKey', key: string, name: string }> } }; export type MyProfileAboutQueryVariables = Exact<{ [key: string]: never; }>; @@ -1383,6 +1383,7 @@ export type PostDetailsQueryResult = Apollo.QueryResult new Promise((res) => setTimeout(res, ms + Math.random() * 1000)) @@ -195,6 +197,7 @@ export const handlers = [ graphql.query('Me', async (req, res, ctx) => { await delay() + console.log("ME"); return res( ctx.data({ @@ -203,6 +206,27 @@ export const handlers = [ ) }), + + graphql.query('MyProfileAbout', async (req, res, ctx) => { + await delay() + return res( + ctx.data({ + me: me(), + }) + ) + }), + + graphql.query('MyProfilePreferences', async (req, res, ctx) => { + await delay() + return res( + ctx.data({ + me: me(), + }) + ) + }), + + + graphql.query('profile', async (req, res, ctx) => { await delay() diff --git a/src/mocks/resolvers.ts b/src/mocks/resolvers.ts index f9802bf..d09f614 100644 --- a/src/mocks/resolvers.ts +++ b/src/mocks/resolvers.ts @@ -1,5 +1,5 @@ import { MOCK_DATA } from "./data"; -import { MyProfile, Query, QueryGetFeedArgs, QueryGetPostByIdArgs } from 'src/graphql' +import { MyProfile, Query, QueryGetFeedArgs, QueryGetPostByIdArgs, User } from 'src/graphql' import { Chance } from "chance"; import { tags } from "./data/tags"; import { hackathons } from "./data/hackathon"; @@ -72,11 +72,16 @@ export function getAllHackathons() { } export function me() { - return MOCK_DATA['user'] as MyProfile + return { + ...MOCK_DATA['user'], + __typename: "MyProfile", + } as MyProfile } + + export function profile() { - return MOCK_DATA['user'] + return { ...MOCK_DATA['user'], __typename: 'User' } as User } export function getMyDrafts(): Query['getMyDrafts'] {