Added pin icon directly to snippet card

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)

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 */}
       <h5 className='card-title d-flex align-items-center justify-content-between'>
         {title}
-        {isPinned ? <Icon path={mdiPin} size={0.8} color='#212529' /> : ''}
+        <SnippetPin id={id} isPinned={isPinned} />
       </h5>
 
       <h6 className='card-subtitle mb-2 text-muted'>

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 => {
     <Card>
       <h5 className='card-title d-flex align-items-center justify-content-between'>
         {title}
-        {isPinned ? <Icon path={mdiPin} size={0.8} color='#212529' /> : ''}
+        <SnippetPin id={id} isPinned={isPinned} />
       </h5>
       <p>{description}</p>
 
@@ -59,33 +59,22 @@ export const SnippetDetails = (props: Props): JSX.Element => {
         <span>Last updated</span>
         <span>{updateDate.relative}</span>
       </div>
-
       <hr />
 
       {/* ACTIONS */}
-      <div className='d-flex justify-content-between'>
-        <Link
-          to={{
-            pathname: `/editor/${id}`,
-            state: { from: window.location.pathname }
-          }}
-        >
-          <Button
-            text='Edit'
-            color='dark'
-            small
-            outline
-            classes='me-3'
-            handler={() => setSnippet(id)}
-          />
-        </Link>
+      <div className='d-grid g-2' style={{ rowGap: '10px' }}>
         <Button
-          text={`${isPinned ? 'Unpin snippet' : 'Pin snippet'}`}
+          text='Edit'
           color='dark'
           small
           outline
-          handler={() => toggleSnippetPin(id)}
-          classes='me-3'
+          handler={() => {
+            setSnippet(id);
+            history.push({
+              pathname: `/editor/${id}`,
+              state: { from: window.location.pathname }
+            });
+          }}
         />
         <Button
           text='Delete'
@@ -94,12 +83,6 @@ export const SnippetDetails = (props: Props): JSX.Element => {
           outline
           handler={() => deleteSnippet(id)}
         />
-      </div>
-
-      <hr />
-
-      {/* COPY */}
-      <div className='d-grid'>
         <Button text='Copy code' color='dark' small handler={copyHandler} />
       </div>
     </Card>

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 (
+    <div onClick={() => toggleSnippetPin(id)} className='cursor-pointer'>
+      {isPinned ? (
+        <Icon path={mdiPin} size={0.8} color='#212529' />
+      ) : (
+        <Icon path={mdiPinOutline} size={0.8} color='#9a9a9a' />
+      )}
+    </div>
+  );
+};

client/src/store/SnippetsContext.tsx

@@ -17,7 +17,7 @@ export const SnippetsContext = createContext<Context>({
   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<Response<Snippet>>(`/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);
     }
   };
 

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;