Minor UI improvements.

README.md

@@ -42,11 +42,11 @@ The objective is to have a self-hosted place to keep useful links in one place,
 
 2. Clone this repository.
 
-4. [Optional] If you want to use this app across the network change `REACT_APP_API_HOST` in docker-compose.yml with the computer IP address.
+4. [Optional] If you want to use this app across the network change `REACT_APP_API_HOST` in docker-compose.yml with the computer IP and port.
 
 3. head to the main folder and run `docker compose up`.
 
-### Manual Setup (Linux/MacOS)
+### Manual Setup
 (Unstable for now.)
 
 1. Make sure your MongoDB database and collection is up and running.

api/Dockerfile

@@ -19,7 +19,7 @@ RUN apk add --no-cache \
 COPY . .
 RUN npm ci && mkdir -p /media
 
-# The collowing command fails when attempting to chown the node_modules directory.
+# The following command fails when attempting to chown the node_modules directory.
 # Running it in its own layer allows it to modify the volume.
 RUN chown -R node:node /home/node /media
 

api/server.js

@@ -153,4 +153,3 @@ app.listen(port, () => {
   console.log(`Success! running on port ${port}.`);
   client.connect();
 });
-

src/App.js

@@ -136,8 +136,6 @@ function App() {
           <p className="results">{numberOfResults} Bookmarks found</p>
         ) : null}
 
-        {numberOfResults === 0 ? <NoResults /> : null}
-
         {filterBox ? (
           <Filters
             filterCheckbox={filterCheckbox}
@@ -148,6 +146,8 @@ function App() {
           />
         ) : null}
 
+        {numberOfResults === 0 ? <NoResults /> : null}
+
         {newBox ? (
           <AddItem
             SetLoader={SetLoader}

src/componets/Filters.js

@@ -41,7 +41,7 @@ const Filters = ({
               <label>
                 <input
                   name="sort"
-                  checked={radio == 1}
+                  checked={radio.toString() === '1'}
                   onChange={handleRadio}
                   type="radio"
                   value={1}
@@ -51,7 +51,7 @@ const Filters = ({
               <label>
                 <input
                   name="sort"
-                  checked={radio == 2}
+                  checked={radio.toString() === '2'}
                   onChange={handleRadio}
                   type="radio"
                   value={2}
@@ -61,7 +61,7 @@ const Filters = ({
               <label>
                 <input
                   name="sort"
-                  checked={radio == 3}
+                  checked={radio.toString() === '3'}
                   onChange={handleRadio}
                   type="radio"
                   value={3}
@@ -71,7 +71,7 @@ const Filters = ({
               <label>
                 <input
                   name="sort"
-                  checked={radio == 4}
+                  checked={radio.toString() === '4'}
                   onChange={handleRadio}
                   type="radio"
                   value={4}
@@ -81,7 +81,7 @@ const Filters = ({
               <label>
                 <input
                   name="sort"
-                  checked={radio == 5}
+                  checked={radio.toString() === '5'}
                   onChange={handleRadio}
                   type="radio"
                   value={5}
@@ -91,7 +91,7 @@ const Filters = ({
               <label>
                 <input
                   name="sort"
-                  checked={radio == 6}
+                  checked={radio.toString() === '6'}
                   onChange={handleRadio}
                   type="radio"
                   value={6}

src/componets/SideBar.js

@@ -31,17 +31,16 @@ const SideBar = ({ tags, handleToggleSidebar, toggle }) => {
       </SidebarHeader>
       <SidebarContent className="sidebar-content">
         <Menu iconShape="circle">
-          <MenuItem>
+          <MenuItem icon={<h2 className="sidebar-icon">&#xf015;</h2>}>
             <Link to="/">
-              <h3>Show Everything</h3>
+              <h3 className="menu-item">All</h3>
             </Link>
           </MenuItem>
 
           <SubMenu
-            icon={<h2>#</h2>}
+            icon={<h2 className="sidebar-icon">&#xf02c;</h2>}
             suffix={<span className="badge">{sortedTags.length}</span>}
-            defaultOpen={true}
+            title={<h3 className="menu-item">Tags</h3>}
-            title="Tags"
           >
             {sortedTags.map((e, i) => {
               const path = `/tags/${e}`;

src/modules/sortList.js

@@ -1,14 +1,14 @@
 const sortList = (data, sortBy) => {
   let sortedData = data;
-  if (sortBy == 1) {
+  if (sortBy.toString() === '1') {
     sortedData.sort((a, b) => {
       return new Date(b.date) - new Date(a.date);
     });
-  } else if (sortBy == 2) {
+  } else if (sortBy.toString() === '2') {
     sortedData.sort((a, b) => {
       return new Date(a.date) - new Date(b.date);
     });
-  } else if (sortBy == 3) {
+  } else if (sortBy.toString() === '3') {
     sortedData.sort((a, b) => {
       const A = a.name.toLowerCase(),
         B = b.name.toLowerCase();
@@ -16,7 +16,7 @@ const sortList = (data, sortBy) => {
       if (A > B) return 1;
       return 0;
     });
-  } else if (sortBy == 4) {
+  } else if (sortBy.toString() === '4') {
     sortedData.sort((a, b) => {
       const A = a.name.toLowerCase(),
         B = b.name.toLowerCase();
@@ -24,7 +24,7 @@ const sortList = (data, sortBy) => {
       if (A < B) return 1;
       return 0;
     });
-  } else if (sortBy == 5) {
+  } else if (sortBy.toString() === '5') {
     sortedData.sort((a, b) => {
       const A = a.title.toLowerCase(),
         B = b.title.toLowerCase();
@@ -32,7 +32,7 @@ const sortList = (data, sortBy) => {
       if (A > B) return 1;
       return 0;
     });
-  } else if (sortBy == 6) {
+  } else if (sortBy.toString() === '6') {
     sortedData.sort((a, b) => {
       const A = a.title.toLowerCase(),
         B = b.title.toLowerCase();

src/styles/App.css

@@ -86,7 +86,7 @@ input:focus {
 }
 
 .results {
-  margin: 20px 20px 0px 5px;
+  margin: 20px 20px 0px 0px;
   display: inline-block;
 }
 

src/styles/List.css

@@ -19,7 +19,7 @@
   }
 
   .list-row {
-    margin-top: 20px;
+    margin-bottom: 20px;
     display: flex;
     justify-content: space-between;
     align-items: center;
@@ -47,7 +47,7 @@
   }
 
   .list-row {
-    margin-top: 20px;
+    margin-bottom: 20px;
     display: flex;
     flex-direction: column;
     justify-content: space-between;

src/styles/SideBar.css

@@ -30,3 +30,20 @@
   border-radius: 14px;
   background-color: rgb(52, 121, 181);
 }
+
+.sidebar-icon {
+  font-family: "Font Awesome 5 Free";
+  font-size: 1rem;
+}
+
+.menu-item {
+  color: rgb(255, 255, 255);
+}
+
+.menu-item:hover {
+  color: rgb(255, 255, 255);
+}
+
+.pro-inner-item {
+  margin-bottom: 10px;
+}