smedmunds/home-page
Archived
1
0
Fork 0
Code Releases 2 Activity

refactoring code

Browse Source
This commit is contained in:
Sean Edmunds
2021-12-16 17:06:18 -06:00
parent 9002a49a09
commit 0fe86ad9e6
3 changed files with 132 additions and 59 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
node_modules/.cache/.eslintcache generated vendored
View File

@@ -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"]

48
src/index.css
View File

@@ -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 */

131
src/index.js
View File

@@ -83,47 +83,28 @@ function Header(props) {
);
}
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(
<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 {
}
}
const Applications = () => {
const data = (getApps()).apps;
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>
<input id="name" type="text" value={name}></input>
<label for="email">Email</label>
<input id="email" type="email" value={email}></input>
<label htmlFor="fname">First Name</label>
<input id="fname" type="text" defaultValue={fname} onChange={() => console.log()}></input>
<label htmlFor="lname">Last Name</label>
<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>
);
}