Working hide button on the modal

node_modules/.cache/.eslintcache

@@ -1 +1 @@
-[{"/home/seanedmunds/dev/home-page/src/index.js":"1","/home/seanedmunds/dev/home-page/src/search.js":"2","/home/seanedmunds/dev/home-page/src/themer.js":"3"},{"size":17989,"mtime":1639503841427,"results":"4","hashOfConfig":"5"},{"size":7513,"mtime":1639496882220,"results":"6","hashOfConfig":"5"},{"size":7478,"mtime":1639496786188,"results":"7","hashOfConfig":"5"},{"filePath":"8","messages":"9","errorCount":0,"fatalErrorCount":0,"warningCount":9,"fixableErrorCount":0,"fixableWarningCount":0,"source":null},"szjdbt",{"filePath":"10","messages":"11","errorCount":0,"fatalErrorCount":0,"warningCount":9,"fixableErrorCount":0,"fixableWarningCount":0,"source":null},{"filePath":"12","messages":"13","errorCount":0,"fatalErrorCount":0,"warningCount":1,"fixableErrorCount":0,"fixableWarningCount":0,"source":null},"/home/seanedmunds/dev/home-page/src/index.js",["14","15","16","17","18","19","20","21","22"],"/home/seanedmunds/dev/home-page/src/search.js",["23","24","25","26","27","28","29","30","31"],"/home/seanedmunds/dev/home-page/src/themer.js",["32"],{"ruleId":"33","severity":1,"message":"34","line":186,"column":11,"nodeType":"35","endLine":186,"endColumn":61},{"ruleId":"36","severity":1,"message":"37","line":384,"column":11,"nodeType":"38","messageId":"39","endLine":384,"endColumn":13},{"ruleId":"36","severity":1,"message":"37","line":387,"column":11,"nodeType":"38","messageId":"39","endLine":387,"endColumn":13},{"ruleId":"40","severity":1,"message":"41","line":391,"column":11,"nodeType":"42","messageId":"43","endLine":407,"endColumn":12},{"ruleId":"36","severity":1,"message":"37","line":410,"column":10,"nodeType":"38","messageId":"39","endLine":410,"endColumn":12},{"ruleId":"40","severity":1,"message":"41","line":482,"column":11,"nodeType":"42","messageId":"43","endLine":528,"endColumn":24},{"ruleId":"44","severity":1,"message":"45","line":530,"column":15,"nodeType":"46","messageId":"47","endLine":530,"endColumn":21},{"ruleId":"40","severity":1,"message":"41","line":531,"column":11,"nodeType":"42","messageId":"43","endLine":544,"endColumn":12},{"ruleId":"48","severity":1,"message":"49","line":572,"column":1,"nodeType":"50","messageId":"39","endLine":575,"endColumn":2},{"ruleId":"51","severity":1,"message":"52","line":15,"column":10,"nodeType":"46","messageId":"53","endLine":15,"endColumn":24},{"ruleId":"36","severity":1,"message":"37","line":20,"column":13,"nodeType":"38","messageId":"39","endLine":20,"endColumn":15},{"ruleId":"36","severity":1,"message":"37","line":23,"column":13,"nodeType":"38","messageId":"39","endLine":23,"endColumn":15},{"ruleId":"40","severity":1,"message":"41","line":27,"column":13,"nodeType":"42","messageId":"43","endLine":43,"endColumn":14},{"ruleId":"36","severity":1,"message":"37","line":46,"column":12,"nodeType":"38","messageId":"39","endLine":46,"endColumn":14},{"ruleId":"40","severity":1,"message":"41","line":118,"column":13,"nodeType":"42","messageId":"43","endLine":164,"endColumn":14},{"ruleId":"44","severity":1,"message":"45","line":166,"column":17,"nodeType":"46","messageId":"47","endLine":166,"endColumn":23},{"ruleId":"40","severity":1,"message":"41","line":167,"column":13,"nodeType":"42","messageId":"43","endLine":180,"endColumn":14},{"ruleId":"48","severity":1,"message":"49","line":208,"column":1,"nodeType":"50","messageId":"39","endLine":211,"endColumn":2},{"ruleId":"40","severity":1,"message":"41","line":44,"column":9,"nodeType":"42","messageId":"43","endLine":230,"endColumn":10},"jsx-a11y/anchor-is-valid","The href attribute requires a valid value to be accessible. Provide a valid, navigable address as the href value. If you cannot provide a valid href, but still need the element to resemble a link, use a button and change it with appropriate styles. Learn more: https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/HEAD/docs/rules/anchor-is-valid.md","JSXOpeningElement","eqeqeq","Expected '===' and instead saw '=='.","BinaryExpression","unexpected","default-case","Expected a default case.","SwitchStatement","missingDefaultCase","no-redeclare","'option' is already defined.","Identifier","redeclared","no-extend-native","String prototype is read only, properties should not be added.","AssignmentExpression","no-unused-vars","'handleKeyPress' is defined but never used.","unusedVar"]
+[{"/home/seanedmunds/dev/home-page/src/index.js":"1"},{"size":19454,"mtime":1639516153474,"results":"2","hashOfConfig":"3"},{"filePath":"4","messages":"5","errorCount":0,"fatalErrorCount":0,"warningCount":2,"fixableErrorCount":0,"fixableWarningCount":0,"source":null},"szjdbt","/home/seanedmunds/dev/home-page/src/index.js",["6","7"],{"ruleId":"8","severity":1,"message":"9","line":206,"column":11,"nodeType":"10","endLine":206,"endColumn":61},{"ruleId":"11","severity":1,"message":"12","line":607,"column":1,"nodeType":"13","messageId":"14","endLine":610,"endColumn":2},"jsx-a11y/anchor-is-valid","The href attribute requires a valid value to be accessible. Provide a valid, navigable address as the href value. If you cannot provide a valid href, but still need the element to resemble a link, use a button and change it with appropriate styles. Learn more: https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/HEAD/docs/rules/anchor-is-valid.md","JSXOpeningElement","no-extend-native","String prototype is read only, properties should not be added.","AssignmentExpression","unexpected"]

src/apps.json

@@ -1,6 +1,7 @@
 {
     "apps" : [
        {"name":"Deluge","url":"home.halfaperture.com/deluge","icon":"water","urlbase":"/Deluge","NSFW":"NSFW"},
+       {"name":"Gitea","url":"home.halfaperture.com/gitea","icon":"tea","urlbase":"/Gitea","NSFW":"SAFE"},
        {"name":"Grafana","url":"home.halfaperture.com/grafana","icon":"chart-areaspline-variant","urlbase":"/Grafana","NSFW":"SAFE"},
        {"name":"Guacamole","url":"home.halfaperture.com/guacamole","icon":"remote-desktop","urlbase":"/Guacamole","NSFW":"SAFE"},
        {"name":"Jackett","url":"home.halfaperture.com/jackett","icon":"tshirt-crew","urlbase":"/Jackett","NSFW":"NSFW"},
@@ -16,7 +17,7 @@
        {"name":"Radarr","url":"home.halfaperture.com/radarr","icon":"movie-open","urlbase":"/Radarr","NSFW":"NSFW"},
        {"name":"SABnzbd","url":"home.halfaperture.com/sabnzbd","icon":"download","urlbase":"/SABnzbd","NSFW":"NSFW"},
        {"name":"Sonarr","url":"home.halfaperture.com/sonarr","icon":"television-classic","urlbase":"/Sonarr","NSFW":"NSFW"},
-       {"name":"Tautulli","url":"home.halfaperture.com/stats","icon":"chart-bar","urlbase":"/Stats","NSFW":"SAFE"},
+       {"name":"Tautulli","url":"home.halfaperture.com/stats","icon":"chart-bar","urlbase":"/Stats","NSFW":"NSFW"},
        {"name":"uBooquity","url":"home.halfaperture.com/ubooquity","icon":"book-open-outline","urlbase":"/uBooquity","NSFW":"SAFE"},
        {"name":"Wiki","url":"home.halfaperture.com/wiki","icon":"wikipedia","urlbase":"/Wiki","NSFW":"SAFE"}
     ]

src/index.css

@@ -43,7 +43,7 @@ h1, h2{
 	font-weight: 300;
 	margin: 0;
 	margin-left: .5em;
-	margin-right: 5em;
+	margin-right: .5em;
 	padding: 0;
 	text-align: left;
 }
@@ -154,6 +154,7 @@ a:hover #app-address{
 	z-index: 1;
 	position: absolute;
 	text-align: center;
+	color: red;
 }
 .keyword:focus:not(:placeholder-shown) + .Input-label{
 	visibility: visible;

src/index.js

@@ -1,7 +1,6 @@
 import React from 'react';
 import { useState, useEffect } from 'react';
 import ReactDOM from 'react-dom';
-//import { unstable_createPortal } from 'react-dom';
 import './index.css';
 
 const setValueFromLocalStorage = property => {
@@ -22,6 +21,7 @@ const setValue = (property, value) => {
 
 function Homepage() {
   setTheme();
+  
   return (
     <main id="container" className="fade">
         <div>
@@ -53,7 +53,7 @@ function Search() {
   return (
     <section id="search">
       <div className="abackground">
-        <input name="keywords" type="text" className="keyword" id="keywords" size="50" spellCheck="true" placeholder="" /*onFocus={this.placeholder = ""} onBlur={this.placeholder = ''}*/ autoComplete="off" autoFocus={true} onKeyUp={handleKeyPress}/>
+        <input name="keywords" type="text" className="keyword" id="keywords" size="50" spellCheck="true" placeholder="" autoComplete="off" autoFocus={true} onKeyUp={handleKeyPress}/>
         <label id="searchType" className="Input-label">Google search</label>
       </div>
     </section>
@@ -78,6 +78,9 @@ function Applications() {
   let appList = getApps();
   var items = [];
   for (var i = 0; i < appList.apps.length; i++) {
+    var safe = appList.apps[i].NSFW;
+    var NSFWEnabled = localStorage.getItem("contenttype");
+    if (safe === "SAFE") {
       items.push(
         <App
           key={i}
@@ -87,6 +90,20 @@ function Applications() {
           NSFW={appList.apps[i].NSFW}
         />
       );
+    } else if (safe === "NSFW" && NSFWEnabled) {
+      items.push(
+        <App
+          key={i}
+          name={appList.apps[i].name}
+          url={appList.apps[i].url}
+          icon={appList.apps[i].icon}
+          NSFW={appList.apps[i].NSFW}
+        />
+      );
+    } else {
+      
+    }
+    
   }
   return (
     <section id="apps">
@@ -99,12 +116,13 @@ function Applications() {
 }
 
 function App(props) {
+  
     let classNameType = props.NSFW + "-content";
     let hrefUrl = "https://" + props.url;
     let iconName = "mdi-" + props.icon;
     return (
-    <div>
+      <div className={classNameType}>
-      <a href={hrefUrl} className={classNameType}>
+        <a href={hrefUrl}>
           <div className="apps_item">
             <div className="apps_icon">
               <span className="iconify icon" data-icon={iconName}></span>
@@ -170,6 +188,8 @@ function LinkItem(props) {
 function ModalMenu() {
   var providers = getProviders();
   var items = [];
+  var isChecked = localStorage.getItem("contenttype");
+  console.log(localStorage.getItem("contenttype"));
   for (var i = 0; i < providers.providers.length; i++) {
     items.push(
       <Provider 
@@ -226,14 +246,32 @@ function ModalMenu() {
         <header id="modal-footer">
           <a href="https://github.com/jeroenpardon/"><span className="iconify" data-icon="mdi-github-box"></span></a>
           <a href="https://materialdesignicons.com/"><span className="iconify" data-icon="mdi-material-design"></span></a>
-          <div className="sneaky"><input type="checkbox" id="contenttype" onChange="nsfw(this)"></input>
+          <HideButton 
-          <label for="contenttype"><span className="iconify" data-icon="mdi-domino-mask"></span></label></div>
+            checked = {isChecked}
+          />
         </header>
       </div>
     </section>
   );
 }
 
+function HideButton(props) {
+  console.log(props.checked);
+  if(props.checked === "true") {
+    console.log("icon should be grey");
+    return (
+      <div className="sneaky"><input type="checkbox" id="contenttype" onChange={udpateDisplayedItems} defaultChecked={true}></input>
+      <label for="contenttype"><span className="iconify" data-icon="mdi-domino-mask"></span></label></div>
+    );
+  } else {
+    console.log("icon should be white");
+    return (
+      <div className="sneaky"><input type="checkbox" id="contenttype" onChange={udpateDisplayedItems} defaultChecked={false}></input>
+      <label for="contenttype"><span className="iconify" data-icon="mdi-domino-mask"></span></label></div>
+    );
+  }
+}
+
 function Provider(props) {
   return (
     <tr>
@@ -244,6 +282,7 @@ function Provider(props) {
 }
 
 function ModalInit() {
+  setDisplayedItems();
   return (
     <div id="modal_init">
       <a className="btn" href="#modal">
@@ -345,14 +384,12 @@ function getThemes() {
   let themes = require('./themes.json');
   return themes;
 }
-
 function updateTheme(e) {
   var themes = getThemes();
   var themeName = e.target.innerHTML.toLowerCase();
   var index = themes.themes.findIndex(function(item, i){
-    return item.name === themeName
+    return item.name === themeName;
   });
-  console.log(themes.themes[index]);
   localStorage.setItem("image-background", themes.themes[index].imagebackground);
   localStorage.setItem("color-background", themes.themes[index].colorbackground);
   localStorage.setItem("color-search-background", themes.themes[index].colorserachbackground);
@@ -363,7 +400,6 @@ function updateTheme(e) {
   //document.documentElement.style.setProperty(prop, `var(--${themeName}${prop.substring(10)})`);
   setTheme();
 }
-
 function setTheme() {
   setValueFromLocalStorage('image-background');
   setValueFromLocalStorage('color-background');
@@ -373,7 +409,6 @@ function setTheme() {
   setValueFromLocalStorage('color-border');
   setValueFromLocalStorage('content-display');
 }
-
 function handleKeyPress(e) {
   var sindex = 0;
   var cycle = false;
@@ -381,10 +416,10 @@ function handleKeyPress(e) {
   var text = e.target.value.replaceAll("+", "%2B");
   var option = text.substr(1, text.indexOf(' ') - 1) || text.substr(1);
   var subtext = text.substr(2 + option.length);
-  if (key == 13) { // Search functions
+  if (key === 13) { // Search functions
       search(text);
   }
-  if (key == 9) { // Tab Completion Functions
+  if (key === 9) { // Tab Completion Functions
       e.preventDefault();
       e.stopPropagation();
       if (text[0] === ';') {
@@ -404,17 +439,18 @@ function handleKeyPress(e) {
                       }
                   }
                   break;
+                default :
+                  break;
           }
       }
   }
-  if(key == 32){ //Space to go to search
+  if(key === 32){ //Space to go to search
-updateLabel(text);
+  updateLabel(text);
   }
   sindex = 0;
   cycle = false;
   updateLabel(text);
 }
-
 function updateLabel(text) {
   var option = text.substr(1, text.indexOf(' ') - 1) || text.substr(1);
   if (text[0] === '/') {
@@ -473,12 +509,11 @@ function updateLabel(text) {
   document.getElementById("searchType").innerHTML = "Google search";
   }
 }
-
 function search(text) {
-  var option = text.substr(1, text.indexOf(' ') - 1) || text.substr(1);
-  var subtext = text.substr(2 + option.length);
   if (text[0] === '/') {
       if (text.indexOf(' ') > -1) {
+        let option = text.substr(1, text.indexOf(' ') - 1) || text.substr(1);
+        var subtext = text.substr(2 + option.length);
           switch (option) {
               case "am":
                   window.location = "https://www.allmusic.com/search/all/" + subtext;
@@ -525,9 +560,11 @@ function search(text) {
               case "rt":
                   window.location = "https://www.rottentomatoes.com/search?search=" + subtext;
                   break;
+              default :
+                  break;
             }
       } else {
-          var option = text.substr(1);
+          let option = text.substr(1);
           switch (option) {
               case "d":
                   window.location = "https://www.duckduckgo.com";
@@ -541,6 +578,8 @@ function search(text) {
               case "s":
                   window.location = "https://open.spotify.com";
                   break;
+              default :
+                  break;
           }
       }
   } else if (validURL(text)) {
@@ -552,8 +591,6 @@ function search(text) {
       window.location = "https://www.google.com/search?q=" + text;
   }
 }
-
-// Source: https://stackoverflow.com/questions/5717093/check-if-a-javascript-string-is-a-url
 function validURL(str) {
   var pattern = new RegExp('^(https?:\\/\\/)?' + // protocol
       '((([a-z\\d]([a-z\\d-]*[a-z\\d])*)\\.)+[a-z]{2,}|' + // domain name
@@ -563,13 +600,24 @@ function validURL(str) {
       '(\\#[-a-z\\d_]*)?$', 'i'); // fragment locator
   return !!pattern.test(str);
 }
-
 function containsProtocol(str) {
   var pattern = new RegExp('^(https?:\\/\\/){1}.*', 'i');
   return !!pattern.test(str);
 }
-
 String.prototype.replaceAll = function(search, replacement) {
   var target = this;
   return target.split(search).join(replacement);
 };
+function udpateDisplayedItems(e) {
+  localStorage.setItem('contenttype', e.target.checked);
+  if (e.target.checked) {
+    localStorage.setItem('content-display', 'none');
+  } else {
+    localStorage.setItem('content-display', 'block');
+  }
+  setDisplayedItems();
+}
+function setDisplayedItems() {
+  setValueFromLocalStorage('contenttype');
+  setValueFromLocalStorage('content-display');
+}