refactoring code

node_modules/.cache/.eslintcache

@@ -1 +1 @@
-[{"/home/seanedmunds/dev/home-page/src/index.js":"1"},{"size":21868,"mtime":1639611705010,"results":"2","hashOfConfig":"3"},{"filePath":"4","messages":"5","errorCount":0,"fatalErrorCount":0,"warningCount":3,"fixableErrorCount":0,"fixableWarningCount":0,"source":null},"ikqo75","/home/seanedmunds/dev/home-page/src/index.js",["6","7","8"],{"ruleId":"9","severity":1,"message":"10","line":1,"column":10,"nodeType":"11","messageId":"12","endLine":1,"endColumn":16},{"ruleId":"13","severity":1,"message":"14","line":215,"column":11,"nodeType":"15","endLine":215,"endColumn":61},{"ruleId":"16","severity":1,"message":"17","line":713,"column":1,"nodeType":"18","messageId":"19","endLine":716,"endColumn":2},"no-unused-vars","'render' is defined but never used.","Identifier","unusedVar","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"]
+[{"/home/seanedmunds/dev/home-page/src/index.js":"1"},{"size":22896,"mtime":1639695960041,"results":"2","hashOfConfig":"3"},{"filePath":"4","messages":"5","errorCount":0,"fatalErrorCount":0,"warningCount":3,"fixableErrorCount":0,"fixableWarningCount":0,"source":null},"ikqo75","/home/seanedmunds/dev/home-page/src/index.js",["6","7","8"],{"ruleId":"9","severity":1,"message":"10","line":1,"column":10,"nodeType":"11","messageId":"12","endLine":1,"endColumn":16},{"ruleId":"13","severity":1,"message":"14","line":195,"column":11,"nodeType":"15","endLine":195,"endColumn":61},{"ruleId":"16","severity":1,"message":"17","line":746,"column":1,"nodeType":"18","messageId":"19","endLine":749,"endColumn":2},"no-unused-vars","'render' is defined but never used.","Identifier","unusedVar","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/index.css

@@ -440,38 +440,78 @@ table a{
 	grid-column-gap: 20px;
 	grid-row-gap: 1vh;
 	grid-template-columns: 1fr;
-	grid-template-rows: min-content;
+	grid-template-rows: min-content min-content min-content min-content;
 	justify-items: center;
 	margin-left: 0em;
 	margin-right: 0em;
 	height: 95vh;
 	background-color: var(--color-background);
 	border-radius: 1em;
+	overflow: auto;
+}
+#settings-panel h3 {
+	text-decoration: none;
+	font-size: 16px;
+	font-style: normal;
+	font-weight: 400;
+	text-align: center;
 }
 #settings-panel-header{
 	display: grid;
 	text-align: center;
 }
 
+/* Personalization Form */
+
 #personalForm {
 	display: grid;
 	grid-column-gap: 1vh;
 	grid-row-gap: 1vh;
-	grid-template-columns: min-content 95vh;
+	grid-template-columns: 10vh 90vh;
+	grid-template-rows: min-content;
 	width: 100vh;
-	height: 1vh;
+	height: min-content;
 	text-align: end;
 }
 #personalForm label {
-	width: min-content;
+	width: 100%;
+	height: min-content;
 }
 #personalForm input {
 	border: var(--color-border);
+	height: min-content;
 }
 #personalForm input:focus {
 	border: var(--color-border);
 }
 
+/* Message Form */
+
+#messageForm {
+	display: grid;
+	grid-column-gap: 1vh;
+	grid-row-gap: 1vh;
+	grid-template-columns: 1fr;
+	width: 100vh;
+	text-align: end;
+}
+#messageForm label {
+	width: 100%;
+	padding-right: 1em;
+}
+#messageForm input {
+	border: var(--color-border);
+	padding-left: 1em;
+	height: 1hv;
+}
+#messageForm input:focus {
+	border: var(--color-border);
+}
+#messageGrid {
+	display: grid;
+	grid-template-columns: 5% 5% 10% 60% 10% 10%;
+	grid-row-gap: 1vh;
+}
 
 
 /* MODAL */

src/index.js

@@ -83,47 +83,28 @@ function Header(props) {
   );
 }
 
-function Applications() {
+const Applications = () => {
-  let appList = getApps();
+  const data = (getApps()).apps;
-  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(
-        <Apps
-          key={i}
-          name={appList.apps[i].name}
-          url={appList.apps[i].url}
-          icon={appList.apps[i].icon}
-          NSFW={appList.apps[i].NSFW}
-        />
-      );
-    } else if (safe === "NSFW" && NSFWEnabled) {
-      items.push(
-        <Apps
-          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">
       <h3>Applications</h3>
       <div id="apps_loop">
-        {items}
+      {data.map((data) => (
+        <Apps
+          key={data.name}
+          name={data.name}
+          url={data.url}
+          icon={data.icon}
+          NSFW={data.NSFW}
+        />
+      ))}
       </div>
     </section>
+
   );
 }
 
+
 function Apps(props) {
   
     let classNameType = props.NSFW + "-content";
@@ -198,7 +179,6 @@ 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 
@@ -265,18 +245,15 @@ function ModalMenu() {
 }
 
 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>
+      <label htmlFor="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>
+      <label htmlFor="contenttype"><span className="iconify" data-icon="mdi-domino-mask"></span></label></div>
     );
   }
 }
@@ -322,40 +299,96 @@ function Settings() {
   );
 }
 
-function PersonalizationSettings() {
+const PersonalizationSettings = () => {
+  const handleSubmit = (e) => {
+    e.preventDefault();
+  };
   return (
     <div id="settings-panel">
+      <form id="personalizationForm">
         <div id="settings-panel-header">
           <h1>Personalization</h1>
-        Personal details
+          <h3>Personal details</h3>
         </div>
         <PersonalInfo />
+        <div>
+          <h3>Greetings</h3>
+        </div>
+        <MessageInfo />
+      </form>
+      <button onClick={handleSubmit} type="submit" form="personalizationForm" value="submit">Save</button>
     </div>
     
   );
-}
+};
 
 function PersonalInfo() {
   var personalData = getPersonalData();
   return (
       <FormInput
-        name={personalData.name}
+        fname={personalData.fname}
+        lname={personalData.lname}
         email={personalData.email}
       />
-      
   );
 }
 
 function FormInput(props) {
-  let name = props.name;
+  let fname = props.fname;
+  let lname = props.lname;
   let email = props.email;
-  console.log(name);
   return (
     <div id="personalForm">
-      <label for="name">Name</label>
+      <label htmlFor="fname">First Name</label>
-      <input id="name" type="text" value={name}></input>
+      <input id="fname" type="text" defaultValue={fname} onChange={() => console.log()}></input>
-      <label for="email">Email</label>
+      <label htmlFor="lname">Last Name</label>
-      <input id="email" type="email" value={email}></input>
+      <input id="lname" type="text" defaultValue={lname} onChange={() => console.log()}></input>
+      <label htmlFor="email">Email</label>
+      <input id="email" type="email" defaultValue={email} onChange={() => console.log()}></input>
+    </div>
+  );
+}
+
+function MessageInfo() {
+  let greetings = require('./messages.json');
+  var items = [];
+  for (var i = 0; i < greetings.messages.length; i++) {
+    items.push(
+      <Messages
+        key={i}
+        group={i+1}
+        index={greetings.messages[i].index}
+        greeting={greetings.messages[i].message}
+        easterEgg={greetings.messages[i].easteregg}
+      />
+    );
+  }
+  return (
+    <div id="messageForm">
+      {items}
+    </div>
+
+  );
+}
+
+function Messages(props) {
+
+  var eeChecked;
+  if(props.easterEgg === "TRUE") {
+    eeChecked = true;
+  } else if(props.easterEgg === "FALSE") {
+    eeChecked = false;
+  } else {
+    eeChecked = false;
+  }
+  return (
+    <div id="messageGrid" title={props.group}>
+      <label htmlFor="index">Index</label>
+      <input id="index" type="text" defaultValue={props.index}></input>
+      <label htmlFor="greeting">Greeting</label>
+      <input id="greeting" type="text" defaultValue={props.greeting}></input>
+      <label htmlFor="Easter Egg">Easter Egg</label>
+      <input id="Easter Egg" type="checkbox" defaultChecked={eeChecked}></input>
     </div>
   );
 }