Sorting by tags, plus enhanced styling and edit protection when editing mode turned off

client/src/components/SnippetDisplay/SnippetDisplay.jsx

@@ -20,7 +20,7 @@ const SnippetDisplay = ({ selectedSnippet, getSnippet }) => {
     language: '',
     comments: '',
     storedCode: '',
-    tags: [],
+    tags: []
   };
 
   const [copied, setCopied] = useState(false);
@@ -40,7 +40,7 @@ const SnippetDisplay = ({ selectedSnippet, getSnippet }) => {
 
   const deleteSnippet = (snippetId) => {
     fetch('/snippets?' + new URLSearchParams({ snippetId }), {
-      method: 'DELETE',
+      method: 'DELETE'
     })
       .then((response) => {
         if (response.ok) {
@@ -52,7 +52,7 @@ const SnippetDisplay = ({ selectedSnippet, getSnippet }) => {
         return {
           log: `SnippetDisiplay.deleteSnippet: Error: ${err}`,
           status: err.status,
-          message: 'There was an error deleting snippet.',
+          message: 'There was an error deleting snippet.'
         };
       });
   };
@@ -61,7 +61,7 @@ const SnippetDisplay = ({ selectedSnippet, getSnippet }) => {
     fetch(`/snippets?${new URLSearchParams({ snippetId })}`, {
       method: 'PUT',
       headers: { 'Content-type': 'application/json' },
-      body: JSON.stringify(currentDisplay),
+      body: JSON.stringify(currentDisplay)
     })
       .then((response) => {
         //Are we using this response anywhere? IF not, delete this.
@@ -76,63 +76,69 @@ const SnippetDisplay = ({ selectedSnippet, getSnippet }) => {
         return {
           log: `SnippetDisplay.editSnippet: Error: ${err}`,
           status: err.status,
-          message: 'There was an error editing code snippet.',
+          message: 'There was an error editing code snippet.'
         };
       });
   };
 
   const displayContent = (
     <div className={styles.entireSnippetDisplay}>
-      <div className='displayContainer'>
+      <div className="displayContainer">
         <div className={styles.displayRow}>
-          <div className='aspect-entry'>
-            <span className='title'> Title: </span>
+          <div className="aspect-entry">
+            <span className="title"> Title: </span>
             <input
+              readOnly={!editButtonState}
               defaultValue={currentDisplay.title}
-              className='titleEdit'
+              className="titleEdit"
               onChange={(e) => {
                 if (editButtonState) {
                   setCurrentDisplay({
                     ...currentDisplay,
-                    title: e.target.value,
+                    title: e.target.value
                   });
                 }
-              }}></input>
+              }}
+            ></input>
           </div>
-          <div className='aspect-entry'>
-            <span className='language'> Language: </span>
+          <div className="aspect-entry">
+            <span className="language"> Language: </span>
             <input
+              readOnly={!editButtonState}
               defaultValue={currentDisplay.language}
-              className='languageEdit'
+              className="languageEdit"
               onChange={(e) => {
                 if (editButtonState) {
                   setCurrentDisplay({
                     ...currentDisplay,
-                    language: e.target.value,
+                    language: e.target.value
                   });
                 }
-              }}></input>
+              }}
+            ></input>
           </div>
         </div>
         <div className={styles.displayRow}>
-          <div className='aspect-entry'>
-            <span className='comments'> Comments: </span>
+          <div className="aspect-entry">
+            <span className="comments"> Comments: </span>
             <input
+              readOnly={!editButtonState}
               defaultValue={currentDisplay.comments}
-              className='commentsEdit'
+              className="commentsEdit"
               onChange={(e) => {
                 if (editButtonState) {
                   setCurrentDisplay({
                     ...currentDisplay,
-                    comments: e.target.value,
+                    comments: e.target.value
                   });
                 }
-              }}></input>
+              }}
+            ></input>
           </div>
         </div>
 
         <TagInput
-          className='tags display-row'
+          className="tags display-row"
           onChange={(e) => {
             if (editButtonState) {
               setCurrentDisplay({ ...currentDisplay, tags: e });
@@ -145,15 +151,17 @@ const SnippetDisplay = ({ selectedSnippet, getSnippet }) => {
       </div>
 
       <CodeMirror
+        readOnly={!editButtonState}
         className={styles.editor}
-        height='500px'
-        id='storedCode'
+        height="500px"
+        id="storedCode"
         value={currentDisplay.storedCode}
         extensions={[langs.tsx()]}
         //   placeholder={'const sayHi = () => {\n  console.log(\'Hello World!)\n}'}
         onChange={(e) => {
           setCurrentDisplay({ ...currentDisplay, storedCode: e });
-        }}>
+        }}
+      >
         <CopyToClipboard text={currentDisplay.storedCode}>
           <Button className={styles.addButton} onClick={handleCopy}>
             {' '}
@@ -167,35 +175,38 @@ const SnippetDisplay = ({ selectedSnippet, getSnippet }) => {
 
   return (
     <React.Fragment>
-      <Card className={styles.card} id='right'>
+      <Card className={styles.card} id="right">
         {displayContent}
 
         <div className={styles.buttonDiv}>
           <Button
-            className='deleteButton'
+            className="deleteButton"
             onClick={() => {
               deleteSnippet(selectedSnippet._id);
-            }}>
+            }}
+          >
             Delete Snippet
           </Button>
           <Button
-            className='editButton'
+            className="editButton"
             onClick={() => {
               //editSnippet(selectedSnippet.id);
               editButtonState
                 ? setEditButtonState(false)
                 : setEditButtonState(true);
-            }}>
+            }}
+          >
             {editButtonState ? 'Close Editor' : 'Edit Snippet'}
           </Button>
           <Button
             style={{ display: editButtonState ? 'flex' : 'none' }}
-            className='saveEditButton'
+            className="saveEditButton"
             onClick={() => {
               console.dir(selectedSnippet);
               editSnippet(selectedSnippet._id);
               setEditButtonState(false);
-            }}>
+            }}
+          >
             Save Edit
           </Button>
         </div>
@@ -206,6 +217,6 @@ const SnippetDisplay = ({ selectedSnippet, getSnippet }) => {
 
 SnippetDisplay.propTypes = {
   selectedSnippet: PropTypes.object,
-  getSnippet: PropTypes.func,
+  getSnippet: PropTypes.func
 };
 export default SnippetDisplay;

client/src/containers/Sidebar/Sidebar.jsx

@@ -24,6 +24,7 @@ const Sidebar = ({ handleLogin }) => {
   //Tags and selected tags
   const [userTags, setUserTags] = useState([]);
   const [selectedTags, setSelectedTags] = useState([]);
+  const [filteredSnippets, setFilteredSnippets] = useState([]);
 
   const [openModal, setOpenModal] = useState(false);
   const [collapse, setCollapse] = useState(false);
@@ -33,6 +34,10 @@ const Sidebar = ({ handleLogin }) => {
   useEffect(() => {
     getUserData();
   }, []);
+
+  useEffect(() => {
+    filterSnippetsByTags();
+  }, [snippets, selectedTags]);
   //Get all snippets stored under user's account
 
   const getUserData = () => {
@@ -50,17 +55,6 @@ const Sidebar = ({ handleLogin }) => {
       );
   };
 
-  // // renderTags function
-  // const renderTabs = () => {
-  //   const tabs = [];
-
-  //   for (let i = 0; i < snippets.length; i++) {
-  //     tabs.push(<button className={styles.tag}>{snippets[i].title}</button>);
-  //   }
-
-  //   return tabs;
-  // };
-
   // 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);
@@ -82,12 +76,22 @@ const Sidebar = ({ handleLogin }) => {
   };
 
   const toggleDisplayType = (event) => {
-    console.log(event.target.value);
     setDisplayType(event.target.value);
   };
 
+  const filterSnippetsByTags = () => {
+    const snippetSubset = snippets.filter((sn) => {
+      for (let i = 0; i < [...sn.tags, sn.lanuage].length; i++) {
+        if (selectedTags.includes([...sn.tags, sn.lanuage][i])) return true;
+      }
+      return false;
+    });
+
+    setFilteredSnippets(snippetSubset);
+  };
+
   const snippetsDisplay = (
-    <Card.Body className="px-0 pt-0">
+    <Card.Body className={`px-0 pt-0 ${styles.cardBodyContent}`}>
       {/* Animation while app is fetching data from DB */}
       <div className={styles.cardBody}>
         {loading && (
@@ -100,6 +104,7 @@ const Sidebar = ({ handleLogin }) => {
           </div>
         )}
         <SnippetsRadioList
+          listType="fullList"
           snippets={snippets}
           setSelectedSnippet={setSelectedSnippetWrapper}
         />
@@ -108,9 +113,9 @@ const Sidebar = ({ handleLogin }) => {
   );
 
   const tagsDisplay = (
-    <Card.Body className="px-0 pt-0">
+    <Card.Body className={`px-0 pt-0 ${styles.cardBodyContent}`}>
       {/* Animation while app is fetching data from DB */}
-      <div className={styles.cardBody}>
+      <div>
         {loading && (
           <div className="d-flex justify-content-center pt-3">
             <Spinner
@@ -120,11 +125,24 @@ const Sidebar = ({ handleLogin }) => {
             ></Spinner>
           </div>
         )}
-        <TagsList
-          allTags={userTags}
-          selectedTags={selectedTags}
-          selectDeselectTag={selectDeselectTag}
-        />
+        <div className={styles.tagsSnippetsDisplayHolder}>
+          <div className={styles.tagsSnippetsDisplayBox}>
+            <TagsList
+              allTags={userTags}
+              selectedTags={selectedTags}
+              selectDeselectTag={selectDeselectTag}
+            />
+          </div>
+          <hr />
+          <div className={styles.tagsSnippetsDisplayBox}>
+            <SnippetsRadioList
+              className={styles.tagsSnippetsDisplayBox}
+              listType="filteredList"
+              snippets={filteredSnippets}
+              setSelectedSnippet={setSelectedSnippetWrapper}
+            />
+          </div>
+        </div>
       </div>
     </Card.Body>
   );

client/src/containers/Sidebar/Sidebar.module.scss

@@ -9,6 +9,19 @@
 //   border-color: black;
 // }
 
+.tagsSnippetsDisplayHolder {
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  max-height: 75vh;
+}
+
+.tagsSnippetsDisplayBox {
+  padding: 8px 16px;
+  overflow-y: auto;
+  max-height: 50%;
+}
+
 .displayTypeSelector {
   display: flex;
   justify-content: space-around;
@@ -34,9 +47,14 @@
   border: none !important;
 }
 
+.cardBodyContent {
+  //height: min-content;
+  overflow: hidden;
+}
 .sidebar {
   width: 300px;
-  height: inherit;
+  //height: inherit;
+  //max-height: 75vh;
   position: absolute;
   left: -250px;
   top: 0;
@@ -69,6 +87,8 @@
 
   .cardBody {
     padding: 8px 16px;
+    overflow-y: auto;
+    max-height: 75vh;
   }
 }
 

client/src/scss/_global.scss

@@ -1,3 +1,18 @@
+*::-webkit-scrollbar {
+  color: #232024;
+}
+*::-webkit-scrollbar-track {
+  background: transparentize(#232024, 1);
+}
+
+*::-webkit-scrollbar-corner {
+  background: transparentize(#232024, 1);
+}
+
+*::-webkit-scrollbar-thumb {
+  background: whitesmoke;
+}
+
 body {
   background: url(https://wallpaperaccess.com/full/266479.png) no-repeat center
     center fixed;