Merge pull request #20 from pawelmalak/raw-snippets

Added support for raw snippets

CHANGELOG.md

@@ -1,3 +1,6 @@
+### v1.3.1 (2021-10-05)
+- Added support for raw snippets ([#15](https://github.com/pawelmalak/snippet-box/issues/15))
+
 ### v1.3 (2021-09-30)
 - Added dark mode ([#7](https://github.com/pawelmalak/snippet-box/issues/7))
 - Added syntax highlighting ([#14](https://github.com/pawelmalak/snippet-box/issues/14))

client/src/components/Snippets/SnippetDetails.tsx

@@ -31,9 +31,9 @@ export const SnippetDetails = (props: Props): JSX.Element => {
   const creationDate = dateParser(createdAt);
   const updateDate = dateParser(updatedAt);
 
-  const copyHandler = () => {
-    copy(code);
-  };
+  // const copyHandler = () => {
+  //   copy(code);
+  // };
 
   return (
     <Card>
@@ -74,6 +74,14 @@ export const SnippetDetails = (props: Props): JSX.Element => {
 
       {/* ACTIONS */}
       <div className='d-grid g-2' style={{ rowGap: '10px' }}>
+        <Button
+          text='Delete'
+          color='danger'
+          small
+          outline
+          handler={() => deleteSnippet(id)}
+        />
+
         <Button
           text='Edit'
           color='secondary'
@@ -87,18 +95,24 @@ export const SnippetDetails = (props: Props): JSX.Element => {
             });
           }}
         />
+
         <Button
-          text='Delete'
-          color='danger'
+          text='Copy raw url'
+          color='secondary'
           small
           outline
-          handler={() => deleteSnippet(id)}
+          handler={() => {
+            const { protocol, host } = window.location;
+            const rawUrl = `${protocol}//${host}/api/snippets/raw/${id}`;
+            copy(rawUrl);
+          }}
         />
+
         <Button
           text='Copy code'
           color='secondary'
           small
-          handler={copyHandler}
+          handler={() => copy(code)}
         />
       </div>
     </Card>

client/src/styles/_variables.scss

@@ -10,16 +10,16 @@ $gray-700: #495057;
 $gray-800: #343a40;
 $gray-900: #212529;
 $black: #000;
-$blue: #3459e6;
+$blue: #375a7f;
 $indigo: #6610f2;
 $purple: #6f42c1;
-$pink: #d63384;
-$red: #da292e;
-$orange: #f8765f;
-$yellow: #f4bd61;
-$green: #2fb380;
+$pink: #e83e8c;
+$red: #e74c3c;
+$orange: #fd7e14;
+$yellow: #f39c12;
+$green: #00bc8c;
 $teal: #20c997;
-$cyan: #287bb5;
+$cyan: #3498db;
 $primary: $blue;
 $secondary: $white;
 $success: $green;

src/controllers/snippets.ts

@@ -209,3 +209,28 @@ export const countTags = asyncWrapper(
     });
   }
 );
+
+/**
+ * @description Get raw snippet code
+ * @route /api/snippets/raw/:id
+ * @request GET
+ */
+export const getRawCode = asyncWrapper(
+  async (req: Request, res: Response, next: NextFunction): Promise<void> => {
+    const snippet = await SnippetModel.findOne({
+      where: { id: req.params.id },
+      raw: true
+    });
+
+    if (!snippet) {
+      return next(
+        new ErrorResponse(
+          404,
+          `Snippet with id of ${req.params.id} was not found`
+        )
+      );
+    }
+
+    res.status(200).send(snippet.code);
+  }
+);

src/routes/snippets.ts

@@ -4,6 +4,7 @@ import {
   createSnippet,
   deleteSnippet,
   getAllSnippets,
+  getRawCode,
   getSnippet,
   updateSnippet
 } from '../controllers/snippets';
@@ -23,3 +24,5 @@ snippetRouter
   .delete(deleteSnippet);
 
 snippetRouter.route('/statistics/count').get(countTags);
+
+snippetRouter.route('/raw/:id').get(getRawCode);