Skip to content

Commit

Permalink
Lists
Browse files Browse the repository at this point in the history
  • Loading branch information
strawhat19 committed Feb 16, 2023
1 parent 442fa9b commit 432c897
Show file tree
Hide file tree
Showing 7 changed files with 237 additions and 139 deletions.
63 changes: 18 additions & 45 deletions components/lists.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -107,7 +107,7 @@ export default function Lists(props) {
e.target.reset();
let newListForm: any = document.querySelector(`#${newListID} form input`);
newListForm.focus();
setSystemStatus(`Created List ${newList.name}.`);
setSystemStatus(`Created List #${lists.length + 1} ${newList.name}.`);
setTimeout(() => setLoading(false), 1500);
// setTimeout(() => setAnimComplete(true), 3500);
}
Expand Down Expand Up @@ -135,13 +135,13 @@ export default function Lists(props) {
localStorage.setItem(`lists`, JSON.stringify(updatedLists));
await setLists(updatedLists);
e.target.reset();
setSystemStatus(`Created Item.`);
setSystemStatus(`Created Item ${list.items.length + 1}.`);
setTimeout(() => setLoading(false), 1500);
// setTimeout(() => setAnimComplete(true), 3500);
return listItems.scrollTop = listItems.scrollHeight;
}

const deleteList = async (e: any, list: List) => {
const deleteList = async (e: any, list: List, index) => {
e.preventDefault();
let isButton = e.target.classList.contains(`iconButton`);
if (isButton) {
Expand All @@ -150,12 +150,12 @@ export default function Lists(props) {
let updatedLists = lists.filter((lis: List) => lis.id != list.id);
localStorage.setItem(`lists`, JSON.stringify(updatedLists));
await setLists(updatedLists);
setSystemStatus(`Deleted List ${list.name}.`);
setSystemStatus(`Deleted List #${index + 1} - ${list.name}.`);
setTimeout(() => setLoading(false), 1500);
}
}

const deleteItem = async (e: any, item: Item, list: List) => {
const deleteItem = async (e: any, item: Item, list: List, lists: List[], index) => {
e.preventDefault();
let isButton = e.target.classList.contains(`iconButton`);
if (isButton) {
Expand All @@ -164,7 +164,7 @@ export default function Lists(props) {
let updatedItems: Item[] = [...list.items.filter(itm => itm.id != item.id)];
let updatedLists = lists.map((lis: List, index) => {
if (lis.id == list.id) {
setSystemStatus(`Deleted Item ${item.content}.`);
setSystemStatus(`Deleted Item ${index + 1}.`);
return {...list, items: updatedItems, updated: formatDate(new Date())};
} else {
return lis;
Expand All @@ -176,47 +176,20 @@ export default function Lists(props) {
}
}

const setItemComplete = async (e: any, item: Item, list: List) => {
const setItemComplete = async (e: any, item: Item, list: List, index) => {
let isButton = e.target.classList.contains(`iconButton`);
if (!isButton) {
setLoading(true);
setSystemStatus(`Marking Item as Complete.`);
setSystemStatus(`Marking Item ${index + 1} as Complete.`);
list.items[list.items.indexOf(item)].complete = !list.items[list.items.indexOf(item)].complete;
list.items[list.items.indexOf(item)].updated = formatDate(new Date());
localStorage.setItem(`lists`, JSON.stringify(lists));
await setLists(lists);
setTimeout(() => setLoading(false), 1500);
setSystemStatus(`Marked Item as Complete.`);
setSystemStatus(`Marked Item ${index + 1} as Complete.`);
}
}

const showAlert = async (alertTitle: any, alertMessage?: any, additionalInfo?:any) => {
if (alertOpen) return;
setAlertOpen(true);
let alertDialog = document.createElement(`div`);
alertDialog.className = `alert`;
if ((!alertMessage && !additionalInfo) || (additionalInfo && additionalInfo?.length == 0)) alertDialog.classList.add(`slim`);
alertDialog.innerHTML = `<h3>${alertTitle}</h3>
${alertMessage ? additionalInfo ? `` : alertMessage : ``}
`;
if (additionalInfo?.length > 0) {
additionalInfo?.forEach((info: any, index: any) => {
let element: any = createXML(`<p>${index+1}. ${alertMessage} ${info}</p>`);
alertDialog.append(element);
});
}
document.body.appendChild(alertDialog);
let closeButton = document.createElement(`button`);
closeButton.classList.add(`iconButton`);
closeButton.classList.add(`alertButton`);
closeButton.innerHTML = `X`;
closeButton.onclick = () => {
document.body.removeChild(alertDialog);
setAlertOpen(false);
};
alertDialog.appendChild(closeButton);
}

const onDragEnd = (result, list) => {
setLoading(true);
console.log(`Drag`, result);
Expand Down Expand Up @@ -277,8 +250,8 @@ export default function Lists(props) {
<h2 style={{fontWeight: 600, fontSize: 24, minWidth: `fit-content` }}>Create List {lists.length + 1}</h2>
<section className={`addListFormItemSection`} style={{margin: 0}}>
<form title={`Add List`} id={`addListForm`} className={`flex addListForm itemButtons`} style={{width: `100%`, flexDirection: `row`}} onSubmit={(e) => createList(e, lists)}>
<input maxLength={15} placeholder={`Name of List`} type="text" name="createItem" required />
{/* <input style={{borderRadius: `4px !important;`}} className={`save submit`} type="submit" value={`Add List`} /> */}
<input maxLength={35} placeholder={`Name of List`} type="text" name="createItem" required />
{/* <input style={{borderRadius: `4px !important`}} className={`save submit`} type="submit" value={`Add List`} /> */}
<button type={`submit`} title={`Create List`} className={`iconButton createList`}><i style={{color: `var(--gameBlue)`, fontSize: 13}} className="fas fa-list"></i><span className={`iconButtonText textOverflow extended`}><span style={{fontSize: 12}}>Create List</span><span className={`itemLength`} style={{fontSize: 14, fontWeight: 700, padding: `0 5px`, color: `var(--gameBlue)`, maxWidth: `fit-content`}}>{lists.length + 1}</span></span></button>
</form>
</section>
Expand All @@ -287,7 +260,7 @@ export default function Lists(props) {
</div>
</div>
<section ref={listsRef} className={`lists ${lists.length == 1 ? `oneList` : `multiList`}`} id={`lists`}>
{lists.map((list, index) => {
{lists.map((list, listIndex) => {
return <DragDropContext key={list.id} onDragEnd={(e) => onDragEnd(e, list)}>
<Droppable id={list.id} droppableId={list.id}>
{(provided, snapshot) => (
Expand All @@ -302,14 +275,14 @@ export default function Lists(props) {
<div className="itemOrder listOrder" style={{maxWidth: `fit-content`}}>
<i style={{color: `var(--gameBlue)`, fontSize: 18, padding: `0 15px`, maxWidth: `fit-content`}} className="fas fa-list"></i>
</div>
<h2 className={`nx-tracking-light`} id={list.id} style={{position: `relative`}}>
<i className={`listName textOverflow extended`} style={{fontSize: 14, fontWeight: 500}}>
<h3 className={`listNameRow nx-tracking-light`} id={list.id} style={{position: `relative`}}>
<i className={`listName textOverflow extended`} style={{fontSize: 13, fontWeight: 600}}>
{list.name}
</i>
</h2>
</h3>
<div className="itemButtons customButtons">
{/* <button title={`Edit List`} className={`iconButton editButton`}><i style={{color: `var(--gameBlue)`, fontSize: 13}} className="fas fa-edit"></i></button> */}
<button style={{pointerEvents: `all`}} onClick={(e) => deleteList(e, list)} title={`Delete List`} className={`iconButton deleteButton`}><i style={{color: `var(--gameBlue)`, fontSize: 13}} className="fas fa-trash"></i><span className={`iconButtonText textOverflow extended`}>Delete {list.items.length > 0 && <><span className={`itemLength`} style={{fontSize: 14, fontWeight: 700, padding: `0 5px`, color: `var(--gameBlue)`, maxWidth: `fit-content`}}>{list.items.length}</span>Item(s)</>}</span></button>
<button style={{pointerEvents: `all`}} onClick={(e) => deleteList(e, list, listIndex)} title={`Delete List`} className={`iconButton deleteButton`}><i style={{color: `var(--gameBlue)`, fontSize: 13}} className="fas fa-trash"></i><span className={`iconButtonText textOverflow extended`}>Delete {list.items.length > 0 && <><span className={`itemLength`} style={{fontSize: 14, fontWeight: 700, padding: `0 5px`, color: `var(--gameBlue)`, maxWidth: `fit-content`}}>{list.items.length}</span>Item(s)</>}</span></button>
</div>
</div>
<div className={`items listItems`}>
Expand All @@ -318,7 +291,7 @@ export default function Lists(props) {
{(provided, snapshot) => (
<div
className={`item ${item.complete ? `complete` : ``}`}
onClick={(e) => setItemComplete(e, item, list)}
onClick={(e) => setItemComplete(e, item, list, index)}
{...provided.dragHandleProps}
{...provided.draggableProps}
id={`item-${index + 1}`}
Expand Down Expand Up @@ -346,7 +319,7 @@ export default function Lists(props) {
) : null}
<div className="itemButtons customButtons">
{/* <button title={`Edit Item`} className={`iconButton editButton`}><i style={{color: `var(--gameBlue)`, fontSize: 13}} className="fas fa-edit"></i></button> */}
<button onClick={(e) => deleteItem(e, item, list)} title={`Delete Item`} className={`iconButton deleteButton`}><i style={{color: `var(--gameBlue)`, fontSize: 13}} className="fas fa-trash"></i></button>
<button onClick={(e) => deleteItem(e, item, list, lists, index)} title={`Delete Item`} className={`iconButton deleteButton`}><i style={{color: `var(--gameBlue)`, fontSize: 13}} className="fas fa-trash"></i></button>
</div>
</div>
)}
Expand Down
81 changes: 81 additions & 0 deletions components/projects.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,81 @@
import { StateContext, createXML, formatDate, dev } from '../pages/_app';
import { useContext, useEffect, useState, useRef } from 'react';

export default function Projects() {
const initialLoad = useRef(false);
const [loaded, setLoaded] = useState(false);
const [projects, setProjects] = useState<any>([]);
const [overrideUser, setOverrideUser] = useState(false);

// Github
const getGithubData = async () => {
let username = `strawhat19`;
const repoURL = `https://api.github.com/users/${username}/repos`;
const githubURL = `https://api.github.com/users/${username}`;
const repositories = JSON.parse(localStorage.getItem(`repositories`) as string) || [];
const responseRepos = await fetch(repoURL);
const response = await fetch(githubURL);

if (!response.ok || !responseRepos.ok) {
console.log(`Fetch Error`);
console.clear();
} else {
// Get Github Info
const github = await response.json();
const githubRepos = await responseRepos.json();
const { name, html_url, bio, blog, avatar_url, login, public_repos, repos_url, starred_url, followers, following } = github;
githubRepos.sort((a: any, b: any) => new Date(b.created_at).getTime() - new Date(a.created_at).getTime()).map((repo: any) => {
const { name, html_url, created_at, owner, topics, license, updated_at, deployments_url, language, homepage, description } = repo;
const filteredRepo = { name, owner, url: html_url, topics, date: created_at, license, updated: updated_at, homepage, language, deployment: deployments_url, description };
repositories.push(filteredRepo);
});
const gitUser = { id: `1 Rakib 5:21 AM 12-21-2022`, name, url: html_url, bio, projects: repositories.sort((a: any, b: any) => new Date(b.date).getTime() - new Date(a.date).getTime()), website: blog, avatar: avatar_url, login, repoLink: repos_url, repoNum: public_repos, starred: starred_url, followers, following, lastSignin: formatDate(new Date()) };

setProjects(gitUser?.projects);
console.log(`Updated Projects`, gitUser?.projects);
localStorage.setItem(`projects`, JSON.stringify(gitUser?.projects));
// if (overrideUser) {
// getDefaultUser().then((usr: any) => {
// setUser({...usr, ...user, ...gitUser, projects: gitUser?.projects});
// console.log(`Updated User`, {...usr, ...user, ...gitUser, projects: gitUser?.projects});
// localStorage.setItem(`user`, JSON.stringify({...usr, ...user, ...gitUser, projects: gitUser?.projects}));
// });
// }
};
}

useEffect(() => {
let firstLoad = !initialLoad.current;
let updated = initialLoad.current;
let cachedUser = JSON.parse(localStorage.getItem(`user`) as any);
let cachedProjects = JSON.parse(localStorage.getItem(`projects`) as any) || [];

if (firstLoad) {
setLoaded(true);
// setPage(`Projects`);
// setUpdates(updates+1);

if (cachedProjects.length > 0) {
console.log(`Cached Projects`, cachedProjects);
setProjects(cachedProjects);
} else {
getGithubData();
};
}

return () => {initialLoad.current = true;};
}, [])

return <section id={`projectsSection`}>
<div className="flex projects">
{projects.length > 0 ? projects.map((project: any, index: any) => {
return <div id={project?.name} className={`project`}>
<span className={`name`}>{project.name}</span>
{/* <span className={`topics`}>{project?.topics}</span> */}
</div>
}) : <div className={`skeleton`}>
<h4 className={`skeletonItem`}>Loading...</h4>
</div>}
</div>
</section>
}
2 changes: 1 addition & 1 deletion components/status.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ export default function Status(props) {


return <>
{!animCompleted && <div className={`${!anim ? `loading` : `loaded ${animCompleted ? `animComplete` : `anim`}`}`} style={{margin: `20px 0`, padding: `0 !important;`}} id="systemStatus">
{!animCompleted && <div className={`${!anim ? `loading` : `loaded ${animCompleted ? `animComplete` : `anim`}`}`} style={{margin: `20px 0`, padding: `0 !important`}} id="systemStatus">
<h2 style={{fontSize: 18, paddingBottom: `.5em`, borderBottom: `1px solid var(--gameBlueSoft)`}}><i>System Status</i></h2>
<span className="actualQuote">{systemStatus ?? `System Status Ok.`}</span>
{loading && <i className={`spinnerEl ${loading ? `loading` : `loaded ${animCompleted ? `animComplete` : `anim`}`}`} style={{color: `var(--gameBlueSoft)`, fontSize: `0.85em`, fontWeight: 700, letterSpacing: `0.1px`}}><Spinner circleNotch className={`spinner`} />Loading...</i>}
Expand Down
Loading

1 comment on commit 432c897

@vercel
Copy link

@vercel vercel bot commented on 432c897 Feb 16, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please sign in to comment.