diff --git a/package-lock.json b/package-lock.json index 0f2307d70..e56e3c1bb 100644 --- a/package-lock.json +++ b/package-lock.json @@ -8,6 +8,8 @@ "name": "react-frontend-dev-portfolio", "version": "0.1.0", "dependencies": { + "@fortawesome/fontawesome-svg-core": "^6.5.1", + "@fortawesome/react-fontawesome": "^0.2.0", "@testing-library/jest-dom": "^4.2.4", "@testing-library/react": "^9.5.0", "@testing-library/user-event": "^7.2.1", @@ -1459,6 +1461,39 @@ "resolved": "https://registry.npmjs.org/@csstools/normalize.css/-/normalize.css-10.1.0.tgz", "integrity": "sha512-ij4wRiunFfaJxjB0BdrYHIH8FxBJpOwNPhhAcunlmPdXudL1WQV1qoP9un6JsEBAgQH+7UXyyjh0g7jTxXK6tg==" }, + "node_modules/@fortawesome/fontawesome-common-types": { + "version": "6.5.1", + "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-6.5.1.tgz", + "integrity": "sha512-GkWzv+L6d2bI5f/Vk6ikJ9xtl7dfXtoRu3YGE6nq0p/FFqA1ebMOAWg3XgRyb0I6LYyYkiAo+3/KrwuBp8xG7A==", + "hasInstallScript": true, + "engines": { + "node": ">=6" + } + }, + "node_modules/@fortawesome/fontawesome-svg-core": { + "version": "6.5.1", + "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-6.5.1.tgz", + "integrity": "sha512-MfRCYlQPXoLlpem+egxjfkEuP9UQswTrlCOsknus/NcMoblTH2g0jPrapbcIb04KGA7E2GZxbAccGZfWoYgsrQ==", + "hasInstallScript": true, + "dependencies": { + "@fortawesome/fontawesome-common-types": "6.5.1" + }, + "engines": { + "node": ">=6" + } + }, + "node_modules/@fortawesome/react-fontawesome": { + "version": "0.2.0", + "resolved": "https://registry.npmjs.org/@fortawesome/react-fontawesome/-/react-fontawesome-0.2.0.tgz", + "integrity": "sha512-uHg75Rb/XORTtVt7OS9WoK8uM276Ufi7gCzshVWkUJbHhh3svsUUeqXerrM96Wm7fRiDzfKRwSoahhMIkGAYHw==", + "dependencies": { + "prop-types": "^15.8.1" + }, + "peerDependencies": { + "@fortawesome/fontawesome-svg-core": "~1 || ~6", + "react": ">=16.3" + } + }, "node_modules/@hapi/address": { "version": "2.1.4", "resolved": "https://registry.npmjs.org/@hapi/address/-/address-2.1.4.tgz", @@ -13845,13 +13880,13 @@ } }, "node_modules/prop-types": { - "version": "15.7.2", - "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.7.2.tgz", - "integrity": "sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ==", + "version": "15.8.1", + "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz", + "integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==", "dependencies": { "loose-envify": "^1.4.0", "object-assign": "^4.1.1", - "react-is": "^16.8.1" + "react-is": "^16.13.1" } }, "node_modules/prop-types-extra": { @@ -19878,6 +19913,27 @@ "resolved": "https://registry.npmjs.org/@csstools/normalize.css/-/normalize.css-10.1.0.tgz", "integrity": "sha512-ij4wRiunFfaJxjB0BdrYHIH8FxBJpOwNPhhAcunlmPdXudL1WQV1qoP9un6JsEBAgQH+7UXyyjh0g7jTxXK6tg==" }, + "@fortawesome/fontawesome-common-types": { + "version": "6.5.1", + "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-6.5.1.tgz", + "integrity": "sha512-GkWzv+L6d2bI5f/Vk6ikJ9xtl7dfXtoRu3YGE6nq0p/FFqA1ebMOAWg3XgRyb0I6LYyYkiAo+3/KrwuBp8xG7A==" + }, + "@fortawesome/fontawesome-svg-core": { + "version": "6.5.1", + "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-6.5.1.tgz", + "integrity": "sha512-MfRCYlQPXoLlpem+egxjfkEuP9UQswTrlCOsknus/NcMoblTH2g0jPrapbcIb04KGA7E2GZxbAccGZfWoYgsrQ==", + "requires": { + "@fortawesome/fontawesome-common-types": "6.5.1" + } + }, + "@fortawesome/react-fontawesome": { + "version": "0.2.0", + "resolved": "https://registry.npmjs.org/@fortawesome/react-fontawesome/-/react-fontawesome-0.2.0.tgz", + "integrity": "sha512-uHg75Rb/XORTtVt7OS9WoK8uM276Ufi7gCzshVWkUJbHhh3svsUUeqXerrM96Wm7fRiDzfKRwSoahhMIkGAYHw==", + "requires": { + "prop-types": "^15.8.1" + } + }, "@hapi/address": { "version": "2.1.4", "resolved": "https://registry.npmjs.org/@hapi/address/-/address-2.1.4.tgz", @@ -29905,13 +29961,13 @@ } }, "prop-types": { - "version": "15.7.2", - "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.7.2.tgz", - "integrity": "sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ==", + "version": "15.8.1", + "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz", + "integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==", "requires": { "loose-envify": "^1.4.0", "object-assign": "^4.1.1", - "react-is": "^16.8.1" + "react-is": "^16.13.1" } }, "prop-types-extra": { diff --git a/package.json b/package.json index 4ee9f923e..d3434883b 100644 --- a/package.json +++ b/package.json @@ -1,9 +1,10 @@ { "name": "react-frontend-dev-portfolio", - "homepage": "https://dorota1997.github.io/react-frontend-dev-portfolio/", "version": "0.1.0", "private": true, "dependencies": { + "@fortawesome/fontawesome-svg-core": "^6.5.1", + "@fortawesome/react-fontawesome": "^0.2.0", "@testing-library/jest-dom": "^4.2.4", "@testing-library/react": "^9.5.0", "@testing-library/user-event": "^7.2.1", @@ -20,7 +21,7 @@ "react-vertical-timeline-component": "^3.3.1" }, "scripts": { - "start": "react-scripts start", + "start": "react-scripts --openssl-legacy-provider start", "build": "react-scripts build", "test": "react-scripts test", "eject": "react-scripts eject", diff --git a/public/index.html b/public/index.html index cc2b588ec..cad39ad24 100644 --- a/public/index.html +++ b/public/index.html @@ -1,7 +1,6 @@ - Davina Griss | Front-end Developer @@ -16,7 +15,6 @@ -
diff --git a/public/portfolio_shared_data.json b/public/portfolio_shared_data.json index d8747aa4a..ae7bda265 100644 --- a/public/portfolio_shared_data.json +++ b/public/portfolio_shared_data.json @@ -1,12 +1,13 @@ { "basic_info": { - "name": "Davina Griss", - "titles": [ "Front-end Developer", "Senior Data Engineer", "Dev Team lead", "Mobile App Developer" ], + "main_icon": "game-icons:plague-doctor-profile", + "name": "عبر اللع القباي", + "titles": [ "ممثل", "طبيب", "راوور", "Mobile App Developer" ], "social": [ { "name": "github", "url": "https://github.com", - "class": "fab fa-github" + "class": "fab fa-twitter" }, { "name": "instagram", @@ -20,48 +21,39 @@ "icons": [ { "name": "HTML 5", - "class": "devicon-html5-plain", - "level": "95" + "class": "fab fa-instagram" }, { "name": "CSS 3", - "class": "devicon-css3-plain", - "level": "95" + "class": "devicon-css3-plain" }, { "name": "Angular", - "class": "devicon-angularjs-plain", - "level": "80" + "class": "devicon-angularjs-plain" }, { "name": "TypeScript", - "class": "devicon-typescript-plain", - "level": "90" + "class": "devicon-typescript-plain" }, { "name": "JavaScript", - "class": "devicon-javascript-plain", - "level": "70" + "class": "devicon-javascript-plain" }, { "name": "Sass", - "class": "devicon-sass-original", - "level": "75" + "class": "devicon-sass-original" }, { "name": "Bootstrap", - "class": "devicon-bootstrap-plain", - "level": "85" + "class": "devicon-bootstrap-plain" }, { "name": "C#", - "class": "devicon-csharp-plain", - "level": "65" + "class": "devicon-csharp-plain" }, { "name": "MySql", - "class": "devicon-mysql-plain", - "level": "60" + "class": "devicon-mysql-plain" } ] } diff --git a/public/res_primaryLanguage.json b/public/res_primaryLanguage.json index 7b390e071..8d3f946be 100644 --- a/public/res_primaryLanguage.json +++ b/public/res_primaryLanguage.json @@ -97,7 +97,8 @@ ".NET Core", "SignalR", "Angular Material" - ] + ], + "logo": "\\images\\portfolio\\animal-shelter\\p1.jpg" }, { "company": "Serros Solutions", @@ -112,7 +113,8 @@ "PHP", "JavaScript", "DHTMLX Gantt" - ] + ], + "logo": "\\images\\myProfile.jpg" } ] } \ No newline at end of file diff --git a/public/res_secondaryLanguage.json b/public/res_secondaryLanguage.json index c1f6a0eea..003a92113 100644 --- a/public/res_secondaryLanguage.json +++ b/public/res_secondaryLanguage.json @@ -1,6 +1,6 @@ { "basic_info": { - "description_header": "Cześć", + "description_header": "زعتووز البقتة", "description": "👋 Jestem Davina Griss. Fikcyjna osoba na potrzeby demonstracji. Pracuję z najnowszymi frameworkami front-end takimi jak Angular, React i Vue. To co teraz widzisz to szablon portfolio od Dorota1997. Jeżeli podoba Ci się ten szablon portfolio nie zapomnij o ⭐, żeby było bardziej rozpoznawalne dla innych użytkowników. Dzięki 💜", "section_name": { "about": "O mnie", @@ -98,7 +98,41 @@ ] }, { - "company": "Serros Solutions", + "company": "DefOpenSource2", + "title": "Front-End Developer", + "years": "10.2019 - obecnie", + "mainTech": [ + "Angular 8/9/10" + ], + "technologies": [ + "REST API", + "RxJS", + "JavaScript", + "Bootstrap", + "MDBootstrap", + "EF Core", + "Angular Material" + ] + }, + { + "company": "DefOpenSource3", + "title": "Front-End Developer", + "years": "10.202322219 - obecnie", + "mainTech": [ + "Angular 8/9/10" + ], + "technologies": [ + "REST API", + "RxJS", + "JavaScript", + "Bootstrap", + "MDBootstrap", + "EF Core", + "Angular Material" + ] + }, + { + "company": "Google", "title": "Stażystka", "years": "01.2018 - 09.2019", "mainTech": [ diff --git a/src/App.js b/src/App.js index a99f38c84..b75e7fc01 100644 --- a/src/App.js +++ b/src/App.js @@ -8,6 +8,144 @@ import Experience from "./components/Experience"; import Projects from "./components/Projects"; import Skills from "./components/Skills"; + + +/* +type SocialLink = { + name: string; + url: string; + class: string; +}; + +type SkillIcon = { + name: string; + class: string; +}; + +type BasicInfo = { + main_icon: string; + name: string; + titles: string[]; + social: SocialLink[]; + image: string; +}; + +type Skills = { + icons: SkillIcon[]; +}; + +type UserProfile = { + basic_info: BasicInfo; + skills: Skills; +}; + + + +*/ + +/* +type Technology = { + class: string; + name: string; +}; + +type Project = { + title: string; + startDate: string; + description: string; + images: string[]; + url: string; + technologies: Technology[]; +}; + +type Experience = { + company: string; + title: string; + years: string; + mainTech: string[]; + technologies: string[]; + icon?: string; +}; + +type SectionNames = { + about: string; + projects: string; + skills: string; + experience: string; +}; + +type BasicInfo = { + description_header: string; + description: string; + section_name: SectionNames; +}; + +type MainContent = { + basic_info: BasicInfo; + projects: Project[]; + experience: Experience[]; +}; + +type WebsiteContents = { + [language: string]: MainContent; +}; + +const websiteContent: WebsiteContents = { + en: { + basic_info: { + description_header: "Hi", + description: "👋 I'm Davina Griss. Fictional person for preview purposes :) I'm working with newest front-end frameworks like Angular, React, and Vue. What you are seeing now is a portfolio template from Dorota1997. If you like this portfolio template, make sure to ⭐ the repository to make it more recognizable for other users. Thank you 💜", + section_name: { + about: "About me", + projects: "Projects", + skills: "Skills", + experience: "Experience", + }, + }, + projects: [ + { + title: "Animal Shelter", + startDate: "2020", + description: "The most expanded application I had opportunity to work with. I've learned many technologies and my code was reviewed by awesome curator. Application handles all adoption processes and allows to store all evidence on adopting animals from animal shelter.", + images: [ + "images/portfolio/animal-shelter/p1.jpg", + "images/portfolio/animal-shelter/p2.jpg", + ], + url: "", + technologies: [ + { class: "devicon-angularjs-plain", name: "Angular" }, + { class: "devicon-typescript-plain", name: "TypeScript" }, + { class: "devicon-csharp-plain", name: "C#" }, + ], + }, + // More projects... + ], + experience: [ + { + company: "DefOpenSource", + title: "Front-End Developer", + years: "10.2019 - present", + mainTech: ["Angular 8/9/10"], + technologies: [ + "REST API", + "RxJS", + "JavaScript", + "Bootstrap", + // More technologies... + ], + icon: "devicon-typescript-plain", + }, + // More experiences... + ], + }, + other_language_key: { + // Translated content follows the same structure... + }, +}; + + +*/ + class App extends Component { constructor(props) { @@ -111,7 +249,7 @@ class App extends Component { > diff --git a/src/App.scss b/src/App.scss index d75c722c2..b8312c544 100644 --- a/src/App.scss +++ b/src/App.scss @@ -38,7 +38,6 @@ header { -webkit-background-size: cover; text-align: center; overflow: hidden; - background-color: #e9d5a1; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; @@ -58,10 +57,7 @@ header { padding: 8px 15px 2px 15px; position: relative; z-index: -500; - border-top: 5px solid #696969; border-radius: 0 0 5px 5px; - background-color: #696969; - color: white; } .skills-tile { @@ -74,7 +70,6 @@ header { .language { font-size: 25px; - background-color: #e9d5a1; padding-bottom: 10px; padding-top: 80px; } @@ -90,11 +85,9 @@ header h1 { } .slider-image { - border: 5px solid #D7CAAA; } .slider-tab { - background-color: #D7CAAA; height: 25px; } @@ -108,7 +101,6 @@ header h1 { } #about { - background: #fff; overflow: hidden; } @@ -117,7 +109,7 @@ header h1 { font: 18px/24px 'opensans-bold', sans-serif; text-transform: uppercase; letter-spacing: 3px; - color: black; + color: rgb(255, 255, 255); text-align: center; } @@ -219,7 +211,6 @@ header h1 { } #resume { - background: #efe1bd; } .experience-icon { @@ -233,8 +224,6 @@ header h1 { text-align: left !important; padding: 5px 8px 5px 8px !important; vertical-align: baseline; - background-color: #AE944F !important; - color: white; font-weight: lighter !important; font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; } @@ -244,8 +233,6 @@ header h1 { text-align: left !important; padding: 5px 8px 5px 8px !important; vertical-align: baseline; - background-color: #f9f5e9 !important; - color: black; font-weight: lighter !important; font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; } @@ -261,10 +248,14 @@ header h1 { margin-top: 27%; text-align: center; } + + + .main-badge { + font-size: 10px !important; + } } .modal-inside .modal-content { - background: white; } .bars { @@ -289,7 +280,6 @@ header h1 { .bars li em { font: 15px 'opensans-bold', sans-serif; - color: #313131; text-transform: uppercase; letter-spacing: 2px; font-weight: normal; @@ -303,7 +293,6 @@ header h1 { top: 0; margin: 0; padding-right: 24px; - background: #313131; display: inline-block; height: 42px; line-height: 42px; @@ -341,7 +330,6 @@ header h1 { } #portfolio { - background: #efe1bd; padding-bottom: 5%; } @@ -355,8 +343,6 @@ header h1 { -webkit-transition: all ease 0.5s; -moz-transition: all ease 0.5s; transition: all ease 0.5s; - opacity: 0; - background-color: rgba(51, 51, 51, 0.9); } .portfolio .portfolio-item .portfolio-item-caption:hover { @@ -377,7 +363,6 @@ header h1 { } #skills { - background: #1F1F1F; min-height: 200px; width: 100%; overflow: hidden; @@ -402,7 +387,7 @@ header h1 { } footer { - background: #1F1F1F; + background: #312a16; min-height: 100px; width: 100%; overflow: hidden; diff --git a/src/components/About.js b/src/components/About.js index c7ff9bbad..10b3b7241 100644 --- a/src/components/About.js +++ b/src/components/About.js @@ -18,7 +18,7 @@ class About extends Component { return (
-

+

{sectionName}

diff --git a/src/components/Experience.js b/src/components/Experience.js index 6e40f620d..1108423d1 100644 --- a/src/components/Experience.js +++ b/src/components/Experience.js @@ -37,7 +37,34 @@ class Experience extends Component { color: "#fff", textAlign: "center", }} - icon={} + icon={ + (work.logo !== "" && work.logo !== undefined) ? ( +
+ Logo +
+ ) : ( + + ) +} + + + key={i} >
diff --git a/src/components/Header.js b/src/components/Header.js index b94973a9f..36b34b521 100644 --- a/src/components/Header.js +++ b/src/components/Header.js @@ -7,7 +7,7 @@ class Header extends Component { constructor() { super(); - this.state = { checked: false }; + this.state = { checked: false , offColor: '#baaa80', onColor: '#000000'}; this.onThemeSwitchChange = this.onThemeSwitchChange.bind(this); } @@ -28,6 +28,7 @@ class Header extends Component { if (this.props.sharedData) { var name = this.props.sharedData.name; this.titles = this.props.sharedData.titles.map(x => [ x.toUpperCase(), 1500 ] ).flat(); + var main_icon = this.props.sharedData.main_icon; } const HeaderTitleTypeAnimation = React.memo( () => { @@ -39,7 +40,7 @@ class Header extends Component {
- +

@@ -50,15 +51,15 @@ class Header extends Component { , document.getElementById('root')); -serviceWorker.register(); diff --git a/src/scss/themes/theme-dark.scss b/src/scss/themes/theme-dark.scss index be5a2d266..27477cb3d 100644 --- a/src/scss/themes/theme-dark.scss +++ b/src/scss/themes/theme-dark.scss @@ -11,16 +11,16 @@ body[data-theme="dark"] { } .header-icon { - color: #3C342C; + color: #ffffff; opacity: 0.8; } .slider-image { - border: 5px solid #8C8C8C; + border: 5px solid #2b2b2b; } .language { - background-color: #494949; + background-color: #2b2b2b; } .link-href { @@ -33,33 +33,33 @@ body[data-theme="dark"] { } header { - background-color: #494949; + background-color: #2b2b2b; h1 { color: white; } } #about { - background-color: #7f7f7f; + background-color: #000000; h1 span { color: white; } .polaroid span { - background: #6d6d6d; + background: #2b2b2b; } .card { - background: #6d6d6d; + background: #2b2b2b; color: white; } } #portfolio { - background: #5b5b5b; + background: #2b2b2b; .section-title { color: white !important; } .foto div { - background: #6d6d6d; + background: #000000; } .project-title-settings { color: white; @@ -68,18 +68,19 @@ body[data-theme="dark"] { #resume { filter: brightness(80%); - background: #5b5b5b; + background: #2b2b2b; + .section-title { - color: white !important; + color: rgb(255, 255, 255) !important; } .experience-badge { - background: #919191 !important; + background: #2b2b2b !important; color: white; } .main-badge { - background: #919191 !important; + background: #000000 !important; } .vertical-timeline-element-date { @@ -87,21 +88,35 @@ body[data-theme="dark"] { } .vertical-timeline-element-icon { - background: #919191 !important; + background: #000000 !important; } - @media only screen and (max-width: 1169px) { + @media only screen and (max-width: 900px) { .vertical-timeline-element-date { color: black; } } + + .main-badge { + color: white; + } + } + + #skills { + background: #000000; } .modal-inside .modal-content { - background: #5b5b5b; + background: #000000; color: white; } .close-icon { color: white; } -} \ No newline at end of file + + footer { + background: #000000; + } +} + + diff --git a/src/scss/themes/theme-light.scss b/src/scss/themes/theme-light.scss index 55064e59c..647b1fb27 100644 --- a/src/scss/themes/theme-light.scss +++ b/src/scss/themes/theme-light.scss @@ -4,4 +4,85 @@ body[data-theme="light"] { .slider-tab { background-color: #D7CAAA; } + + header { + background-color: #e9d5a1; + } + + .language { + background-color: #e9d5a1; + } + + + .slider-image { + border: 5px solid #D7CAAA; + } + + .slider-tab { + background-color: #D7CAAA; + } + + + #about { + background: #312a16; + } + + + + #resume { + background: #efe1bd; + } + + + + .main-badge { + background-color: #AE944F !important; + color: white; + } + + + .experience-badge { + background-color: #f9f5e9 !important; + color: black; + } + + + .modal-inside .modal-content { + background: white; + } + + .bars li em { + color: #313131; + } + + + .bar-expand { + background: #313131; + } + + + + #portfolio { + background: #efe1bd; + } + + + #skills { + background: #312a16; + } + + .project-date { + border-top: 5px solid #312a16; + background-color: #312a16; + color: white; + } + + footer { + background: #312a16; + } + + + + + } \ No newline at end of file diff --git a/src/serviceWorker.js b/src/serviceWorker.js deleted file mode 100644 index b04b771a8..000000000 --- a/src/serviceWorker.js +++ /dev/null @@ -1,141 +0,0 @@ -// This optional code is used to register a service worker. -// register() is not called by default. - -// This lets the app load faster on subsequent visits in production, and gives -// it offline capabilities. However, it also means that developers (and users) -// will only see deployed updates on subsequent visits to a page, after all the -// existing tabs open on the page have been closed, since previously cached -// resources are updated in the background. - -// To learn more about the benefits of this model and instructions on how to -// opt-in, read https://bit.ly/CRA-PWA - -const isLocalhost = Boolean( - window.location.hostname === 'localhost' || - // [::1] is the IPv6 localhost address. - window.location.hostname === '[::1]' || - // 127.0.0.0/8 are considered localhost for IPv4. - window.location.hostname.match( - /^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/ - ) -); - -export function register(config) { - if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) { - // The URL constructor is available in all browsers that support SW. - const publicUrl = new URL(process.env.PUBLIC_URL, window.location.href); - if (publicUrl.origin !== window.location.origin) { - // Our service worker won't work if PUBLIC_URL is on a different origin - // from what our page is served on. This might happen if a CDN is used to - // serve assets; see https://github.com/facebook/create-react-app/issues/2374 - return; - } - - window.addEventListener('load', () => { - const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`; - - if (isLocalhost) { - // This is running on localhost. Let's check if a service worker still exists or not. - checkValidServiceWorker(swUrl, config); - - // Add some additional logging to localhost, pointing developers to the - // service worker/PWA documentation. - navigator.serviceWorker.ready.then(() => { - console.log( - 'This web app is being served cache-first by a service ' + - 'worker. To learn more, visit https://bit.ly/CRA-PWA' - ); - }); - } else { - // Is not localhost. Just register service worker - registerValidSW(swUrl, config); - } - }); - } -} - -function registerValidSW(swUrl, config) { - navigator.serviceWorker - .register(swUrl) - .then(registration => { - registration.onupdatefound = () => { - const installingWorker = registration.installing; - if (installingWorker == null) { - return; - } - installingWorker.onstatechange = () => { - if (installingWorker.state === 'installed') { - if (navigator.serviceWorker.controller) { - // At this point, the updated precached content has been fetched, - // but the previous service worker will still serve the older - // content until all client tabs are closed. - console.log( - 'New content is available and will be used when all ' + - 'tabs for this page are closed. See https://bit.ly/CRA-PWA.' - ); - - // Execute callback - if (config && config.onUpdate) { - config.onUpdate(registration); - } - } else { - // At this point, everything has been precached. - // It's the perfect time to display a - // "Content is cached for offline use." message. - console.log('Content is cached for offline use.'); - - // Execute callback - if (config && config.onSuccess) { - config.onSuccess(registration); - } - } - } - }; - }; - }) - .catch(error => { - console.error('Error during service worker registration:', error); - }); -} - -function checkValidServiceWorker(swUrl, config) { - // Check if the service worker can be found. If it can't reload the page. - fetch(swUrl, { - headers: { 'Service-Worker': 'script' }, - }) - .then(response => { - // Ensure service worker exists, and that we really are getting a JS file. - const contentType = response.headers.get('content-type'); - if ( - response.status === 404 || - (contentType != null && contentType.indexOf('javascript') === -1) - ) { - // No service worker found. Probably a different app. Reload the page. - navigator.serviceWorker.ready.then(registration => { - registration.unregister().then(() => { - window.location.reload(); - }); - }); - } else { - // Service worker found. Proceed as normal. - registerValidSW(swUrl, config); - } - }) - .catch(() => { - console.log( - 'No internet connection found. App is running in offline mode.' - ); - }); -} - -export function unregister() { - if ('serviceWorker' in navigator) { - navigator.serviceWorker.ready - .then(registration => { - registration.unregister(); - }) - .catch(error => { - console.error(error.message); - }); - } -} diff --git a/src/setupTests.js b/src/setupTests.js deleted file mode 100644 index 74b1a275a..000000000 --- a/src/setupTests.js +++ /dev/null @@ -1,5 +0,0 @@ -// jest-dom adds custom jest matchers for asserting on DOM nodes. -// allows you to do things like: -// expect(element).toHaveTextContent(/react/i) -// learn more: https://github.com/testing-library/jest-dom -import '@testing-library/jest-dom/extend-expect';