From 432c89763241f73e66045d97a18bb4758f937326 Mon Sep 17 00:00:00 2001 From: Rakib Ahmed Date: Wed, 15 Feb 2023 23:15:21 -0500 Subject: [PATCH] Lists --- components/lists.tsx | 63 ++++-------- components/projects.tsx | 81 +++++++++++++++ components/status.tsx | 2 +- pages/_app.js | 218 ++++++++++++++++++++++++---------------- pages/lists.mdx | 2 - pages/projects.mdx | 6 ++ theme.config.tsx | 4 +- 7 files changed, 237 insertions(+), 139 deletions(-) create mode 100644 components/projects.tsx diff --git a/components/lists.tsx b/components/lists.tsx index f4f8a48..6f9837a 100644 --- a/components/lists.tsx +++ b/components/lists.tsx @@ -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); } @@ -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) { @@ -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) { @@ -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; @@ -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 = `

${alertTitle}

- ${alertMessage ? additionalInfo ? `` : alertMessage : ``} - `; - if (additionalInfo?.length > 0) { - additionalInfo?.forEach((info: any, index: any) => { - let element: any = createXML(`

${index+1}. ${alertMessage} ${info}

`); - 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); @@ -277,8 +250,8 @@ export default function Lists(props) {

Create List {lists.length + 1}

createList(e, lists)}> - - {/* */} + + {/* */}
@@ -287,7 +260,7 @@ export default function Lists(props) {
- {lists.map((list, index) => { + {lists.map((list, listIndex) => { return onDragEnd(e, list)}> {(provided, snapshot) => ( @@ -302,14 +275,14 @@ export default function Lists(props) {
-

- +

+ {list.name} -

+

{/* */} - +
@@ -318,7 +291,7 @@ export default function Lists(props) { {(provided, snapshot) => (
setItemComplete(e, item, list)} + onClick={(e) => setItemComplete(e, item, list, index)} {...provided.dragHandleProps} {...provided.draggableProps} id={`item-${index + 1}`} @@ -346,7 +319,7 @@ export default function Lists(props) { ) : null}
{/* */} - +
)} diff --git a/components/projects.tsx b/components/projects.tsx new file mode 100644 index 0000000..e29e4c4 --- /dev/null +++ b/components/projects.tsx @@ -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([]); + 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
+
+ {projects.length > 0 ? projects.map((project: any, index: any) => { + return
+ {project.name} + {/* {project?.topics} */} +
+ }) :
+

Loading...

+
} +
+
+} \ No newline at end of file diff --git a/components/status.tsx b/components/status.tsx index bf58c35..9d4a187 100644 --- a/components/status.tsx +++ b/components/status.tsx @@ -8,7 +8,7 @@ export default function Status(props) { return <> - {!animCompleted &&
+ {!animCompleted &&

System Status

{systemStatus ?? `System Status Ok.`} {loading && Loading...} diff --git a/pages/_app.js b/pages/_app.js index 6d5bdc9..40fd01d 100644 --- a/pages/_app.js +++ b/pages/_app.js @@ -3,101 +3,141 @@ import { createContext, useRef, useState, useEffect } from 'react'; export const StateContext = createContext({}); +export const dev = (item, source) => { + if (window.location.host.includes(`local`)) { + if (item) { + console.log(`Dev Log`, item); + } else if (item && source) { + console.log(`Dev Log`, item, `From`, source); + } + return true; + } else { + return false; + } +} + export const getCurrentPageName = () => { - return window.location.hash.slice(window.location.hash.lastIndexOf(`/`)).replace(`/`, ``); - }; - - export const defaultContent = `Hey, I’m Rakib, a Software Engineer @ Mitsubishi Electric Trane HVAC US, or just Mitsubishi Electric for short. Along with my 7 years of experience as a developer, and owner of my own tech and digital media side business, Piratechs. This website is just for me to test out Next.js 13.`; - - export const getNumberFromString = (string) => { - let result = string.match(/\d+/); - let number = parseInt(result[0]); - return number; + return window.location.hash.slice(window.location.hash.lastIndexOf(`/`)).replace(`/`, ``); +}; + +export const defaultContent = `Hey, I’m Rakib, a Software Engineer @ Mitsubishi Electric Trane HVAC US, or just Mitsubishi Electric for short. Along with my 7 years of experience as a developer, and owner of my own tech and digital media side business, Piratechs. This website is just for me to test out Next.js 13.`; + +export const getNumberFromString = (string) => { + let result = string.match(/\d+/); + let number = parseInt(result[0]); + return number; +} + +export const createXML = (xmlString) => { + let div = document.createElement('div'); + div.innerHTML = xmlString.trim(); + return div.firstChild; +} + +export const capitalizeAllWords = (string) => { + if (string != null || string != undefined) { + return string.replace(` `,` `).split(` `).map((word) => word?.charAt(0)?.toUpperCase() + word?.slice(1).toLowerCase()).join(); } - - export const createXML = (xmlString) => { - let div = document.createElement('div'); - div.innerHTML = xmlString.trim(); - return div.firstChild; +}; + +export const cutOffTextAndReplace = (string, end, replacement) => { + if (!replacement) { + replacement = `...` || `-`; } - - export const capitalizeAllWords = (string) => { - if (string != null || string != undefined) { - return string.replace(` `,` `).split(` `).map((word) => word?.charAt(0)?.toUpperCase() + word?.slice(1).toLowerCase()).join(); - } - }; - - export const cutOffTextAndReplace = (string, end, replacement) => { - if (!replacement) { - replacement = `...` || `-`; - } - return string?.length > end ? string?.substring(0, end - 1) + replacement : string; - }; - - export const removeDuplicateObjectFromArray = (arrayOfObjects) => { - const uniqueArray = arrayOfObjects?.filter((value, index) => { - const _value = JSON.stringify(value); - return index === arrayOfObjects?.findIndex((obj) => { - return JSON.stringify(obj) === _value; - }); + return string?.length > end ? string?.substring(0, end - 1) + replacement : string; +}; + +export const removeDuplicateObjectFromArray = (arrayOfObjects) => { + const uniqueArray = arrayOfObjects?.filter((value, index) => { + const _value = JSON.stringify(value); + return index === arrayOfObjects?.findIndex((obj) => { + return JSON.stringify(obj) === _value; }); - return uniqueArray; - }; - - export const getFormValuesFromFields = (formFields) => { - for (let i = 0; i < formFields.length; i++) { - let field = formFields[i]; - if (field.type != `submit`) { - console.log(field.type, field.value); - }; - } - }; - - export const generateUniqueID = (existingIDs) => { - let newID = Math.random().toString(36).substr(2, 9); - if (existingIDs && existingIDs.length > 0) { - while (existingIDs.includes(newID)) { - newID = Math.random().toString(36).substr(2, 9); - } - } - return newID; - }; - - export const updateOrAdd = (obj, arr) => { - let index = arr.findIndex((item) => item.name === obj.name); - if (index !== -1) { - arr[index] = obj; - } else { - arr.push(obj); - } - return arr; - }; - - export const formatDate = (date, specificPortion) => { - let hours = date.getHours(); - let minutes = date.getMinutes(); - let ampm = hours >= 12 ? 'PM' : 'AM'; - hours = hours % 12; - hours = hours ? hours : 12; // the hour '0' should be '12' - minutes = minutes < 10 ? '0' + minutes : minutes; - let strTime = hours + ':' + minutes + ' ' + ampm; - let completedDate = strTime + ` ` + (date.getMonth() + 1) + "/" + date.getDate() + "/" + date.getFullYear(); - if (specificPortion == `time`) { - completedDate = strTime; - } else if (specificPortion == `date`) { - completedDate = (date.getMonth() + 1) + "/" + date.getDate() + "/" + date.getFullYear(); - } else { - completedDate = strTime + ` ` + (date.getMonth() + 1) + "/" + date.getDate() + "/" + date.getFullYear(); + }); + return uniqueArray; +}; + +export const getFormValuesFromFields = (formFields) => { + for (let i = 0; i < formFields.length; i++) { + let field = formFields[i]; + if (field.type != `submit`) { + console.log(field.type, field.value); + }; + } +}; + +export const generateUniqueID = (existingIDs) => { + let newID = Math.random().toString(36).substr(2, 9); + if (existingIDs && existingIDs.length > 0) { + while (existingIDs.includes(newID)) { + newID = Math.random().toString(36).substr(2, 9); } - return completedDate; + } + return newID; +}; + +export const updateOrAdd = (obj, arr) => { + let index = arr.findIndex((item) => item.name === obj.name); + if (index !== -1) { + arr[index] = obj; + } else { + arr.push(obj); + } + return arr; +}; + +export const formatDate = (date, specificPortion) => { + let hours = date.getHours(); + let minutes = date.getMinutes(); + let ampm = hours >= 12 ? 'PM' : 'AM'; + hours = hours % 12; + hours = hours ? hours : 12; // the hour '0' should be '12' + minutes = minutes < 10 ? '0' + minutes : minutes; + let strTime = hours + ':' + minutes + ' ' + ampm; + let completedDate = strTime + ` ` + (date.getMonth() + 1) + "/" + date.getDate() + "/" + date.getFullYear(); + if (specificPortion == `time`) { + completedDate = strTime; + } else if (specificPortion == `date`) { + completedDate = (date.getMonth() + 1) + "/" + date.getDate() + "/" + date.getFullYear(); + } else { + completedDate = strTime + ` ` + (date.getMonth() + 1) + "/" + date.getDate() + "/" + date.getFullYear(); + } + return completedDate; +}; + +export const defaultLists = [ + {id: `list-1`, name: `ProductIVF Features`, created: formatDate(new Date()), items: [ + {id: `item-1`, content: `Corner Draggable`, complete: false, created: formatDate(new Date())}, + {id: `item-2`, content: `Switch to User`, complete: false, created: formatDate(new Date())}, + ]}, +]; + +export const showAlert = async (alertTitle, alertMessage, additionalInfo) => { + 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 = `

${alertTitle}

+ ${alertMessage ? additionalInfo ? `` : alertMessage : ``} + `; + if (additionalInfo?.length > 0) { + additionalInfo?.forEach((info, index) => { + let element = createXML(`

${index+1}. ${alertMessage} ${info}

`); + 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); }; - - export const defaultLists = [ - {id: `list-1`, name: `ProductIVF Features`, created: formatDate(new Date()), items: [ - {id: `item-1`, content: `Corner Draggable`, complete: false, created: formatDate(new Date())}, - {id: `item-2`, content: `Switch to User`, complete: false, created: formatDate(new Date())}, - ]}, - ]; + alertDialog.appendChild(closeButton); +} export default function MyApp({ Component, pageProps }) { let loaded = useRef(false); diff --git a/pages/lists.mdx b/pages/lists.mdx index cfdd3dc..0e19cee 100644 --- a/pages/lists.mdx +++ b/pages/lists.mdx @@ -2,8 +2,6 @@ import Lists from '../components/lists' # Your Lists -***Sortable Draggable and Droppable Lists*** (Work in Progress). -
\ No newline at end of file diff --git a/pages/projects.mdx b/pages/projects.mdx index c4ddcfe..af9bda5 100644 --- a/pages/projects.mdx +++ b/pages/projects.mdx @@ -1,3 +1,9 @@ +import Projects from '../components/projects' + # Projects +
+ + + These are some of my Projects. diff --git a/theme.config.tsx b/theme.config.tsx index 46cc394..be3a937 100644 --- a/theme.config.tsx +++ b/theme.config.tsx @@ -32,13 +32,13 @@ const config: DocsThemeConfig = { navbar: { extraContent:
Sign In -
+
, }, toc: { - extraContent:
+ extraContent:

Sign In or Sign Up