Refactor rendering

src/App.css

@@ -4,48 +4,13 @@ body {
   background-color: #1e1e1e;
 }
 
-.App-logo {
-  height: 40vmin;
-  pointer-events: none;
-}
-
-@media (prefers-reduced-motion: no-preference) {
-  .App-logo {
-    animation: App-logo-spin infinite 20s linear;
-  }
-}
-
 .img-card {
   width: 95px;
-  padding: 0px 1px 0px 1px;
+  padding: 0px 1px;
 }
 
 .img-card-hidden {
   width: 95px;
   padding: 0px 1px 0px 1px;
   display: none;
-}
+}
-
-.App-header {
-  background-color: #282c34;
-  min-height: 100vh;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  font-size: calc(10px + 2vmin);
-  color: white;
-}
-
-.App-link {
-  color: #61dafb;
-}
-
-@keyframes App-logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-}

src/App.test.tsx

@@ -1,9 +0,0 @@
-import React from 'react';
-import { render } from '@testing-library/react';
-import App from './App';
-
-test('renders learn react link', () => {
-  const { getByText } = render(<App />);
-  const linkElement = getByText(/learn react/i);
-  expect(linkElement).toBeInTheDocument();
-});

src/App.tsx

@@ -1,25 +0,0 @@
-import React from 'react';
-import logo from './logo.svg';
-import './App.css';
-
-
-
-const App : React.FC<{}> = () => {
-  return (
-    <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
-      </header>
-    </div>
-  );
-};
-
-export default App;

src/Gallery.tsx

@@ -1,6 +1,5 @@
-import React, { Fragment, useEffect, useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import GalleryCard from './GalleryCard';
-import './App.css';
 
 const defaultSet: (size: number) => Set<number> = (size: number) => new Set([...Array.from(Array(size).keys()).map(v => v + 1)]);
 
@@ -83,11 +82,11 @@ const Gallery: React.FC<{ size: number }> = ({ size }) => {
   useEffect(() => storeSet(collection));
 
   return (
-    <Fragment>
+    <>
-      {Array.from(originalSet).map((value, key, theset) =>
+      {Array.from(originalSet).map((value) =>
         <GalleryCard id={value} key={value} hidden={collection.has(value)} removeCallback={() => addToCollection(value)} />
       )}
-    </Fragment>)
+    </>)
 };
 
 export default Gallery;

src/GalleryCard.tsx

@@ -1,14 +1,11 @@
 import React from 'react';
-import './App.css';
 
 const GalleryCard: React.FC<{ id: number, hidden: boolean, removeCallback: () => any }> = ({ id, hidden, removeCallback}) => {
 
-  const clickHandler: ((value: number) => ((eve: React.MouseEvent) => any)) = (value) => {
+  const fadeOut = (element: EventTarget & Element) => {
-    return (event: React.MouseEvent) => {
-      var element = event.currentTarget;
       element.setAttribute("style", "");
-      var opacity = 1.0;  // initial opacity
+      let opacity = 1.0;
-      var timer = setInterval(function () {
+      const timer = setInterval(function () {
         if (opacity <= 0.1) {
           clearInterval(timer);
           removeCallback();
@@ -16,15 +13,16 @@ const GalleryCard: React.FC<{ id: number, hidden: boolean, removeCallback: () =>
         element.setAttribute("style", `opacity: ${opacity};`);
         opacity *= 0.9;
       }, 7);
-    };
   };
 
-  return <img
+  return (!hidden ?
-    onClick={hidden? () => {}: clickHandler(id)}
+    <img
-    className={hidden?"img-card-hidden":"img-card"}
+      onClick={hidden ? () => { } : (event) => fadeOut(event.currentTarget)}
-    alt={`Pokemon card with number ${String(id)}`}
+      className={hidden ? "img-card-hidden" : "img-card"}
-    src={`https://dominic.leafbla.de/cards/res/${String(id).padStart(3, '0')}.jpg`}
+      alt={`Pokemon card with number ${String(id)}`}
-  />;
+      src={`https://dominic.leafbla.de/cards/res/${String(id).padStart(3, '0')}.jpg`}
+    />
+    : null);
 };
 
-export default GalleryCard;
+export default GalleryCard;

src/index.css

@@ -1,13 +0,0 @@
-body {
-  margin: 0;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
-    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
-    sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-
-code {
-  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
-    monospace;
-}

src/index.tsx

@@ -1,17 +1,11 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
-import './index.css';
 import Gallery from './Gallery';
-import * as serviceWorker from './serviceWorker';
+import './App.css';
 
 ReactDOM.render(
   <React.StrictMode>
     <Gallery size={150}/>
   </React.StrictMode>,
   document.getElementById('root')
-);
+);
-
-// If you want your app to work offline and load faster, you can change
-// unregister() to register() below. Note this comes with some pitfalls.
-// Learn more about service workers: https://bit.ly/CRA-PWA
-serviceWorker.unregister();