From 7c7db68f9b9d89e76695008d310ef9f747c30ab5 Mon Sep 17 00:00:00 2001
From: Jimpulse48 <107091480+Jimpulse48@users.noreply.github.com>
Date: Tue, 16 May 2023 15:17:13 -0500
Subject: [PATCH] Added comments throughout front end code

---
 client/App.jsx                                |   6 +-
 .../src/components/AddSnippet/AddSnippet.jsx  |  81 ++++-----
 .../src/components/AddSnippet/SaveModal.jsx   |  10 +-
 .../SnippetDisplay/SnippetDisplay.jsx         | 165 +++++++++---------
 .../src/components/ui/TagInput/TagInput.jsx   |  14 +-
 .../ui/TagInput/TagInput.module.scss          |   0
 .../MainContainer/MainContainer.jsx           |  15 +-
 client/src/containers/Sidebar/Sidebar.jsx     |  78 +++++----
 .../SnippetsRadioList/SnippetsRadioList.jsx   |  73 +++-----
 server/server.js                              |   1 -
 10 files changed, 215 insertions(+), 228 deletions(-)
 delete mode 100644 client/src/components/ui/TagInput/TagInput.module.scss

diff --git a/client/App.jsx b/client/App.jsx
index c9b1e1c..1862db4 100644
--- a/client/App.jsx
+++ b/client/App.jsx
@@ -1,10 +1,12 @@
 import React from 'react';
+
+//  importing child components
 import MainContainer from './src/containers/MainContainer/MainContainer.jsx';
 
 const App = () => (
-  <div id="app">
+  <div id='app'>
     <MainContainer />
   </div>
 );
 
-export default App;
\ No newline at end of file
+export default App;
diff --git a/client/src/components/AddSnippet/AddSnippet.jsx b/client/src/components/AddSnippet/AddSnippet.jsx
index efebf01..1b79d4f 100644
--- a/client/src/components/AddSnippet/AddSnippet.jsx
+++ b/client/src/components/AddSnippet/AddSnippet.jsx
@@ -1,13 +1,23 @@
+import React, { useState } from 'react';
+
+//  importing child components
+import SaveModal from '../../components/AddSnippet/SaveModal.jsx';
+import TagInput from '../../components/ui/TagInput/TagInput';
+
+//  importing external functionality
 import CodeMirror from '@uiw/react-codemirror';
 import { markdown, markdownLanguage } from '@codemirror/lang-markdown';
 import { languages } from '@codemirror/language-data';
 import { langs } from '@uiw/codemirror-extensions-langs';
-import styles from './AddSnippet.module.scss';
-import React, { useState } from 'react';
-import SaveModal from '../../components/AddSnippet/SaveModal.jsx';
-import TagInput from '../../components/ui/TagInput/TagInput';
+
+//  importing utils
 import Modal from 'react-bootstrap/Modal';
 import Button from 'react-bootstrap/Button';
+
+//  importing styles
+import styles from './AddSnippet.module.scss';
+
+//  importing data
 import { LANGUAGES } from '../../data/data.js';
 
 const AddSnippet = ({ closeModal }) => {
@@ -47,12 +57,6 @@ const AddSnippet = ({ closeModal }) => {
         console.log(err);
         console.log('failed saving snippet');
       });
-
-
-    // setTitle('');
-    // setLanguage('');
-    // setComments('');
-    // setStoredCode('');
   }
 
   // wrapper function for setTags to send to TagInput
@@ -61,40 +65,39 @@ const AddSnippet = ({ closeModal }) => {
   }
 
   return (
-    <div className="modalBackground">
-      <div className="modalContainer modal show">
+    <div className='modalBackground'>
+      <div className='modalContainer modal show'>
         <Modal
           className={styles.modal}
           show={true}
           onHide={() => closeModal(false)}
-          size="xl"
-          aria-labelledby="contained-modal-title-vcenter"
-          centered
-        >
+          size='xl'
+          aria-labelledby='contained-modal-title-vcenter'
+          centered>
           <Modal.Header className={styles.header}>
-            <Modal.Title className="col-12 text-center">Add a snippet</Modal.Title>
+            <Modal.Title className='col-12 text-center'>
+              Add a snippet
+            </Modal.Title>
           </Modal.Header>
           <br />
 
           <div className={styles.codeSnippet}>
-
             <label>Title: </label>
             <input
               className={styles.title}
               value={title}
               onChange={(e) => {
                 setTitle(e.target.value);
-              }}
-            ></input>
+              }}></input>
             {error && <span className='error'>Title is required!</span>}
             <br />
             <br />
 
             <label>Language: </label>
-            <select className={styles.language}
+            <select
+              className={styles.language}
               value={language}
-              onChange={(e) => setLanguage(e.target.value)}
-            >
+              onChange={(e) => setLanguage(e.target.value)}>
               {LANGUAGES.map((language) => (
                 <option key={language} value={language}>
                   {language}
@@ -110,8 +113,7 @@ const AddSnippet = ({ closeModal }) => {
               value={comments}
               onChange={(e) => {
                 setComments(e.target.value);
-              }}
-            ></input>
+              }}></input>
             <br />
             <br />
 
@@ -119,42 +121,31 @@ const AddSnippet = ({ closeModal }) => {
             <TagInput className={styles.tags} onChange={setTagsWrapper} />
             <hr />
 
-            <h5 className="px-2">Enter code:</h5>
+            <h5 className='px-2'>Enter code:</h5>
             <CodeMirror
               className={styles.editor}
-              height="500px"
-              id="storedCode"
+              height='500px'
+              id='storedCode'
               // value={storedCode}
               extensions={[langs.tsx()]}
               placeholder={
                 "const sayHi = () => {\n  console.log('Hello World!)\n}"
               }
-              onChange={(e) => setStoredCode(e)}
-            >
-            </CodeMirror>
-            {/* <input
-              id='storedCode'
-              value={storedCode}
-              onChange={(e) => {
-                setStoredCode(e.target.value);
-              }}
-            ></input> */}
+              onChange={(e) => setStoredCode(e)}></CodeMirror>
           </div>
 
           <Modal.Footer>
-          {openModal && <SaveModal closeModal={setOpenModal} />}
-            <Button variant="secondary" onClick={() => closeModal(false)}>
+            {openModal && <SaveModal />}
+            <Button variant='secondary' onClick={() => closeModal(false)}>
               Close
             </Button>
             <Button
-              variant="primary"
-              className="saveButton"
-              onClick={handleSubmit}
-            >
+              variant='primary'
+              className='saveButton'
+              onClick={handleSubmit}>
               Save
             </Button>
           </Modal.Footer>
-          
         </Modal>
       </div>
     </div>
diff --git a/client/src/components/AddSnippet/SaveModal.jsx b/client/src/components/AddSnippet/SaveModal.jsx
index d5c8e25..43a8625 100644
--- a/client/src/components/AddSnippet/SaveModal.jsx
+++ b/client/src/components/AddSnippet/SaveModal.jsx
@@ -1,13 +1,7 @@
-import React, { useState} from 'react';
-import Modal from 'react-bootstrap/Modal';
+import React from 'react';
 
 function SaveModal() {
-    
-  return (
-  <div>
-    You have successfully saved a snippet!
-    </div>
-  )
+  return <div>You have successfully saved a snippet!</div>;
 }
 
 export default SaveModal;
diff --git a/client/src/components/SnippetDisplay/SnippetDisplay.jsx b/client/src/components/SnippetDisplay/SnippetDisplay.jsx
index 2bba1ca..548ff6f 100644
--- a/client/src/components/SnippetDisplay/SnippetDisplay.jsx
+++ b/client/src/components/SnippetDisplay/SnippetDisplay.jsx
@@ -1,30 +1,34 @@
 import React, { useState } from 'react';
-// import Snippet from
+
+//  importing child components
+import TagInput from '../../components/ui/TagInput/TagInput';
+
+//  importing external functionality
 import { CopyToClipboard } from 'react-copy-to-clipboard';
 import CodeMirror from '@uiw/react-codemirror';
 import styles from './SnippetDisplay.module.scss';
 import { langs } from '@uiw/codemirror-extensions-langs';
-import TagInput from '../../components/ui/TagInput/TagInput';
-import {Card, Button} from 'react-bootstrap';
+
+//  importing utils
+import { Card, Button } from 'react-bootstrap';
+
 const SnippetDisplay = ({ selectedSnippet, getSnippet }) => {
-  // indSnippet = this.props
-  // create delete method using fetch request
   let snippetTitle = selectedSnippet.title ? selectedSnippet.title : '';
-  let snippetLanguage = selectedSnippet.language ? selectedSnippet.language : '';
-  let snippetComments = selectedSnippet.comments ? selectedSnippet.comments : '';
-  let snippetStoredCode = selectedSnippet.storedCode ? selectedSnippet.storedCode : '';
+  let snippetLanguage = selectedSnippet.language
+    ? selectedSnippet.language
+    : '';
+  let snippetComments = selectedSnippet.comments
+    ? selectedSnippet.comments
+    : '';
+  let snippetStoredCode = selectedSnippet.storedCode
+    ? selectedSnippet.storedCode
+    : '';
   let snippetTagList = selectedSnippet.tags ? selectedSnippet.tags : [];
 
-  // create a state variable for each passed down state and the its setState function
-  // const [title, setTitle] = useState(snippetTitle);
-  // const [language, setLanguage] = useState(snippetLanguage);
-  // const [comments, setComments] = useState(snippetComments);
-  // const [storedCode, setStoredCode] = useState(snippetStoredCode);
-  // const [tagList, setTags] = useState(snippetTagList);
   const [editButtonState, setEditButtonState] = useState(false);
 
   const deleteSnippet = (id) => {
-    fetch (`http://localhost:3000/snippets?id=${id}`, {
+    fetch(`/snippets?id=${id}`, {
       method: 'DELETE',
     })
       .then((response) => {
@@ -33,13 +37,13 @@ const SnippetDisplay = ({ selectedSnippet, getSnippet }) => {
         }
       })
       .catch((err) => {
-        return ({
+        return {
           log: `SnippetDisiplay.deleteSnippet: Error: ${err}`,
           status: err.status || 500,
-          message: 'There was an error deleting snippet.'
-        })
-      })
-  }
+          message: 'There was an error deleting snippet.',
+        };
+      });
+  };
 
   const editSnippet = (id) => {
     // const [oldState, setOldState] = React.useState([]);
@@ -50,55 +54,49 @@ const SnippetDisplay = ({ selectedSnippet, getSnippet }) => {
       comments: snippetComments,
       storedCode: snippetStoredCode,
       tags: snippetTagList,
-      language: snippetLanguage
+      language: snippetLanguage,
     };
     // within fetch request (post)
     // body: JSON.stringify(created object)
-    fetch (`/snippets?id=${id}`, {
+    fetch(`/snippets?id=${id}`, {
       method: 'PUT',
-      body: JSON.stringify(updatedSnippet)
+      body: JSON.stringify(updatedSnippet),
     })
       .then((response) => {
         response.json();
         getSnippet();
       })
       .catch((err) => {
-        return ({
+        return {
           log: `SnippetDisplay.editSnippet: Error: ${err}`,
           status: err.status || 500,
-          message: 'There was an error editing code snippet.'
-        });
+          message: 'There was an error editing code snippet.',
+        };
       });
   };
-  // copy code state 
+  // copy code state
   const [copied, setCopied] = useState(false);
 
-    
   const checkEdit = () => {
     if (editButtonState === true) {
-      return(
+      return (
         <div className={styles.entireSnippetDisplay}>
           <div className='displayContainer'>
-
             <span className='title'> Title: </span>
             <input
               defaultValue={snippetTitle}
               className='titleEdit'
               onChange={(e) => {
                 snippetTitle = e.target.value;
-              }}
-            >
-            </input>
+              }}></input>
 
-            <span className='language'> Language: </span>  
+            <span className='language'> Language: </span>
             <input
               defaultValue={snippetLanguage}
               className='languageEdit'
               onChange={(e) => {
                 snippetLanguage = e.target.value;
-              }}
-            >
-            </input>
+              }}></input>
 
             <span className='comments'> Comments: </span>
             <input
@@ -106,11 +104,13 @@ const SnippetDisplay = ({ selectedSnippet, getSnippet }) => {
               className='commentsEdit'
               onChange={(e) => {
                 snippetComments = e.target.value;
-              }}
-            >
-            </input>
+              }}></input>
 
-            <TagInput className='tags' onChange={(e)=>snippetTagList = e} tags={snippetTagList} />
+            <TagInput
+              className='tags'
+              onChange={(e) => (snippetTagList = e)}
+              tags={snippetTagList}
+            />
             {/* <input className="tagsEdit" onChange={(e) => {setTags}}> <span> Title: </span> {snippetTagList}</input> */}
           </div>
 
@@ -121,26 +121,22 @@ const SnippetDisplay = ({ selectedSnippet, getSnippet }) => {
             value={snippetStoredCode}
             extensions={[langs.tsx()]}
             //   placeholder={'const sayHi = () => {\n  console.log(\'Hello World!)\n}'}
-            onChange={(e) => snippetStoredCode = (e)}
-          >
+            onChange={(e) => (snippetStoredCode = e)}>
             <CopyToClipboard
               text={snippetStoredCode}
-              onCopy={() => setCopied(true)}
-            >
+              onCopy={() => setCopied(true)}>
               <Button className={styles.addButton}> Copy Code Snippet </Button>
             </CopyToClipboard>
           </CodeMirror>
 
-
           <Button
-            className="saveEditButton"
+            className='saveEditButton'
             onClick={() => {
               editSnippet(selectedSnippet.id);
               setEditButtonState(false);
             }}>
-                Save Edit
+            Save Edit
           </Button>
-
         </div>
       );
     }
@@ -148,12 +144,20 @@ const SnippetDisplay = ({ selectedSnippet, getSnippet }) => {
     if (editButtonState === false) {
       return (
         <div className={styles.entireSnippetDisplay}>
-
-          <div className="displayContainer"> 
-            <p className="title"> <span className='title'> Title: </span> {snippetTitle}</p>
-            <p className="language"> <span> Language: </span> {snippetLanguage}</p>
-            <p className="comments"> <span> Comments: </span> {snippetComments}</p>
-            <TagInput className='tags' tags={snippetTagList}/>
+          <div className='displayContainer'>
+            <p className='title'>
+              {' '}
+              <span className='title'> Title: </span> {snippetTitle}
+            </p>
+            <p className='language'>
+              {' '}
+              <span> Language: </span> {snippetLanguage}
+            </p>
+            <p className='comments'>
+              {' '}
+              <span> Comments: </span> {snippetComments}
+            </p>
+            <TagInput className='tags' tags={snippetTagList} />
             {/* <div className="tagContainer">{renderTags()}</div> */}
           </div>
 
@@ -167,43 +171,42 @@ const SnippetDisplay = ({ selectedSnippet, getSnippet }) => {
             options={{
               readOnly: true,
             }}
-            onChange={(e) => snippetStoredCode = (e)}
-          >
+            onChange={(e) => (snippetStoredCode = e)}>
             <CopyToClipboard
               text={snippetStoredCode}
-              onCopy={() => setCopied(true)}
-            >
+              onCopy={() => setCopied(true)}>
               <Button className='copyButton'> Copy Code Snippet </Button>
             </CopyToClipboard>
           </CodeMirror>
-
         </div>
       );
     }
   };
-    
+
   return (
-    <> 
-    <Card className={styles.card}>
-    {checkEdit()} 
-
-      <div className={styles.buttonDiv}>
-        <Button
-          className="deleteButton"
-          onClick={() => {deleteSnippet(selectedSnippet.id)}}>
-                Delete Snippet 
-        </Button>
-        <Button
-          className="editButton"
-          onClick={() => {
-            // editSnippet(selectedSnippet.id);
-            setEditButtonState(true);
-          }}>
-                Edit Snippet 
-        </Button>
-      </div>  
+    <React.Fragment>
+      <Card className={styles.card}>
+        {checkEdit()}
+
+        <div className={styles.buttonDiv}>
+          <Button
+            className='deleteButton'
+            onClick={() => {
+              deleteSnippet(selectedSnippet.id);
+            }}>
+            Delete Snippet
+          </Button>
+          <Button
+            className='editButton'
+            onClick={() => {
+              // editSnippet(selectedSnippet.id);
+              setEditButtonState(true);
+            }}>
+            Edit Snippet
+          </Button>
+        </div>
       </Card>
-    </>
+    </React.Fragment>
   );
 };
 
diff --git a/client/src/components/ui/TagInput/TagInput.jsx b/client/src/components/ui/TagInput/TagInput.jsx
index 44f4a78..67a5a6a 100644
--- a/client/src/components/ui/TagInput/TagInput.jsx
+++ b/client/src/components/ui/TagInput/TagInput.jsx
@@ -1,9 +1,14 @@
-import React, { useEffect } from 'react';
-import { TAGS } from '../../../data/data';
-import styles from './TagInput.module.scss';
+import React, { useState, useEffect } from 'react';
+
+//  importing utils
 import { WithContext as ReactTags } from 'react-tag-input';
 import PropTypes from 'prop-types';
 
+//  importing data
+import { TAGS } from '../../../data/data';
+
+//  importing styles
+
 const suggestions = TAGS.map((tag) => {
   return {
     id: tag,
@@ -19,8 +24,7 @@ const KeyCodes = {
 const delimiters = [KeyCodes.comma, KeyCodes.enter];
 
 const TagInput = (props) => {
-
-  const [tags, setTags] = React.useState([]);
+  const [tags, setTags] = useState([]);
 
   const handleDelete = (i) => {
     setTags(tags.filter((tag, index) => index !== i));
diff --git a/client/src/components/ui/TagInput/TagInput.module.scss b/client/src/components/ui/TagInput/TagInput.module.scss
deleted file mode 100644
index e69de29..0000000
diff --git a/client/src/containers/MainContainer/MainContainer.jsx b/client/src/containers/MainContainer/MainContainer.jsx
index 2954daf..73950ba 100644
--- a/client/src/containers/MainContainer/MainContainer.jsx
+++ b/client/src/containers/MainContainer/MainContainer.jsx
@@ -1,14 +1,17 @@
 import React from 'react';
+
+//  importing  child components
 import Sidebar from '../Sidebar/Sidebar.jsx';
-import styles from './MainContainer.module.scss';
 
+//  importing styles
+import styles from './MainContainer.module.scss';
 
-const MainContainer = () =>{
-    return (
+const MainContainer = () => {
+  return (
     <div className={styles.container}>
       <Sidebar />
     </div>
-    );
-}
+  );
+};
 
-export default MainContainer;
\ No newline at end of file
+export default MainContainer;
diff --git a/client/src/containers/Sidebar/Sidebar.jsx b/client/src/containers/Sidebar/Sidebar.jsx
index 7177f59..29125c7 100644
--- a/client/src/containers/Sidebar/Sidebar.jsx
+++ b/client/src/containers/Sidebar/Sidebar.jsx
@@ -1,15 +1,23 @@
 import React, { useState, useEffect } from 'react';
+
+//  importing child components
 import SnippetDisplay from '../../components/SnippetDisplay/SnippetDisplay.jsx';
 import AddSnippet from '../../components/AddSnippet/AddSnippet.jsx';
-import styles from './Sidebar.module.scss';
 import SnippetsRadioList from './SnippetsRadioList/SnippetsRadioList.jsx';
+
+//  importing utils
 import { Card, Spinner } from 'react-bootstrap';
+
+//  importing styles
+import styles from './Sidebar.module.scss';
+
+//  importing assets
 import arrow from '../../assets/arrow.png';
 import img from '../../assets/star nose mole.jpeg';
 
 const Sidebar = () => {
   const [snippets, setSnippets] = useState([]);
-  const [selectedSnippet, setSelectedSnippet] = useState({});
+  const [selectedSnippet, setSelectedSnippet] = useState();
   const [openModal, setOpenModal] = useState(false);
   const [collapse, setCollapse] = useState(false);
   const [loading, setLoading] = useState(true);
@@ -17,49 +25,43 @@ const Sidebar = () => {
   // getSnippet func
   const getSnippet = () => {
     setLoading(true);
-    fetch('http://localhost:3000/snippets')
+    fetch('/snippets')
       .then((res) => res.json())
       .then((res) => {
-        console.log('res', res);
-
         // moved setSnippets to outside of for loop so we arent re-rendering each time a snippet is added to state
         const newSnippetArray = [];
-        for (const snippet of res.snippets) newSnippetArray.push(snippet);
+
+        for (const snippet of res.snippets) {
+          newSnippetArray.push(snippet);
+        }
 
         setSnippets(newSnippetArray);
         setLoading(false);
       })
       .catch((error) => console.log('Get request failed', error));
   };
-
-  // renderTags function
-  const renderTabs = () => {
-    const tabs = [];
-
-    for (let i = 0; i < snippets.length; i++) {
-      tabs.push(<button className={styles.tab}>{snippets[i].title}</button>);
-    }
-
-    return tabs;
-  };
+  
+  useEffect(() => getSnippet(), []);
 
   // wrapper to send to our snippets radio list for updating selected snippet. probably not 100% needed, but want to be able to console log from Sidebar
   const setSelectedSnippetWrapper = (e) => {
     setSelectedSnippet(e);
   };
 
-  // get data from backend at first page load
-  useEffect(() => getSnippet(), []);
 
   const toggleSidebar = () => {
     setCollapse(() => !collapse);
   };
 
   return (
-    <>
+    <React.Fragment>
+      {/*----- SIDE BAR -----*/}
       <Card className={`pt-0 ${styles.sidebar} ${!collapse && styles.open}`}>
         <Card.Header>
           <h1>Code Snippets</h1>
+
+          {/* Changes the collapse state, which will render/unrender the sidebar*/}
+
           <button className={styles.toggleButton} onClick={toggleSidebar}>
             <img
               className={`${styles.arrow} ${!collapse && styles.arrowOpen}`}
@@ -68,16 +70,15 @@ const Sidebar = () => {
             />
           </button>
         </Card.Header>
+
+        {/* Renders the list of snippets fetched from DB */}
+
         <Card.Body className='px-0 pt-0'>
+          {/* Animation while app is fetching data from DB */}
           <div className={styles.cardBody}>
-            {/* render our snippet list, pass down snippets and function to update selectedSnippet */}
             {loading && (
               <div className='d-flex justify-content-center pt-3'>
-                <Spinner
-                  animation='border'
-                  role='status'
-                  variant='primary'
-                ></Spinner>
+                <Spinner animation='border' role='status' variant='primary' />
               </div>
             )}
             <SnippetsRadioList
@@ -86,32 +87,37 @@ const Sidebar = () => {
             />
           </div>
         </Card.Body>
-        
-        <h2 className={styles.imgHeader} style={{ display:'inline-block'}}>Click me to add a new snippet!</h2>
+
+        <h2 className={styles.imgHeader} style={{ display: 'inline-block' }}>
+          Click me to add a new snippet!
+        </h2>
         <button
           className={styles.addButton}
           onClick={() => {
             setOpenModal(true);
-          }}
-        >
-          <img src={img} alt="img" className={styles.img}/>
+          }}>
+          <img src={img} alt='img' className={styles.img} />
         </button>
-
       </Card>
+
+      {/*----- ADD SNIPPET MODAL -----*/}
+
       {openModal && <AddSnippet closeModal={setOpenModal} />}
+
+      {/*----- SNIPPET DISPLAY -----*/}
+
       <div
         className={`${styles.snippetDisplay} ${
           !collapse && styles.snippetDisplayOpen
-        }`}
-      >
-        {snippets && (
+        }`}>
+        {selectedSnippet && (
           <SnippetDisplay
             selectedSnippet={selectedSnippet}
             getSnippet={getSnippet}
           />
         )}
       </div>
-    </>
+    </React.Fragment>
   );
 };
 
diff --git a/client/src/containers/Sidebar/SnippetsRadioList/SnippetsRadioList.jsx b/client/src/containers/Sidebar/SnippetsRadioList/SnippetsRadioList.jsx
index 5fae115..6a9a805 100644
--- a/client/src/containers/Sidebar/SnippetsRadioList/SnippetsRadioList.jsx
+++ b/client/src/containers/Sidebar/SnippetsRadioList/SnippetsRadioList.jsx
@@ -1,6 +1,10 @@
+import React, { Fragment } from 'react';
+
+//  importing utils
 import PropTypes from 'prop-types';
+
+//  importing styles
 import styles from './SnippetsRadioList.module.scss';
-import { Fragment } from 'react';
 
 function SnippetsRadioList(props) {
   // call passed in function on changed button, should find a way to do this without having to iterate through snippet array. store the snippet on the input itself somehow?
@@ -16,59 +20,40 @@ function SnippetsRadioList(props) {
 
   if (props.snippets) {
     props.snippets.forEach((el, i) => {
-      const currButton =
-        i === 0 ? (
-          <Fragment key={i}>
-            <input
-              name='snippetList'
-              type='radio'
-              id={`snippet-input-${i}`}
-              value={el.id}
-              defaultChecked
-              key={`snippet-tag-${i}`}
-            />
-            <label htmlFor={`snippet-input-${i}`} key={`snippet-label-${i}`}>
-              <div className={styles.labelHeader}>
-                <h6>{el.title} </h6>
-                <span>{el.language}</span>
-              </div>
-              <p className='text-truncate'>{el.storedCode}</p>
-            </label>
-            <hr />
-          </Fragment>
-        ) : (
-          <Fragment key={i}>
-            <input
-              name='snippetList'
-              type='radio'
-              id={`snippet-input-${i}`}
-              value={el.id}
-              key={i}
-            />
-            <label htmlFor={`snippet-input-${i}`} key={`snippet-label-${i}`}>
-              <div className={styles.labelHeader}>
-                <h6>{el.title} </h6>
-                <span>{el.language}</span>
-              </div>
-              <p className='text-truncate'>{el.storedCode}</p>
-            </label>
-            <hr />
-          </Fragment>
-        );
+      const currButton = (
+        <Fragment key={i}>
+          <input
+            name='snippetList'
+            type='radio'
+            id={`snippet-input-${i}`}
+            value={el.id}
+            key={i}
+          />
+          <label htmlFor={`snippet-input-${i}`} key={`snippet-label-${i}`}>
+            <div className={styles.labelHeader}>
+              <h6>{el.title} </h6>
+              <span>{el.language}</span>
+            </div>
+            <p className='text-truncate'>{el.storedCode}</p>
+          </label>
+          <hr />
+        </Fragment>
+      );
 
       toggleButtons.push(currButton);
     });
   }
 
   return (
-    <>
+    <React.Fragment>
       <div
         className={`${styles.snippetGroup}`}
-        onChange={(e) => onChangeValue(e)}
-      >
+        onChange={(e) => {
+          onChangeValue(e);
+        }}>
         {toggleButtons}
       </div>
-    </>
+    </React.Fragment>
   );
 }
 
diff --git a/server/server.js b/server/server.js
index 855cf32..36651a4 100644
--- a/server/server.js
+++ b/server/server.js
@@ -1,4 +1,3 @@
-const path = require('path');
 const express = require('express');
 const app = express();
 const mongoose = require('mongoose');