From 544f991dd3326d157f949bf9382bf29f1421b2ae Mon Sep 17 00:00:00 2001 From: Mauricio Hernan Cabrera <6373415-hernandracoder@users.noreply.gitlab.com> Date: Sat, 22 Aug 2020 19:03:31 -0300 Subject: [PATCH 1/4] keep cache updated --- src/pages/index.js | 654 ++++++++++++++++++++++++++++++--------------- 1 file changed, 436 insertions(+), 218 deletions(-) diff --git a/src/pages/index.js b/src/pages/index.js index f839c4b..b18eac0 100644 --- a/src/pages/index.js +++ b/src/pages/index.js @@ -1,317 +1,535 @@ import React, { useState, useEffect } from "react" -import MarkdownPreview from "../components/markdownPreview"; -import Markdown from '../components/markdown'; -import Header from '../components/header'; -import Title from '../components/title'; -import Subtitle from '../components/subtitle'; -import Work from '../components/work'; -import Social from '../components/social'; -import Addons from '../components/addons'; -import Skills from '../components/skills'; -import { initialSkillState } from '../constants/skills'; -import gsap from 'gsap'; -import Loader from '../components/loader'; -import Footer from '../components/footer'; -import './index.css' -import { ArrowLeftIcon, CopyIcon, DownloadIcon, EyeIcon, CheckIcon, MarkdownIcon } from '@primer/octicons-react'; -import SEO from '../components/seo'; -import { isGithubUsernameValid, isMediumUsernameValid } from '../utils/validation'; +import MarkdownPreview from "../components/markdownPreview" +import Markdown from "../components/markdown" +import Header from "../components/header" +import Title from "../components/title" +import Subtitle from "../components/subtitle" +import Work from "../components/work" +import Social from "../components/social" +import Addons from "../components/addons" +import Skills from "../components/skills" +import { initialSkillState } from "../constants/skills" +import gsap from "gsap" +import Loader from "../components/loader" +import Footer from "../components/footer" +import "./index.css" +import { + ArrowLeftIcon, + CopyIcon, + DownloadIcon, + EyeIcon, + CheckIcon, + MarkdownIcon, +} from "@primer/octicons-react" +import SEO from "../components/seo" +import { + isGithubUsernameValid, + isMediumUsernameValid, +} from "../utils/validation" + +const DEFAULT_PREFIX = { + title: "Hi šŸ‘‹, I'm", + currentWork: "šŸ”­ Iā€™m currently working on", + currentLearn: "šŸŒ± Iā€™m currently learning", + collaborateOn: "šŸ‘Æ Iā€™m looking to collaborate on", + helpWith: "šŸ¤ Iā€™m looking for help with", + ama: "šŸ’¬ Ask me about", + contact: "šŸ“« How to reach me", + funFact: "āš” Fun fact", + portfolio: "šŸ‘Øā€šŸ’» All of my projects are available at", + blog: "šŸ“ I regulary write articles on", +} + +const DEFAULT_DATA = { + title: "", + subtitle: "A passionate frontend developer from India", + currentWork: "", + currentLearn: "", + collaborateOn: "", + helpWith: "", + ama: "", + contact: "", + funFact: "", + visitorsBadge: false, + githubStats: false, + topLanguages: false, + devDynamicBlogs: false, + mediumDynamicBlogs: false, +} + +const DEFAULT_LINK = { + currentWork: "", + collaborateOn: "", + helpWith: "", + portfolio: "", + blog: "", +} + +const DEFAULT_SOCIAL = { + github: "", + dev: "", + linkedin: "", + codepen: "", + stackoverflow: "", + kaggle: "", + codesandbox: "", + fb: "", + instagram: "", + twitter: "", + dribbble: "", + behance: "", + medium: "", + youtube: "", +} + +const KeepCacheUpdated = ({ prefix, data, link, social, skills }) => { + useEffect(() => { + localStorage.setItem( + "cache", + JSON.stringify({ + prefix, + data, + link, + social, + skills, + }) + ) + }, [prefix, data, link, social, skills]) +} + +const DEFAULT_SKILLS = initialSkillState + const IndexPage = () => { - const [prefix, setPrefix] = useState({ - title: "Hi šŸ‘‹, I'm", - currentWork: 'šŸ”­ Iā€™m currently working on', - currentLearn: 'šŸŒ± Iā€™m currently learning', - collaborateOn: 'šŸ‘Æ Iā€™m looking to collaborate on', - helpWith: 'šŸ¤ Iā€™m looking for help with', - ama: 'šŸ’¬ Ask me about', - contact: 'šŸ“« How to reach me', - funFact: 'āš” Fun fact', - portfolio: 'šŸ‘Øā€šŸ’» All of my projects are available at', - blog: 'šŸ“ I regulary write articles on', - }); - const [data, setData] = useState({ - title: '', - subtitle: 'A passionate frontend developer from India', - currentWork: '', - currentLearn: '', - collaborateOn: '', - helpWith: '', - ama: '', - contact: '', - funFact: '', - visitorsBadge: false, - githubStats: false, - topLanguages: false, - devDynamicBlogs: false, - mediumDynamicBlogs: false, - }); - const [link, setLink] = useState({ - currentWork: '', - collaborateOn: '', - helpWith: '', - portfolio: '', - blog: '', - }); - const [social, setSocial] = useState({ - github: '', - dev: '', - linkedin: '', - codepen: '', - stackoverflow: '', - kaggle: '', - codesandbox: '', - fb: '', - instagram: '', - twitter: '', - dribbble: '', - behance: '', - medium: '', - youtube: '' - }); - const [skills, setSkills] = useState(initialSkillState) - const [generatePreview, setGeneratePreview] = useState(false); - const [generateMarkdown, setGenerateMarkdown] = useState(false); - const [displayLoader, setDisplayLoader] = useState(false); + const [prefix, setPrefix] = useState(DEFAULT_PREFIX) + const [data, setData] = useState(DEFAULT_DATA) + const [link, setLink] = useState(DEFAULT_LINK) + const [social, setSocial] = useState(DEFAULT_SOCIAL) + const [skills, setSkills] = useState(DEFAULT_SKILLS) + + const [generatePreview, setGeneratePreview] = useState(false) + const [generateMarkdown, setGenerateMarkdown] = useState(false) + const [displayLoader, setDisplayLoader] = useState(false) const [copyObj, setcopyObj] = useState({ isCopied: false, - copiedText: 'copy-markdown' - }); + copiedText: "copy-markdown", + }) const [previewMarkdown, setPreviewMarkdown] = useState({ isPreview: false, - buttonText: 'preview' - }); - const handleSkillsChange = (field) => { + buttonText: "preview", + }) + + const handleSkillsChange = field => { let change = { ...skills } - change[field] = !change[field]; - setSkills(change); + change[field] = !change[field] + setSkills(change) } + const handlePrefixChange = (field, e) => { let change = { ...prefix } - change[field] = e.target.value; - setPrefix(change); + change[field] = e.target.value + setPrefix(change) } + const handleDataChange = (field, e) => { let change = { ...data } - change[field] = e.target.value; - setData(change); + change[field] = e.target.value + setData(change) } + const handleLinkChange = (field, e) => { let change = { ...link } - change[field] = e.target.value; - setLink(change); + change[field] = e.target.value + setLink(change) } + const handleSocialChange = (field, e) => { let change = { ...social } - change[field] = e.target.value.toLowerCase(); - setSocial(change); + change[field] = e.target.value.toLowerCase() + setSocial(change) } - const handleCheckChange = (field) => { + + const handleCheckChange = field => { let change = { ...data } - change[field] = !change[field]; - setData(change); + change[field] = !change[field] + setData(change) } + const generate = () => { - var tl = new gsap.timeline(); - tl.to('.generate', { + var tl = new gsap.timeline() + tl.to(".generate", { scale: 0, duration: 0.5, - ease: 'Linear.easeNone', - }); - tl.set('.form', { display: 'none' }); - setDisplayLoader(true); + ease: "Linear.easeNone", + }) + tl.set(".form", { display: "none" }) + setDisplayLoader(true) setTimeout(() => { - setDisplayLoader(false); - setGenerateMarkdown(!generateMarkdown); - gsap.fromTo('.markdown-box', { - scale: 0.2, - }, { - scale: 1, - duration: 0.5, - ease: 'Linear.easeNone', - }); - document.body.scrollTop = 0; // For Safari - document.documentElement.scrollTop = 0; // For Chrome, Firefox, IE and Opera - }, 3000); + setDisplayLoader(false) + setGenerateMarkdown(!generateMarkdown) + gsap.fromTo( + ".markdown-box", + { + scale: 0.2, + }, + { + scale: 1, + duration: 0.5, + ease: "Linear.easeNone", + } + ) + document.body.scrollTop = 0 // For Safari + document.documentElement.scrollTop = 0 // For Chrome, Firefox, IE and Opera + }, 3000) } + const trimDataValues = (item, setItem) => { - const dataObj = { ...item }; - Object.keys(dataObj).forEach(k => (typeof dataObj[k] === 'string') ? dataObj[k] = dataObj[k].trim() : null); - setItem(dataObj); + const dataObj = { ...item } + Object.keys(dataObj).forEach(k => + typeof dataObj[k] === "string" ? (dataObj[k] = dataObj[k].trim()) : null + ) + setItem(dataObj) } + const handleGenerate = () => { - trimDataValues(data, setData); - trimDataValues(social, setSocial); - trimDataValues(link, setLink); - resetCopyMarkdownButton(); + trimDataValues(data, setData) + trimDataValues(social, setSocial) + trimDataValues(link, setLink) + resetCopyMarkdownButton() if (data.visitorsBadge || data.githubStats || data.topLanguages) { if (social.github && isGithubUsernameValid(social.github)) { - generate(); + generate() } } else if (social.github) { if (isGithubUsernameValid(social.github)) { - generate(); + generate() } } else { - generate(); + generate() } } + const handleGeneratePreview = () => { - setGenerateMarkdown(!generateMarkdown); - setGeneratePreview(!generatePreview); + setGenerateMarkdown(!generateMarkdown) + setGeneratePreview(!generatePreview) if (!generatePreview) { - gsap.set('.copy-button, .download-button', { - visibility: 'hidden' - }); + gsap.set(".copy-button, .download-button", { + visibility: "hidden", + }) setPreviewMarkdown({ isPreview: true, - buttonText: 'markdown' + buttonText: "markdown", }) } else { - gsap.set('.copy-button, .download-button', { - visibility: 'visible' - }); - gsap.to('.copy-button', { - border: '2px solid #3b3b4f', - duration: 1 - }); + gsap.set(".copy-button, .download-button", { + visibility: "visible", + }) + gsap.to(".copy-button", { + border: "2px solid #3b3b4f", + duration: 1, + }) setPreviewMarkdown({ isPreview: false, - buttonText: 'preview' + buttonText: "preview", }) - resetCopyMarkdownButton(); + resetCopyMarkdownButton() } } + const resetCopyMarkdownButton = () => { - var el = document.getElementById('copy-markdown') + var el = document.getElementById("copy-markdown") if (el) { - gsap.set('#copy-markdown', { - color: '#0a0a23', - }); + gsap.set("#copy-markdown", { + color: "#0a0a23", + }) } setcopyObj({ isCopied: false, - copiedText: 'copy-markdown' - }); + copiedText: "copy-markdown", + }) } + const setCopyMarkdownButton = () => { - var el = document.getElementById('copy-markdown') + var el = document.getElementById("copy-markdown") if (el) { - gsap.set('#copy-markdown', { - color: '#00471b', - }); + gsap.set("#copy-markdown", { + color: "#00471b", + }) } - gsap.fromTo('.copy-button', { - scale: 0.5, - }, { - scale: 1, - ease: 'elastic.in', - border: '2px solid #00471b', - duration: 0.5 - }); + gsap.fromTo( + ".copy-button", + { + scale: 0.5, + }, + { + scale: 1, + ease: "elastic.in", + border: "2px solid #00471b", + duration: 0.5, + } + ) setcopyObj({ isCopied: true, - copiedText: 'copied' - }); + copiedText: "copied", + }) } - const handleCopyToClipboard = () => { - var range = document.createRange(); - range.selectNode(document.getElementById("markdown-content")); - window.getSelection().removeAllRanges(); // clear current selection - window.getSelection().addRange(range); // to select text - document.execCommand("copy"); - window.getSelection().removeAllRanges(); - setCopyMarkdownButton(); + const handleCopyToClipboard = () => { + var range = document.createRange() + range.selectNode(document.getElementById("markdown-content")) + window.getSelection().removeAllRanges() // clear current selection + window.getSelection().addRange(range) // to select text + document.execCommand("copy") + window.getSelection().removeAllRanges() + + setCopyMarkdownButton() } const handleDownload = () => { - var markdownContent = document.getElementById("markdown-content"); - var tempElement = document.createElement('a'); - tempElement.setAttribute('href', 'data:text/markdown;charset=utf-8,' + encodeURIComponent(markdownContent.innerText)); - tempElement.setAttribute('download', 'README.md'); - tempElement.style.display = 'none'; - document.body.appendChild(tempElement); - tempElement.click(); - document.body.removeChild(tempElement); + var markdownContent = document.getElementById("markdown-content") + var tempElement = document.createElement("a") + tempElement.setAttribute( + "href", + "data:text/markdown;charset=utf-8," + + encodeURIComponent(markdownContent.innerText) + ) + tempElement.setAttribute("download", "README.md") + tempElement.style.display = "none" + document.body.appendChild(tempElement) + tempElement.click() + document.body.removeChild(tempElement) } const handleBackToEdit = () => { - setGeneratePreview(false); - setGenerateMarkdown(false); - gsap.set('.form', { - display: '' - }); - gsap.to('.generate', { + setGeneratePreview(false) + setGenerateMarkdown(false) + gsap.set(".form", { + display: "", + }) + gsap.to(".generate", { scale: 1, - }); + }) } + + const setInitialValues = () => { + const cache = JSON.parse(localStorage.getItem("cache")) + + if (!cache) { + return + } + + setPrefix(cache.prefix || DEFAULT_PREFIX) + setData(cache.data || DEFAULT_DATA) + setLink(cache.link || DEFAULT_LINK) + setSocial(cache.social || DEFAULT_SOCIAL) + + const cacheSkills = Object.keys(DEFAULT_SKILLS).reduce( + (previous, currentKey) => { + let currentSelected = false + + if (cache.skills[currentKey]) { + currentSelected = true + } + + return { + ...previous, + [currentKey]: currentSelected, + } + }, + {} + ) + + setSkills(cacheSkills || DEFAULT_SKILLS) + } + useEffect(() => { - gsap.fromTo(".generate", { - boxShadow: "0 0 0 0px rgba(59, 59, 79, 0.4)" - }, { - boxShadow: "0 0 0 10px rgba(59, 59, 79, 0)", - repeat: -1, - duration: 1 - }); - }); + gsap.fromTo( + ".generate", + { + boxShadow: "0 0 0 0px rgba(59, 59, 79, 0.4)", + }, + { + boxShadow: "0 0 0 10px rgba(59, 59, 79, 0)", + repeat: -1, + duration: 1, + } + ) + + // set initial values + setInitialValues() + }, []) + + // keep cache updated + KeepCacheUpdated({ prefix, data, link, social, skills }) + return ( <> - <>
+ <> +
+ +
- + <Title + data={data} + prefix={prefix} + handleDataChange={handleDataChange} + handlePrefixChange={handlePrefixChange} + /> <Subtitle data={data} handleDataChange={handleDataChange} /> - <Work prefix={prefix} data={data} link={link} handlePrefixChange={handlePrefixChange} handleLinkChange={handleLinkChange} handleDataChange={handleDataChange} /> + <Work + prefix={prefix} + data={data} + link={link} + handlePrefixChange={handlePrefixChange} + handleLinkChange={handleLinkChange} + handleDataChange={handleDataChange} + /> <Skills skills={skills} handleSkillsChange={handleSkillsChange} /> <Social social={social} handleSocialChange={handleSocialChange} /> - <Addons data={data} social={social} handleCheckChange={handleCheckChange} /> + <Addons + data={data} + social={social} + handleCheckChange={handleCheckChange} + /> <div className="section"> - {(data.visitorsBadge || data.githubStats || data.topLanguages) && !social.github ? - <div className="warning">* Please add github username to use these add-ons</div> : ''} - {social.github && !isGithubUsernameValid(social.github) ? - <div className="warning">* Github username is invalid, please add a valid username</div> : ''} - {social.medium && !isMediumUsernameValid(social.medium) ? - <div className="warning">* Medium username is invalid, please add a valid username (with @)</div> : ''} - {data.mediumDynamicBlogs && !social.medium ? - <div className="warning">* Please add medium username to display latest blogs dynamically</div> : ''} - {data.devDynamicBlogs && !social.dev ? - <div className="warning">* Please add dev.to username to display latest blogs dynamically</div> : ''} + {(data.visitorsBadge || data.githubStats || data.topLanguages) && + !social.github ? ( + <div className="warning"> + * Please add github username to use these add-ons + </div> + ) : ( + "" + )} + {social.github && !isGithubUsernameValid(social.github) ? ( + <div className="warning"> + * Github username is invalid, please add a valid username + </div> + ) : ( + "" + )} + {social.medium && !isMediumUsernameValid(social.medium) ? ( + <div className="warning"> + * Medium username is invalid, please add a valid username (with @) + </div> + ) : ( + "" + )} + {data.mediumDynamicBlogs && !social.medium ? ( + <div className="warning"> + * Please add medium username to display latest blogs dynamically + </div> + ) : ( + "" + )} + {data.devDynamicBlogs && !social.dev ? ( + <div className="warning"> + * Please add dev.to username to display latest blogs dynamically + </div> + ) : ( + "" + )} </div> <div className="submit"> - <div className="button generate" tabIndex="0" role="button" onClick={handleGenerate}>Generate README</div> + <div + className="button generate" + tabIndex="0" + role="button" + onClick={handleGenerate} + > + Generate README + </div> </div> </div> - {displayLoader ? <Loader /> : ''} - {(generateMarkdown || generatePreview) ? + + {displayLoader ? <Loader /> : ""} + + {generateMarkdown || generatePreview ? ( <div className="markdown-section"> <div className="utils"> - <div className="back-button" tabIndex="0" role="button" onClick={handleBackToEdit}> - <ArrowLeftIcon size={16} /> <span className="hide-on-mobile"> back to edit</span> + <div + className="back-button" + tabIndex="0" + role="button" + onClick={handleBackToEdit} + > + <ArrowLeftIcon size={16} />{" "} + <span className="hide-on-mobile"> back to edit</span> </div> - <div className="copy-button" tabIndex="0" role="button" onClick={handleCopyToClipboard}> - { - copyObj.isCopied === true ? - <CheckIcon size={24} /> - : - <CopyIcon size={24} /> - } - <span className="hide-on-mobile" id="copy-markdown"> {copyObj.copiedText} </span> + <div + className="copy-button" + tabIndex="0" + role="button" + onClick={handleCopyToClipboard} + > + {copyObj.isCopied === true ? ( + <CheckIcon size={24} /> + ) : ( + <CopyIcon size={24} /> + )} + <span className="hide-on-mobile" id="copy-markdown"> + {" "} + {copyObj.copiedText}{" "} + </span> </div> - <div className="download-button" tabIndex="0" role="button" onClick={handleDownload}> - <DownloadIcon size={24} /> <span className="hide-on-mobile" id="download-markdown"> download </span> + <div + className="download-button" + tabIndex="0" + role="button" + onClick={handleDownload} + > + <DownloadIcon size={24} />{" "} + <span className="hide-on-mobile" id="download-markdown"> + {" "} + download{" "} + </span> </div> - <div className="preview-button" tabIndex="0" role="button" onClick={handleGeneratePreview}> - {previewMarkdown.isPreview ? <MarkdownIcon size={16} /> : <EyeIcon size={16} />} <span className="hide-on-mobile" id="preview-markdown">{previewMarkdown.buttonText}</span> + <div + className="preview-button" + tabIndex="0" + role="button" + onClick={handleGeneratePreview} + > + {previewMarkdown.isPreview ? ( + <MarkdownIcon size={16} /> + ) : ( + <EyeIcon size={16} /> + )}{" "} + <span className="hide-on-mobile" id="preview-markdown"> + {previewMarkdown.buttonText} + </span> </div> </div> <div className="markdown"> <div className="markdown-box"> - {generatePreview ? <MarkdownPreview prefix={prefix} data={data} link={link} social={social} skills={skills} /> : ''} - {generateMarkdown ? <Markdown prefix={prefix} data={data} link={link} social={social} skills={skills} /> : ''} + {generatePreview ? ( + <MarkdownPreview + prefix={prefix} + data={data} + link={link} + social={social} + skills={skills} + /> + ) : ( + "" + )} + {generateMarkdown ? ( + <Markdown + prefix={prefix} + data={data} + link={link} + social={social} + skills={skills} + /> + ) : ( + "" + )} </div> </div> </div> - : ''} + ) : ( + "" + )} + <Footer /> </> ) From 2abd3eb4f2b9da926e06a6114bf3697387d5e8d5 Mon Sep 17 00:00:00 2001 From: Mauricio Hernan Cabrera <6373415-hernandracoder@users.noreply.gitlab.com> Date: Sat, 22 Aug 2020 19:26:14 -0300 Subject: [PATCH 2/4] btn reset form added --- src/pages/index.css | 12 ++++++++++++ src/pages/index.js | 16 ++++++++++++++++ 2 files changed, 28 insertions(+) diff --git a/src/pages/index.css b/src/pages/index.css index 1b208da..6fadb1b 100644 --- a/src/pages/index.css +++ b/src/pages/index.css @@ -488,3 +488,15 @@ a { font-size: 14px; } } + + +.actions { + margin-top: 24px; + font-weight: 700; + font-size: 12px; +} + +.actions .button { + max-width: 120px; + padding: 8px 16px; +} \ No newline at end of file diff --git a/src/pages/index.js b/src/pages/index.js index b18eac0..d467fdc 100644 --- a/src/pages/index.js +++ b/src/pages/index.js @@ -361,6 +361,16 @@ const IndexPage = () => { // keep cache updated KeepCacheUpdated({ prefix, data, link, social, skills }) + + const handleResetForm = () => { + setPrefix(DEFAULT_PREFIX) + setData(DEFAULT_DATA) + setLink(DEFAULT_LINK) + setSocial(DEFAULT_SOCIAL) + setSkills(DEFAULT_SKILLS) + console.log('Hola') + } + return ( <> <SEO title="Github Profile Readme Generator" /> @@ -368,6 +378,12 @@ const IndexPage = () => { <Header heading="Github Profile README Generator" /> </> + <div className="actions"> + <div className="button github-button" onClick={handleResetForm}> + Reset form + </div> + </div> + <div className="form"> <Title data={data} From 24bce01265fa91d5f4a09572afb7ddb40ee08960 Mon Sep 17 00:00:00 2001 From: Mauricio Hernan Cabrera <6373415-hernandracoder@users.noreply.gitlab.com> Date: Sat, 22 Aug 2020 20:06:59 -0300 Subject: [PATCH 3/4] json backup added --- src/pages/index.css | 46 +++++++++++++---- src/pages/index.js | 121 ++++++++++++++++++++++++++++++++++---------- 2 files changed, 128 insertions(+), 39 deletions(-) diff --git a/src/pages/index.css b/src/pages/index.css index 6fadb1b..3bac514 100644 --- a/src/pages/index.css +++ b/src/pages/index.css @@ -183,6 +183,7 @@ input:focus { width: 60%; justify-self: center; padding: 2% 0%; + align-self: center; } .download-button { @@ -193,11 +194,12 @@ input:focus { width: 60%; justify-self: center; padding: 2% 0%; + align-self: center; } .utils { display: grid; - grid-template-columns: repeat(4, 1fr); + grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); margin-top: 4%; } @@ -209,6 +211,7 @@ input:focus { width: 60%; justify-self: end; padding: 2% 0%; + align-self: center; } .loader { @@ -228,6 +231,7 @@ input:focus { width: 60%; justify-self: start; padding: 2% 0%; + align-self: center; } .title { @@ -396,6 +400,32 @@ a { padding: 1%; background: var(--grey-05); } + + +.actions { + margin-top: 24px; + font-weight: 700; + font-size: 12px; + display: flex; + padding-left: 2%; +} + +.actions .button { + max-width: 120px; + padding: 8px 16px; + justify-content: center; + text-align: center; +} + +.actions .data { + display: flex; + align-items: center; +} + +.actions .data input { + flex: 1; +} + @media only screen and (max-width: 1199px) { .section-title { font-size: 18px; @@ -487,16 +517,10 @@ a { .skills-category-title { font-size: 14px; } + + .actions { + flex-direction: column; + } } -.actions { - margin-top: 24px; - font-weight: 700; - font-size: 12px; -} - -.actions .button { - max-width: 120px; - padding: 8px 16px; -} \ No newline at end of file diff --git a/src/pages/index.js b/src/pages/index.js index d467fdc..407410b 100644 --- a/src/pages/index.js +++ b/src/pages/index.js @@ -105,7 +105,8 @@ const IndexPage = () => { const [link, setLink] = useState(DEFAULT_LINK) const [social, setSocial] = useState(DEFAULT_SOCIAL) const [skills, setSkills] = useState(DEFAULT_SKILLS) - + + const [restore, setRestore] = useState('') const [generatePreview, setGeneratePreview] = useState(false) const [generateMarkdown, setGenerateMarkdown] = useState(false) const [displayLoader, setDisplayLoader] = useState(false) @@ -162,6 +163,7 @@ const IndexPage = () => { ease: "Linear.easeNone", }) tl.set(".form", { display: "none" }) + tl.set(".actions", { display: "none" }) setDisplayLoader(true) setTimeout(() => { setDisplayLoader(false) @@ -284,7 +286,7 @@ const IndexPage = () => { setCopyMarkdownButton() } - const handleDownload = () => { + const handleDownloadMarkdown = () => { var markdownContent = document.getElementById("markdown-content") var tempElement = document.createElement("a") tempElement.setAttribute( @@ -299,12 +301,29 @@ const IndexPage = () => { document.body.removeChild(tempElement) } + const handleDownloadJson = () => { + var tempElement = document.createElement("a") + tempElement.setAttribute( + "href", + `data:text/json;charset=utf-8,${encodeURIComponent(JSON.stringify({ prefix, data, link, social, skills }))}` + ) + console.log(encodeURIComponent(JSON.stringify({ prefix, data, link, social, skills }))) + tempElement.setAttribute("download", "data.json") + tempElement.style.display = "none" + document.body.appendChild(tempElement) + tempElement.click() + document.body.removeChild(tempElement) + } + const handleBackToEdit = () => { setGeneratePreview(false) setGenerateMarkdown(false) gsap.set(".form", { display: "", }) + gsap.set(".actions", { + display: "", + }) gsap.to(".generate", { scale: 1, }) @@ -322,22 +341,7 @@ const IndexPage = () => { setLink(cache.link || DEFAULT_LINK) setSocial(cache.social || DEFAULT_SOCIAL) - const cacheSkills = Object.keys(DEFAULT_SKILLS).reduce( - (previous, currentKey) => { - let currentSelected = false - - if (cache.skills[currentKey]) { - currentSelected = true - } - - return { - ...previous, - [currentKey]: currentSelected, - } - }, - {} - ) - + const cacheSkills = mergeDefaultWithNewDataSkills(DEFAULT_SKILLS, cache.skills) setSkills(cacheSkills || DEFAULT_SKILLS) } @@ -368,7 +372,46 @@ const IndexPage = () => { setLink(DEFAULT_LINK) setSocial(DEFAULT_SOCIAL) setSkills(DEFAULT_SKILLS) - console.log('Hola') + } + + + const mergeDefaultWithNewDataSkills = (defaultSkills, newSkills) => { + return Object.keys(defaultSkills).reduce( + (previous, currentKey) => { + let currentSelected = false + + if (newSkills[currentKey]) { + currentSelected = true + } + + return { + ...previous, + [currentKey]: currentSelected, + } + }, + {} + ) + } + + const handleRestore = () => { + try { + const restoreData = JSON.parse(restore) + + if (!restoreData) { + return + } + + setPrefix(restoreData.prefix || DEFAULT_PREFIX) + setData(restoreData.data || DEFAULT_DATA) + setLink(restoreData.link || DEFAULT_LINK) + setSocial(restoreData.social || DEFAULT_SOCIAL) + + const restoreDataSkills = mergeDefaultWithNewDataSkills(DEFAULT_SKILLS, restoreData.skills) + setSkills(restoreDataSkills || DEFAULT_SKILLS) + } catch (error) { + } finally { + setRestore('') + } } return ( @@ -379,6 +422,14 @@ const IndexPage = () => { </> <div className="actions"> + <div className="data"> + <input type="text" className="inputField md" placeholder="JSON Backup" value={restore} onChange={e => setRestore(e.target.value)}/> + + <div className="button github-button" onClick={handleRestore}> + Restore + </div> + </div> + <div className="button github-button" onClick={handleResetForm}> Reset form </div> @@ -468,9 +519,10 @@ const IndexPage = () => { role="button" onClick={handleBackToEdit} > - <ArrowLeftIcon size={16} />{" "} + <ArrowLeftIcon size={16} /> <span className="hide-on-mobile"> back to edit</span> </div> + <div className="copy-button" tabIndex="0" @@ -483,22 +535,34 @@ const IndexPage = () => { <CopyIcon size={24} /> )} <span className="hide-on-mobile" id="copy-markdown"> - {" "} - {copyObj.copiedText}{" "} + {copyObj.copiedText} </span> </div> + <div className="download-button" tabIndex="0" role="button" - onClick={handleDownload} - > - <DownloadIcon size={24} />{" "} + onClick={handleDownloadMarkdown} + > + <DownloadIcon size={24} /> <span className="hide-on-mobile" id="download-markdown"> - {" "} - download{" "} + download markdown </span> </div> + + <div + className="download-button" + tabIndex="0" + role="button" + onClick={handleDownloadJson} + > + <DownloadIcon size={24} /> + <span className="hide-on-mobile" id="download-json"> + download backup + </span> + </div> + <div className="preview-button" tabIndex="0" @@ -509,12 +573,13 @@ const IndexPage = () => { <MarkdownIcon size={16} /> ) : ( <EyeIcon size={16} /> - )}{" "} + )} <span className="hide-on-mobile" id="preview-markdown"> {previewMarkdown.buttonText} </span> </div> </div> + <div className="markdown"> <div className="markdown-box"> {generatePreview ? ( From 97f6a96895f20d84137b36a6fbf71acf6df0854f Mon Sep 17 00:00:00 2001 From: Mauricio Hernan Cabrera <6373415-hernandracoder@users.noreply.gitlab.com> Date: Sat, 22 Aug 2020 20:07:28 -0300 Subject: [PATCH 4/4] console.log removed --- src/pages/index.js | 1 - 1 file changed, 1 deletion(-) diff --git a/src/pages/index.js b/src/pages/index.js index 407410b..fded0a3 100644 --- a/src/pages/index.js +++ b/src/pages/index.js @@ -307,7 +307,6 @@ const IndexPage = () => { "href", `data:text/json;charset=utf-8,${encodeURIComponent(JSON.stringify({ prefix, data, link, social, skills }))}` ) - console.log(encodeURIComponent(JSON.stringify({ prefix, data, link, social, skills }))) tempElement.setAttribute("download", "data.json") tempElement.style.display = "none" document.body.appendChild(tempElement)