aljaz/landscape-template
1
0
Fork 0
mirror of https://github.com/aljazceru/landscape-template.git synced 2026-01-01 21:44:25 +01:00
Code Issues Packages Projects Releases Wiki Activity

feat: add slider to settings section, fix a react18 bug with apollo-client

Browse Source
This commit is contained in:
MTG2000
2022-08-06 13:57:29 +03:00
parent ea2e142baa
commit 7103518df7
5 changed files with 69 additions and 44 deletions
Download Patch File Download Diff File Expand all files Collapse all files

56
package-lock.json generated
View File

@@ -8,7 +8,7 @@
"name": "my-app",
"version": "0.1.0",
"dependencies": {
"@apollo/client": "^3.5.10",
"@apollo/client": "^3.6.9",
"@hookform/resolvers": "^2.8.8",
"@noble/secp256k1": "^1.6.3",
"@prisma/client": "^3.12.0",
@@ -144,27 +144,27 @@
}
},
"node_modules/@apollo/client": {
"version": "3.5.10",
"resolved": "https://registry.npmjs.org/@apollo/client/-/client-3.5.10.tgz",
"integrity": "sha512-tL3iSpFe9Oldq7gYikZK1dcYxp1c01nlSwtsMz75382HcI6fvQXyFXUCJTTK3wgO2/ckaBvRGw7VqjFREdVoRw==",
"version": "3.6.9",
"resolved": "https://registry.npmjs.org/@apollo/client/-/client-3.6.9.tgz",
"integrity": "sha512-Y1yu8qa2YeaCUBVuw08x8NHenFi0sw2I3KCu7Kw9mDSu86HmmtHJkCAifKVrN2iPgDTW/BbP3EpSV8/EQCcxZA==",
"dependencies": {
"@graphql-typed-document-node/core": "^3.0.0",
"@graphql-typed-document-node/core": "^3.1.1",
"@wry/context": "^0.6.0",
"@wry/equality": "^0.5.0",
"@wry/trie": "^0.3.0",
"graphql-tag": "^2.12.3",
"graphql-tag": "^2.12.6",
"hoist-non-react-statics": "^3.3.2",
"optimism": "^0.16.1",
"prop-types": "^15.7.2",
"symbol-observable": "^4.0.0",
"ts-invariant": "^0.9.4",
"ts-invariant": "^0.10.3",
"tslib": "^2.3.0",
"zen-observable-ts": "^1.2.0"
"zen-observable-ts": "^1.2.5"
},
"peerDependencies": {
"graphql": "^14.0.0 || ^15.0.0 || ^16.0.0",
"graphql-ws": "^5.5.5",
"react": "^16.8.0 || ^17.0.0",
"react": "^16.8.0 || ^17.0.0 || ^18.0.0",
"subscriptions-transport-ws": "^0.9.0 || ^0.11.0"
},
"peerDependenciesMeta": {
@@ -65311,9 +65311,9 @@
"integrity": "sha512-Z86EW+fFFh/IFB1fqQ3/+7Zpf9t2ebOAxNI/V6Wo7r5gqiqtxmgTlQ1qbqQcjLKYeSHPTsEmvlJUDg/EuL0uHQ=="
},
"node_modules/ts-invariant": {
"version": "0.9.4",
"resolved": "https://registry.npmjs.org/ts-invariant/-/ts-invariant-0.9.4.tgz",
"integrity": "sha512-63jtX/ZSwnUNi/WhXjnK8kz4cHHpYS60AnmA6ixz17l7E12a5puCWFlNpkne5Rl0J8TBPVHpGjsj4fxs8ObVLQ==",
"version": "0.10.3",
"resolved": "https://registry.npmjs.org/ts-invariant/-/ts-invariant-0.10.3.tgz",
"integrity": "sha512-uivwYcQaxAucv1CzRp2n/QdYPo4ILf9VXgH19zEIjFx2EJufV16P0JtJVpYHy89DItG6Kwj2oIUjrcK5au+4tQ==",
"dependencies": {
"tslib": "^2.1.0"
},
@@ -68013,9 +68013,9 @@
"integrity": "sha512-PQ2PC7R9rslx84ndNBZB/Dkv8V8fZEpk83RLgXtYd0fwUgEjseMn1Dgajh2x6S8QbZAFa9p2qVCEuYZNgve0dQ=="
},
"node_modules/zen-observable-ts": {
"version": "1.2.3",
"resolved": "https://registry.npmjs.org/zen-observable-ts/-/zen-observable-ts-1.2.3.tgz",
"integrity": "sha512-hc/TGiPkAWpByykMwDcem3SdUgA4We+0Qb36bItSuJC9xD0XVBZoFHYoadAomDSNf64CG8Ydj0Qb8Od8BUWz5g==",
"version": "1.2.5",
"resolved": "https://registry.npmjs.org/zen-observable-ts/-/zen-observable-ts-1.2.5.tgz",
"integrity": "sha512-QZWQekv6iB72Naeake9hS1KxHlotfRpe+WGNbNx5/ta+R3DNjVO2bswf63gXlWDcs+EMd7XY8HfVQyP1X6T4Zg==",
"dependencies": {
"zen-observable": "0.8.15"
}
@@ -68041,22 +68041,22 @@
}
},
"@apollo/client": {
"version": "3.5.10",
"resolved": "https://registry.npmjs.org/@apollo/client/-/client-3.5.10.tgz",
"integrity": "sha512-tL3iSpFe9Oldq7gYikZK1dcYxp1c01nlSwtsMz75382HcI6fvQXyFXUCJTTK3wgO2/ckaBvRGw7VqjFREdVoRw==",
"version": "3.6.9",
"resolved": "https://registry.npmjs.org/@apollo/client/-/client-3.6.9.tgz",
"integrity": "sha512-Y1yu8qa2YeaCUBVuw08x8NHenFi0sw2I3KCu7Kw9mDSu86HmmtHJkCAifKVrN2iPgDTW/BbP3EpSV8/EQCcxZA==",
"requires": {
"@graphql-typed-document-node/core": "^3.0.0",
"@graphql-typed-document-node/core": "^3.1.1",
"@wry/context": "^0.6.0",
"@wry/equality": "^0.5.0",
"@wry/trie": "^0.3.0",
"graphql-tag": "^2.12.3",
"graphql-tag": "^2.12.6",
"hoist-non-react-statics": "^3.3.2",
"optimism": "^0.16.1",
"prop-types": "^15.7.2",
"symbol-observable": "^4.0.0",
"ts-invariant": "^0.9.4",
"ts-invariant": "^0.10.3",
"tslib": "^2.3.0",
"zen-observable-ts": "^1.2.0"
"zen-observable-ts": "^1.2.5"
}
},
"@apollo/protobufjs": {
@@ -117867,9 +117867,9 @@
"integrity": "sha512-Z86EW+fFFh/IFB1fqQ3/+7Zpf9t2ebOAxNI/V6Wo7r5gqiqtxmgTlQ1qbqQcjLKYeSHPTsEmvlJUDg/EuL0uHQ=="
},
"ts-invariant": {
"version": "0.9.4",
"resolved": "https://registry.npmjs.org/ts-invariant/-/ts-invariant-0.9.4.tgz",
"integrity": "sha512-63jtX/ZSwnUNi/WhXjnK8kz4cHHpYS60AnmA6ixz17l7E12a5puCWFlNpkne5Rl0J8TBPVHpGjsj4fxs8ObVLQ==",
"version": "0.10.3",
"resolved": "https://registry.npmjs.org/ts-invariant/-/ts-invariant-0.10.3.tgz",
"integrity": "sha512-uivwYcQaxAucv1CzRp2n/QdYPo4ILf9VXgH19zEIjFx2EJufV16P0JtJVpYHy89DItG6Kwj2oIUjrcK5au+4tQ==",
"requires": {
"tslib": "^2.1.0"
}
@@ -119989,9 +119989,9 @@
"integrity": "sha512-PQ2PC7R9rslx84ndNBZB/Dkv8V8fZEpk83RLgXtYd0fwUgEjseMn1Dgajh2x6S8QbZAFa9p2qVCEuYZNgve0dQ=="
},
"zen-observable-ts": {
"version": "1.2.3",
"resolved": "https://registry.npmjs.org/zen-observable-ts/-/zen-observable-ts-1.2.3.tgz",
"integrity": "sha512-hc/TGiPkAWpByykMwDcem3SdUgA4We+0Qb36bItSuJC9xD0XVBZoFHYoadAomDSNf64CG8Ydj0Qb8Od8BUWz5g==",
"version": "1.2.5",
"resolved": "https://registry.npmjs.org/zen-observable-ts/-/zen-observable-ts-1.2.5.tgz",
"integrity": "sha512-QZWQekv6iB72Naeake9hS1KxHlotfRpe+WGNbNx5/ta+R3DNjVO2bswf63gXlWDcs+EMd7XY8HfVQyP1X6T4Zg==",
"requires": {
"zen-observable": "0.8.15"
}

2
package.json
View File

@@ -3,7 +3,7 @@
"version": "0.1.0",
"private": true,
"dependencies": {
"@apollo/client": "^3.5.10",
"@apollo/client": "^3.6.9",
"@hookform/resolvers": "^2.8.8",
"@noble/secp256k1": "^1.6.3",
"@prisma/client": "^3.12.0",

47
src/features/Profiles/pages/EditProfilePage/EditProfilePage.tsx
View File

@@ -1,11 +1,13 @@
import { Navigate, NavLink, Route, Routes } from "react-router-dom";
import LoadingPage from "src/Components/LoadingPage/LoadingPage";
import NotFoundPage from "src/features/Shared/pages/NotFoundPage/NotFoundPage";
import Slider from "src/Components/Slider/Slider";
import { useProfileQuery } from "src/graphql";
import { useAppSelector } from "src/utils/hooks";
import { useAppSelector, useMediaQuery } from "src/utils/hooks";
import CommentsSettingsCard from "../ProfilePage/CommentsSettingsCard/CommentsSettingsCard";
import UpdateMyProfileCard from "./UpdateMyProfileCard/UpdateMyProfileCard";
import { Helmet } from 'react-helmet'
import { MEDIA_QUERIES } from "src/utils/theme";
const links = [
@@ -29,6 +31,7 @@ export default function EditProfilePage() {
},
skip: !userId,
})
const isMediumScreen = useMediaQuery(MEDIA_QUERIES.isMedium)
@@ -47,23 +50,43 @@ export default function EditProfilePage() {
</Helmet>
<div className="page-container grid grid-cols-1 md:grid-cols-4 gap-24">
<aside>
<div className='bg-white border-2 border-gray-200 rounded-12 p-16 sticky-side-element' >
<p className="text-body2 font-bolder text-black mb-16">Edit maker profile</p>
<ul className=' flex flex-col gap-8'>
{links.map((link, idx) =>
<li key={idx}>
<NavLink
to={link.path}
className={({ isActive }) => `flex items-start rounded-8 cursor-pointer font-bold p-12
{isMediumScreen ?
<div className='bg-white border-2 border-gray-200 rounded-12 p-16 sticky-side-element' >
<p className="text-body2 font-bolder text-black mb-16">Edit maker profile</p>
<ul className=' flex flex-col gap-8'>
{links.map((link, idx) =>
<li key={idx}>
<NavLink
to={link.path}
className={({ isActive }) => `flex items-start rounded-8 cursor-pointer font-bold p-12
active:scale-95 transition-transform
${isActive ? 'bg-gray-100' : 'hover:bg-gray-50'}
`}
>
{link.text}
</NavLink>
</li>)}
</ul>
</div>
:
<div className="border-b-2 border-gray-200">
<Slider>
{links.map((link, idx) =>
<NavLink
to={link.path}
key={idx}
className={`flex items-start cursor-pointer font-bold py-12
active:scale-95 transition-transform`}
style={({ isActive }) => ({
boxShadow: isActive ? '0px 2px var(--primary)' : 'none'
})}
>
{link.text}
</NavLink>
</li>)}
</ul>
</div>
)}
</Slider>
</div>
}
</aside>
<main className="md:col-span-2">
<Routes>

1
src/features/Profiles/pages/EditProfilePage/UpdateMyProfileCard/UpdateMyProfileCard.tsx
View File

@@ -77,6 +77,7 @@ export default function UpdateMyProfileCard({ data, onClose }: Props) {
const onSubmit: SubmitHandler<IFormInputs> = data => {
mutate({
variables: {

7
src/features/Profiles/pages/ProfilePage/CommentsSettingsCard/CommentsSettingsCard.tsx
View File

@@ -38,7 +38,8 @@ export default function CommentsSettingsCard({ nostr_prv_key, nostr_pub_key, isO
<input
type={'password'}
className="input-text"
value={nostr_prv_key}
defaultValue={nostr_prv_key}
readOnly
/>
<CopyToClipboard text={nostr_prv_key} />
@@ -50,10 +51,10 @@ export default function CommentsSettingsCard({ nostr_prv_key, nostr_pub_key, isO
</p>
<div className="input-wrapper mt-8 relative">
<input
type='text'
className="input-text"
value={nostr_pub_key!}
defaultValue={nostr_pub_key!}
readOnly
/>
<CopyToClipboard text={nostr_pub_key ?? ''} />
</div>