From f8bc7490178966eccee2f02f6bc91e83d5ced6cd Mon Sep 17 00:00:00 2001 From: unknown Date: Fri, 24 Sep 2021 10:50:22 +0200 Subject: [PATCH 1/2] Fixed issue with copying snippets. Added Changelog file --- .prettierignore | 3 ++- CHANGELOG.md | 5 +++++ client/package-lock.json | 5 +++++ client/package.json | 1 + client/src/components/Snippets/SnippetCard.tsx | 3 ++- client/src/components/Snippets/SnippetDetails.tsx | 3 ++- 6 files changed, 17 insertions(+), 3 deletions(-) create mode 100644 CHANGELOG.md diff --git a/.prettierignore b/.prettierignore index 2318862..12df85d 100644 --- a/.prettierignore +++ b/.prettierignore @@ -1 +1,2 @@ -*.css \ No newline at end of file +*.css +CHANGELOG.md \ No newline at end of file diff --git a/CHANGELOG.md b/CHANGELOG.md new file mode 100644 index 0000000..e3a961c --- /dev/null +++ b/CHANGELOG.md @@ -0,0 +1,5 @@ +### v1.1 (2021-09-24) +- Fixed issue with copying snippets ([#6](https://github.com/pawelmalak/snippet-box/issues/6)) + +### v1.0 (2021-09-23) +Initial release \ No newline at end of file diff --git a/client/package-lock.json b/client/package-lock.json index eb016b0..3a77063 100644 --- a/client/package-lock.json +++ b/client/package-lock.json @@ -4280,6 +4280,11 @@ "resolved": "https://registry.npmjs.org/clean-stack/-/clean-stack-2.2.0.tgz", "integrity": "sha512-4diC9HaTE+KRAMWhDhrGOECgWZxoevMc5TlkObMqNSsVU62PYzXZ/SMTjzyGAFF1YusgxGcSWTEXBhp0CPwQ1A==" }, + "clipboard-copy": { + "version": "4.0.1", + "resolved": "https://registry.npmjs.org/clipboard-copy/-/clipboard-copy-4.0.1.tgz", + "integrity": "sha512-wOlqdqziE/NNTUJsfSgXmBMIrYmfd5V0HCGsR8uAKHcg+h9NENWINcfRjtWGU77wDHC8B8ijV4hMTGYbrKovng==" + }, "cliui": { "version": "6.0.0", "resolved": "https://registry.npmjs.org/cliui/-/cliui-6.0.0.tgz", diff --git a/client/package.json b/client/package.json index 6d2c159..8e3bda5 100644 --- a/client/package.json +++ b/client/package.json @@ -14,6 +14,7 @@ "@types/react": "^17.0.21", "@types/react-dom": "^17.0.9", "axios": "^0.21.4", + "clipboard-copy": "^4.0.1", "dayjs": "^1.10.7", "react": "^17.0.2", "react-dom": "^17.0.2", diff --git a/client/src/components/Snippets/SnippetCard.tsx b/client/src/components/Snippets/SnippetCard.tsx index 3e8c873..4ac2575 100644 --- a/client/src/components/Snippets/SnippetCard.tsx +++ b/client/src/components/Snippets/SnippetCard.tsx @@ -6,6 +6,7 @@ import { Badge, Button, Card } from '../UI'; import { SnippetsContext } from '../../store'; import Icon from '@mdi/react'; import { mdiPin } from '@mdi/js'; +import copy from 'clipboard-copy'; interface Props { snippet: Snippet; @@ -17,7 +18,7 @@ export const SnippetCard = (props: Props): JSX.Element => { const { setSnippet } = useContext(SnippetsContext); const copyHandler = () => { - navigator.clipboard.writeText(code); + copy(code); }; return ( diff --git a/client/src/components/Snippets/SnippetDetails.tsx b/client/src/components/Snippets/SnippetDetails.tsx index 9729189..5b0c947 100644 --- a/client/src/components/Snippets/SnippetDetails.tsx +++ b/client/src/components/Snippets/SnippetDetails.tsx @@ -6,6 +6,7 @@ import { dateParser } from '../../utils'; import { Button, Card } from '../UI'; import Icon from '@mdi/react'; import { mdiPin } from '@mdi/js'; +import copy from 'clipboard-copy'; interface Props { snippet: Snippet; @@ -30,7 +31,7 @@ export const SnippetDetails = (props: Props): JSX.Element => { const updateDate = dateParser(updatedAt); const copyHandler = () => { - navigator.clipboard.writeText(code); + copy(code); }; return ( From 390705c3dd560606c424adfe6a04accb70afb89d Mon Sep 17 00:00:00 2001 From: unknown Date: Fri, 24 Sep 2021 11:23:57 +0200 Subject: [PATCH 2/2] Added pin icon directly to snippet card --- CHANGELOG.md | 1 + .../src/components/Snippets/SnippetCard.tsx | 5 +- .../components/Snippets/SnippetDetails.tsx | 47 ++++++------------- client/src/components/Snippets/SnippetPin.tsx | 24 ++++++++++ client/src/store/SnippetsContext.tsx | 21 ++++++--- client/src/typescript/interfaces/Context.ts | 2 +- 6 files changed, 57 insertions(+), 43 deletions(-) create mode 100644 client/src/components/Snippets/SnippetPin.tsx diff --git a/CHANGELOG.md b/CHANGELOG.md index e3a961c..a172248 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,4 +1,5 @@ ### v1.1 (2021-09-24) +- Added pin icon directly to snippet card ([#4](https://github.com/pawelmalak/snippet-box/issues/4)) - Fixed issue with copying snippets ([#6](https://github.com/pawelmalak/snippet-box/issues/6)) ### v1.0 (2021-09-23) diff --git a/client/src/components/Snippets/SnippetCard.tsx b/client/src/components/Snippets/SnippetCard.tsx index 4ac2575..d880a30 100644 --- a/client/src/components/Snippets/SnippetCard.tsx +++ b/client/src/components/Snippets/SnippetCard.tsx @@ -4,9 +4,8 @@ import { Snippet } from '../../typescript/interfaces'; import { dateParser, badgeColor } from '../../utils'; import { Badge, Button, Card } from '../UI'; import { SnippetsContext } from '../../store'; -import Icon from '@mdi/react'; -import { mdiPin } from '@mdi/js'; import copy from 'clipboard-copy'; +import { SnippetPin } from './SnippetPin'; interface Props { snippet: Snippet; @@ -26,7 +25,7 @@ export const SnippetCard = (props: Props): JSX.Element => { {/* TITLE */}
{title} - {isPinned ? : ''} +
diff --git a/client/src/components/Snippets/SnippetDetails.tsx b/client/src/components/Snippets/SnippetDetails.tsx index 5b0c947..9de585b 100644 --- a/client/src/components/Snippets/SnippetDetails.tsx +++ b/client/src/components/Snippets/SnippetDetails.tsx @@ -1,12 +1,11 @@ import { useContext } from 'react'; -import { Link } from 'react-router-dom'; +import { useHistory } from 'react-router-dom'; import { SnippetsContext } from '../../store'; import { Snippet } from '../../typescript/interfaces'; import { dateParser } from '../../utils'; import { Button, Card } from '../UI'; -import Icon from '@mdi/react'; -import { mdiPin } from '@mdi/js'; import copy from 'clipboard-copy'; +import { SnippetPin } from './SnippetPin'; interface Props { snippet: Snippet; @@ -24,8 +23,9 @@ export const SnippetDetails = (props: Props): JSX.Element => { isPinned } = props.snippet; - const { deleteSnippet, toggleSnippetPin, setSnippet } = - useContext(SnippetsContext); + const history = useHistory(); + + const { deleteSnippet, setSnippet } = useContext(SnippetsContext); const creationDate = dateParser(createdAt); const updateDate = dateParser(updatedAt); @@ -38,7 +38,7 @@ export const SnippetDetails = (props: Props): JSX.Element => {
{title} - {isPinned ? : ''} +

{description}

@@ -59,33 +59,22 @@ export const SnippetDetails = (props: Props): JSX.Element => { Last updated {updateDate.relative} -
{/* ACTIONS */} -
- -
- -
- - {/* COPY */} -
diff --git a/client/src/components/Snippets/SnippetPin.tsx b/client/src/components/Snippets/SnippetPin.tsx new file mode 100644 index 0000000..c61aa20 --- /dev/null +++ b/client/src/components/Snippets/SnippetPin.tsx @@ -0,0 +1,24 @@ +import { useContext } from 'react'; +import { SnippetsContext } from '../../store'; +import Icon from '@mdi/react'; +import { mdiPin, mdiPinOutline } from '@mdi/js'; + +interface Props { + id: number; + isPinned: boolean; +} + +export const SnippetPin = (props: Props): JSX.Element => { + const { toggleSnippetPin } = useContext(SnippetsContext); + const { id, isPinned } = props; + + return ( +
toggleSnippetPin(id)} className='cursor-pointer'> + {isPinned ? ( + + ) : ( + + )} +
+ ); +}; diff --git a/client/src/store/SnippetsContext.tsx b/client/src/store/SnippetsContext.tsx index 962c8ed..f73d7ee 100644 --- a/client/src/store/SnippetsContext.tsx +++ b/client/src/store/SnippetsContext.tsx @@ -17,7 +17,7 @@ export const SnippetsContext = createContext({ getSnippetById: (id: number) => {}, setSnippet: (id: number) => {}, createSnippet: (snippet: NewSnippet) => {}, - updateSnippet: (snippet: NewSnippet, id: number) => {}, + updateSnippet: (snippet: NewSnippet, id: number, isLocal?: boolean) => {}, deleteSnippet: (id: number) => {}, toggleSnippetPin: (id: number) => {}, countSnippets: () => {} @@ -81,7 +81,11 @@ export const SnippetsContextProvider = (props: Props): JSX.Element => { .catch(err => redirectOnError()); }; - const updateSnippet = (snippet: NewSnippet, id: number): void => { + const updateSnippet = ( + snippet: NewSnippet, + id: number, + isLocal?: boolean + ): void => { axios .put>(`/api/snippets/${id}`, snippet) .then(res => { @@ -92,10 +96,13 @@ export const SnippetsContextProvider = (props: Props): JSX.Element => { ...snippets.slice(oldSnippetIdx + 1) ]); setCurrentSnippet(res.data.data); - history.push({ - pathname: `/snippet/${res.data.data.id}`, - state: { from: '/snippets' } - }); + + if (!isLocal) { + history.push({ + pathname: `/snippet/${res.data.data.id}`, + state: { from: '/snippets' } + }); + } }) .catch(err => redirectOnError()); }; @@ -121,7 +128,7 @@ export const SnippetsContextProvider = (props: Props): JSX.Element => { const snippet = snippets.find(s => s.id === id); if (snippet) { - updateSnippet({ ...snippet, isPinned: !snippet.isPinned }, id); + updateSnippet({ ...snippet, isPinned: !snippet.isPinned }, id, true); } }; diff --git a/client/src/typescript/interfaces/Context.ts b/client/src/typescript/interfaces/Context.ts index 258d4e0..215674e 100644 --- a/client/src/typescript/interfaces/Context.ts +++ b/client/src/typescript/interfaces/Context.ts @@ -8,7 +8,7 @@ export interface Context { getSnippetById: (id: number) => void; setSnippet: (id: number) => void; createSnippet: (snippet: NewSnippet) => void; - updateSnippet: (snippet: NewSnippet, id: number) => void; + updateSnippet: (snippet: NewSnippet, id: number, isLocal?: boolean) => void; deleteSnippet: (id: number) => void; toggleSnippetPin: (id: number) => void; countSnippets: () => void;