React GUI

├── .gitignore ├── README.md ├── package-lock.json ├── package.json ├── public ├── favicon.ico ├── index.html ├── logo192.png ├── logo512.png ├── manifest.json └── robots.txt ├── screens ├── output.gif └── screen1.png ├── src ├── _test_ │ └── function.test.js ├── components │ ├── droppablePlace │ │ ├── droppable.css │ │ └── index.js │ ├── renderPlace │ │ ├── index.js │ │ └── renderPlace.css │ └── sidebar │ │ ├── index.js │ │ └── sidebar.css ├── helpers │ ├── generateUiElements.js │ ├── reOrderFn.js │ └── styleFn.js ├── index.css ├── index.js ├── menu.svg ├── serviceWorker.js └── setupTests.js └── yarn.lock /.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app). 2 | 3 | ## Available Scripts 4 | 5 | In the project directory, you can run: 6 | 7 | ### `npm start` 8 | 9 | Runs the app in the development mode.
10 | Open [http://localhost:3000](http://localhost:3000) to view it in the browser. 11 | 12 | 13 | ### `About` 14 | 15 | This project is a GUI builder created using react and react-beautiful-dnd. The main goal is to play with drag and drop feature and also to generate the html elements based on the user clicks. 16 | 17 | ### Screens 18 | ![Screen](https://github.com/karthick3018/react-gui/blob/master/screens/screen1.png) 19 | 20 | ![Preview](https://github.com/karthick3018/react-gui/blob/master/screens/output.gif) -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-gui-builder", 3 | "version": "0.1.0", 4 | "private": true, 5 | "homepage": " https://karthick3018.github.io/react-gui/", 6 | "dependencies": { 7 | "@testing-library/jest-dom": "^4.2.4", 8 | "@testing-library/react": "^9.3.2", 9 | "@testing-library/user-event": "^7.1.2", 10 | "gh-pages": "^3.1.0", 11 | "react": "^16.13.1", 12 | "react-beautiful-dnd": "^13.0.0", 13 | "react-dom": "^16.13.1", 14 | "react-scripts": "3.4.3" 15 | }, 16 | "scripts": { 17 | "start": "react-scripts start", 18 | "build": "react-scripts build", 19 | "test": "react-scripts test", 20 | "eject": "react-scripts eject", 21 | "deploy": "gh-pages -d build" 22 | }, 23 | "eslintConfig": { 24 | "extends": "react-app" 25 | }, 26 | "browserslist": { 27 | "production": [ 28 | ">0.2%", 29 | "not dead", 30 | "not op_mini all" 31 | ], 32 | "development": [ 33 | "last 1 chrome version", 34 | "last 1 firefox version", 35 | "last 1 safari version" 36 | ] 37 | } 38 | } 39 | -------------------------------------------------------------------------------- /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/karthick3018/react-gui/817540aac73f835e39e6f81a60a44bc4ba97feba/public/favicon.ico -------------------------------------------------------------------------------- /public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 12 | 13 | 17 | 18 | 27 | React GUI 28 | 29 | 30 | 31 |

32 | 42 | 43 | 44 | -------------------------------------------------------------------------------- /public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/karthick3018/react-gui/817540aac73f835e39e6f81a60a44bc4ba97feba/public/logo192.png -------------------------------------------------------------------------------- /public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/karthick3018/react-gui/817540aac73f835e39e6f81a60a44bc4ba97feba/public/logo512.png -------------------------------------------------------------------------------- /public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | }, 10 | { 11 | "src": "logo192.png", 12 | "type": "image/png", 13 | "sizes": "192x192" 14 | }, 15 | { 16 | "src": "logo512.png", 17 | "type": "image/png", 18 | "sizes": "512x512" 19 | } 20 | ], 21 | "start_url": ".", 22 | "display": "standalone", 23 | "theme_color": "#000000", 24 | "background_color": "#ffffff" 25 | } 26 | -------------------------------------------------------------------------------- /public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /screens/output.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/karthick3018/react-gui/817540aac73f835e39e6f81a60a44bc4ba97feba/screens/output.gif -------------------------------------------------------------------------------- /screens/screen1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/karthick3018/react-gui/817540aac73f835e39e6f81a60a44bc4ba97feba/screens/screen1.png -------------------------------------------------------------------------------- /src/_test_/function.test.js: -------------------------------------------------------------------------------- 1 | import {render} from '@testing-library/react'; 2 | import {generateElement,returnRespectiveHtmlElement} from '../helpers/generateUiElements'; 3 | 4 | 5 | test('check generateElement function',()=>{ 6 | let result,temp={id:'302',element:'button'}; 7 | result = generateElement('button','302'); 8 | expect(temp).toEqual(expect.objectContaining(result)); 9 | }) 10 | 11 | it('checks returnRespectiveHtmlElement function',()=>{ 12 | let JsxElement = returnRespectiveHtmlElement('button'); 13 | const { getByText } = render(JsxElement); 14 | const createdElement = getByText(/i'm button/i); 15 | expect(createdElement).toBeInTheDocument(); 16 | }) -------------------------------------------------------------------------------- /src/components/droppablePlace/droppable.css: -------------------------------------------------------------------------------- 1 | .droppable-wrapper{ 2 | width: 100%; 3 | border: 1px solid; 4 | overflow-y: scroll; 5 | background-image: linear-gradient(to right, rgb(217, 226, 233) 1px, transparent 1px), linear-gradient(rgb(217, 226, 233) 1px, transparent 1px); 6 | background-size: 20px 20px; 7 | background-color: rgb(237, 242, 246); 8 | } 9 | 10 | .droppable-element{ 11 | width: 100%; 12 | display: flex; 13 | } 14 | 15 | .help-text{ 16 | display: grid; 17 | justify-content: center; 18 | opacity: 0.3; 19 | } -------------------------------------------------------------------------------- /src/components/droppablePlace/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Droppable, Draggable } from 'react-beautiful-dnd'; 3 | import { getDraggableItemStyle } from '../../helpers/styleFn.js'; 4 | import {returnRespectiveHtmlElement} from '../../helpers/generateUiElements'; 5 | import './droppable.css' 6 | 7 | const DroppablePlace = ({ droppedElements }) => { 8 | return ( 9 | 10 | {(provided, snapshot) => ( 11 |

15 | {droppedElements?.length ? 16 | droppedElements?.map((item, index) => ( 17 | 21 | {(provided, snapshot) => ( 22 |

31 | {returnRespectiveHtmlElement(item.element)} 32 |

33 | )} 34 | 35 | )):

*Drag & Drop some component to start

} 36 |

37 | )} 38 | 39 | ) 40 | } 41 | 42 | export default DroppablePlace; -------------------------------------------------------------------------------- /src/components/renderPlace/index.js: -------------------------------------------------------------------------------- 1 | import React, { Suspense, useEffect, useState } from 'react'; 2 | import { DragDropContext } from 'react-beautiful-dnd'; 3 | import SideBarRender from '../sidebar'; 4 | import { reOrderWithInSameArea, reOrderWithOtherArea } from '../../helpers/reOrderFn'; 5 | import { generateElement } from '../../helpers/generateUiElements'; 6 | import './renderPlace.css' 7 | const DroppablePlace = React.lazy(() => import('../droppablePlace')); 8 | 9 | 10 | const initialElements = [ 11 | { id: 'button', element: "Button" }, 12 | { id: 'input', element: "Input Box" }, 13 | { id: 'textarea', element: "Textarea" }, 14 | { id: 'box', element: "Box" }, 15 | { id: 'heading', element: "Heading" } 16 | ] 17 | 18 | const RenderPlace = () => { 19 | const [sidebarElements, setSideBarElements] = useState(initialElements); 20 | const [droppedElements, setDroppedElements] = useState([]); 21 | 22 | useEffect(() => { 23 | const previousElements = JSON.parse(localStorage.getItem("movedElements")); 24 | if (previousElements && previousElements?.length) { 25 | setDroppedElements(previousElements); 26 | } 27 | }, []) 28 | 29 | const onDragEnd = result => { 30 | const { source, destination, draggableId: selectedElementType } = result; 31 | 32 | if (!destination) return; 33 | 34 | if (source.droppableId === destination.droppableId) { 35 | let reOrderedValue; 36 | if (source.droppableId === 'sidebar') { 37 | //handle drop inside sidebar 38 | reOrderedValue = reOrderWithInSameArea(sidebarElements, source.index, destination.index) 39 | setSideBarElements(reOrderedValue); 40 | } 41 | else { 42 | reOrderedValue = reOrderWithInSameArea(droppedElements, source.index, destination.index) 43 | setDroppedElements(reOrderedValue); 44 | } 45 | 46 | } else { 47 | //handle drop into droppable area 48 | const newHtmlElement = generateElement(selectedElementType, droppedElements.length); 49 | let valueAfterElementInsertion = reOrderWithOtherArea(droppedElements, destination.index, newHtmlElement); 50 | setDroppedElements(valueAfterElementInsertion); 51 | 52 | }; 53 | } 54 | 55 | const handleSave = () => { 56 | if(droppedElements?.length){ 57 | localStorage.setItem('movedElements', JSON.stringify(droppedElements)) 58 | alert('Elements Saved!') 59 | } 60 | 61 | } 62 | 63 | const handleClear = () => { 64 | setDroppedElements([]); 65 | localStorage.removeItem('movedElements') 66 | } 67 | 68 | return ( 69 | 70 |

71 | 72 | DroppablePlace loading...

}> 73 | 74 | 75 | 76 | 77 |

78 | 79 | 80 |

81 | 82 | 83 | ); 84 | } 85 | 86 | export default RenderPlace 87 | -------------------------------------------------------------------------------- /src/components/renderPlace/renderPlace.css: -------------------------------------------------------------------------------- 1 | .render-wrapper{ 2 | display: flex; 3 | padding: 20px; 4 | max-width: 62.5em; 5 | width: 100%; 6 | margin: 0 auto; 7 | height: 100vh; 8 | } 9 | 10 | .btn-wrapper{ 11 | position: absolute; 12 | top: 0; 13 | right: 0; 14 | margin: 35px; 15 | display:flex; 16 | flex-direction: column; 17 | } 18 | .save-btn{ 19 | margin-bottom: 20px; 20 | } 21 | 22 | .save-btn:hover, .clear-btn:hover{ 23 | cursor: pointer; 24 | box-shadow: 3px 3px 3px 3px #B2F5EA; 25 | } 26 | 27 | -------------------------------------------------------------------------------- /src/components/sidebar/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Droppable, Draggable } from 'react-beautiful-dnd'; 3 | import { getSidebarListStyle, getSidebarItemStyle } from '../../helpers/styleFn.js'; 4 | import {ReactComponent as Menu} from '../../menu.svg'; 5 | import './sidebar.css'; 6 | 7 | const SideBarRender = ({ 8 | sidebarElements 9 | }) => { 10 | return ( 11 |

12 | 13 | {(provided, snapshot) => ( 14 |

17 | {sidebarElements?.map((item, index) => ( 18 | 22 | {(provided, snapshot) => ( 23 |

32 | 33 | {item.element} 34 |

35 | )} 36 | 37 | ))} 38 | {provided.placeholder} 39 |

40 | )} 41 | 42 |

43 | ) 44 | } 45 | 46 | export default SideBarRender; -------------------------------------------------------------------------------- /src/components/sidebar/sidebar.css: -------------------------------------------------------------------------------- 1 | .sidebar-wrapper{ 2 | background-color: #2E3648; 3 | } 4 | .sidebar-element{ 5 | transition: margin 200ms; 6 | margin-left: 1em; 7 | margin-top: 20px; 8 | margin-bottom: 20px; 9 | color: white; 10 | font-size: 20px; 11 | display: flex; 12 | align-items: center; 13 | } 14 | 15 | .sidebar-element:hover{ 16 | margin-left: -0.25em; 17 | margin-right: 0.25em; 18 | color:gray; 19 | background-color: #B2F5EA; 20 | box-shadow: 0 1px 3px 0 rgba(0,0,0,0.1), 0 1px 2px 0 rgba(0,0,0,0.06); 21 | cursor: move; 22 | } 23 | 24 | svg{ 25 | width: 20px; 26 | height: 15px; 27 | margin-right: 10px; 28 | opacity: 0.5; 29 | } -------------------------------------------------------------------------------- /src/helpers/generateUiElements.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | export const returnRespectiveHtmlElement = (type) => { 4 | switch (type) { 5 | case "button": 6 | return 7 | case "input": 8 | return 9 | case "textarea": 10 | return

11 |     case "box":
12 |       return <div className="box" />
13 |     case "heading":
14 |       return <h1>Heading1</h1>
15 |     default:
16 |       return <></>
17 |   }
18 | }
19 | 
20 | export const generateElement = (type, id) => {
21 |   let uiElement = {};
22 |   uiElement.id = `${id}`;
23 |   uiElement.element = type;
24 | 
25 |   return uiElement;
26 | }
27 | 
28 |

--------------------------------------------------------------------------------
/src/helpers/reOrderFn.js:
--------------------------------------------------------------------------------
 1 | 
 2 | export const reOrderWithInSameArea = (state,sourceId,destinationId) => {
 3 |   let updatedValue = [...state];
 4 |   const [movedElement] = updatedValue.splice(sourceId,1)
 5 |   updatedValue.splice(destinationId, 0, movedElement);
 6 |   return updatedValue;
 7 | }
 8 | 
 9 | /**
10 |  * @param generatedElement -> holds the new element that is generated after successful drag and drop
11 |  */
12 | 
13 | export const reOrderWithOtherArea = (state,destinationId,generatedElement) => {
14 |   let updatedValue = [...state];
15 |   updatedValue.splice(destinationId, 0, generatedElement);
16 |   return updatedValue;
17 | }
18 |

--------------------------------------------------------------------------------
/src/helpers/styleFn.js:
--------------------------------------------------------------------------------
 1 | 
 2 | const grid = 8
 3 | 
 4 | export const getSidebarListStyle = isDraggingOver => ({
 5 |     background: '#2E3648',
 6 |     padding: grid,
 7 |     width: 250
 8 | });
 9 | 
10 | export const getSidebarItemStyle = (isDragging, draggableStyle) => ({
11 |     userSelect: 'none',
12 |     padding:'10px',
13 |     color: isDragging&&'grey',
14 |     background: isDragging && '#B2F5EA',
15 |     ...draggableStyle
16 | });
17 | 
18 | 
19 | export const getDraggableItemStyle = (isDragging, draggableStyle) => ({
20 |     userSelect: 'none',
21 |     padding: grid * 2,
22 |     margin: `0 0 ${grid}px 0`,
23 |     background: isDragging && '#B2F5EA' ,
24 |     ...draggableStyle
25 | });
26 | 
27 |

--------------------------------------------------------------------------------
/src/index.css:
--------------------------------------------------------------------------------
 1 | body {
 2 |   margin: 0;
 3 |   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
 4 |     'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
 5 |     sans-serif;
 6 |   -webkit-font-smoothing: antialiased;
 7 |   -moz-osx-font-smoothing: grayscale;
 8 |   background: rgb(245, 245, 245);
 9 | }
10 | 
11 | code {
12 |   font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
13 |     monospace;
14 | }
15 | 
16 | * {
17 |   box-sizing: border-box;
18 | }
19 | 
20 | button{
21 |   padding: 10px;
22 |   width: 12.5em;
23 |   background: transparent;
24 |   box-shadow: 3px 3px 5px 3px #ccc;
25 |   font-weight: bold;
26 |   border-radius: 5px;
27 | }
28 | 
29 | input {
30 |     border-radius: 5px;
31 |     padding: 10px;
32 |     width: 18.7em;
33 |     font-size: 18px;
34 |     box-shadow: 3px 3px 5px 3px #ccc;
35 | }
36 | 
37 | textarea{
38 |     padding: 10px;
39 |     border-radius: 5px;
40 |     width: 18.7em;
41 |     height: 6.2em;
42 |     font-size: 18px;
43 |     font-weight: bold;
44 |     box-shadow: 3px 3px 5px 3px #ccc;
45 | }
46 | 
47 | .box{
48 |     border: 1px solid;
49 |     width: 100%;
50 |     padding: 10px;
51 | }

--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import ReactDOM from 'react-dom';
 3 | import RenderPlace from './components/renderPlace';
 4 | import * as serviceWorker from './serviceWorker';
 5 | import './index.css';
 6 | 
 7 | ReactDOM.render(
 8 |   <React.StrictMode>
 9 |     <RenderPlace />
10 |   </React.StrictMode>,
11 |   document.getElementById('root')
12 | );
13 | 
14 | // If you want your app to work offline and load faster, you can change
15 | // unregister() to register() below. Note this comes with some pitfalls.
16 | // Learn more about service workers: https://bit.ly/CRA-PWA
17 | serviceWorker.unregister();
18 |

--------------------------------------------------------------------------------
/src/menu.svg:
--------------------------------------------------------------------------------
1 | <svg viewBox="0 0 10 10" focusable="false" role="presentation" >
2 |  <path fill="currentColor" d="M3,2 C2.44771525,2 2,1.55228475 2,1 C2,0.44771525 2.44771525,0 3,0 C3.55228475,0 4,0.44771525 4,1 C4,1.55228475 3.55228475,2 3,2 Z M3,6 C2.44771525,6 2,5.55228475 2,5 C2,4.44771525 2.44771525,4 3,4 C3.55228475,4 4,4.44771525 4,5 C4,5.55228475 3.55228475,6 3,6 Z M3,10 C2.44771525,10 2,9.55228475 2,9 C2,8.44771525 2.44771525,8 3,8 C3.55228475,8 4,8.44771525 4,9 C4,9.55228475 3.55228475,10 3,10 Z M7,2 C6.44771525,2 6,1.55228475 6,1 C6,0.44771525 6.44771525,0 7,0 C7.55228475,0 8,0.44771525 8,1 C8,1.55228475 7.55228475,2 7,2 Z M7,6 C6.44771525,6 6,5.55228475 6,5 C6,4.44771525 6.44771525,4 7,4 C7.55228475,4 8,4.44771525 8,5 C8,5.55228475 7.55228475,6 7,6 Z M7,10 C6.44771525,10 6,9.55228475 6,9 C6,8.44771525 6.44771525,8 7,8 C7.55228475,8 8,8.44771525 8,9 C8,9.55228475 7.55228475,10 7,10 Z"></path>
3 | </svg>

--------------------------------------------------------------------------------
/src/serviceWorker.js:
--------------------------------------------------------------------------------
  1 | // This optional code is used to register a service worker.
  2 | // register() is not called by default.
  3 | 
  4 | // This lets the app load faster on subsequent visits in production, and gives
  5 | // it offline capabilities. However, it also means that developers (and users)
  6 | // will only see deployed updates on subsequent visits to a page, after all the
  7 | // existing tabs open on the page have been closed, since previously cached
  8 | // resources are updated in the background.
  9 | 
 10 | // To learn more about the benefits of this model and instructions on how to
 11 | // opt-in, read https://bit.ly/CRA-PWA
 12 | 
 13 | const isLocalhost = Boolean(
 14 |   window.location.hostname === 'localhost' ||
 15 |     // [::1] is the IPv6 localhost address.
 16 |     window.location.hostname === '[::1]' ||
 17 |     // 127.0.0.0/8 are considered localhost for IPv4.
 18 |     window.location.hostname.match(
 19 |       /^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/
 20 |     )
 21 | );
 22 | 
 23 | export function register(config) {
 24 |   if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) {
 25 |     // The URL constructor is available in all browsers that support SW.
 26 |     const publicUrl = new URL(process.env.PUBLIC_URL, window.location.href);
 27 |     if (publicUrl.origin !== window.location.origin) {
 28 |       // Our service worker won't work if PUBLIC_URL is on a different origin
 29 |       // from what our page is served on. This might happen if a CDN is used to
 30 |       // serve assets; see https://github.com/facebook/create-react-app/issues/2374
 31 |       return;
 32 |     }
 33 | 
 34 |     window.addEventListener('load', () => {
 35 |       const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`;
 36 | 
 37 |       if (isLocalhost) {
 38 |         // This is running on localhost. Let's check if a service worker still exists or not.
 39 |         checkValidServiceWorker(swUrl, config);
 40 | 
 41 |         // Add some additional logging to localhost, pointing developers to the
 42 |         // service worker/PWA documentation.
 43 |         navigator.serviceWorker.ready.then(() => {
 44 |           console.log(
 45 |             'This web app is being served cache-first by a service ' +
 46 |               'worker. To learn more, visit https://bit.ly/CRA-PWA'
 47 |           );
 48 |         });
 49 |       } else {
 50 |         // Is not localhost. Just register service worker
 51 |         registerValidSW(swUrl, config);
 52 |       }
 53 |     });
 54 |   }
 55 | }
 56 | 
 57 | function registerValidSW(swUrl, config) {
 58 |   navigator.serviceWorker
 59 |     .register(swUrl)
 60 |     .then(registration => {
 61 |       registration.onupdatefound = () => {
 62 |         const installingWorker = registration.installing;
 63 |         if (installingWorker == null) {
 64 |           return;
 65 |         }
 66 |         installingWorker.onstatechange = () => {
 67 |           if (installingWorker.state === 'installed') {
 68 |             if (navigator.serviceWorker.controller) {
 69 |               // At this point, the updated precached content has been fetched,
 70 |               // but the previous service worker will still serve the older
 71 |               // content until all client tabs are closed.
 72 |               console.log(
 73 |                 'New content is available and will be used when all ' +
 74 |                   'tabs for this page are closed. See https://bit.ly/CRA-PWA.'
 75 |               );
 76 | 
 77 |               // Execute callback
 78 |               if (config && config.onUpdate) {
 79 |                 config.onUpdate(registration);
 80 |               }
 81 |             } else {
 82 |               // At this point, everything has been precached.
 83 |               // It's the perfect time to display a
 84 |               // "Content is cached for offline use." message.
 85 |               console.log('Content is cached for offline use.');
 86 | 
 87 |               // Execute callback
 88 |               if (config && config.onSuccess) {
 89 |                 config.onSuccess(registration);
 90 |               }
 91 |             }
 92 |           }
 93 |         };
 94 |       };
 95 |     })
 96 |     .catch(error => {
 97 |       console.error('Error during service worker registration:', error);
 98 |     });
 99 | }
100 | 
101 | function checkValidServiceWorker(swUrl, config) {
102 |   // Check if the service worker can be found. If it can't reload the page.
103 |   fetch(swUrl, {
104 |     headers: { 'Service-Worker': 'script' },
105 |   })
106 |     .then(response => {
107 |       // Ensure service worker exists, and that we really are getting a JS file.
108 |       const contentType = response.headers.get('content-type');
109 |       if (
110 |         response.status === 404 ||
111 |         (contentType != null && contentType.indexOf('javascript') === -1)
112 |       ) {
113 |         // No service worker found. Probably a different app. Reload the page.
114 |         navigator.serviceWorker.ready.then(registration => {
115 |           registration.unregister().then(() => {
116 |             window.location.reload();
117 |           });
118 |         });
119 |       } else {
120 |         // Service worker found. Proceed as normal.
121 |         registerValidSW(swUrl, config);
122 |       }
123 |     })
124 |     .catch(() => {
125 |       console.log(
126 |         'No internet connection found. App is running in offline mode.'
127 |       );
128 |     });
129 | }
130 | 
131 | export function unregister() {
132 |   if ('serviceWorker' in navigator) {
133 |     navigator.serviceWorker.ready
134 |       .then(registration => {
135 |         registration.unregister();
136 |       })
137 |       .catch(error => {
138 |         console.error(error.message);
139 |       });
140 |   }
141 | }
142 |

--------------------------------------------------------------------------------
/src/setupTests.js:
--------------------------------------------------------------------------------
1 | // jest-dom adds custom jest matchers for asserting on DOM nodes.
2 | // allows you to do things like:
3 | // expect(element).toHaveTextContent(/react/i)
4 | // learn more: https://github.com/testing-library/jest-dom
5 | import '@testing-library/jest-dom/extend-expect';
6 |

--------------------------------------------------------------------------------