refactor to env

index.html

@@ -8,8 +8,6 @@
       name="description"
       content="Web site created using create-react-app"
     />
-    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
-    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
     <!-- Import Semantic UI-->
     <link
       rel="stylesheet"

src/api/unsplash.js

@@ -1,11 +1,10 @@
-// This code will contain the API call rather than having it on the App.js
 import axios from 'axios';
 
-const apiKey = import.meta.env.VITE_APP_UNSPLASH_API_KEY;
+const authorization = `Client-ID ${import.meta.env.VITE_APP_UNSPLASH_API_KEY}`
 
 export default axios.create({
   baseURL: 'https://api.unsplash.com/',
   headers: {
-    Authorization: `Client-ID ${apiKey}`,
+    Authorization: authorization,
   },
 });

src/components/ImageCard.jsx

@@ -16,8 +16,6 @@ class ImageCard extends React.Component {
   }
 
   setSpans = () => {
-    console.log(this.imageRef.current.clientHeight);
-    // Get image height from imageRef in the DOM
     const height = this.imageRef.current.clientHeight;
     // calculate the number of spans
     const spans = Math.ceil(height / 10);

vite.config.js

@@ -2,10 +2,7 @@ import { defineConfig } from 'vite'
 import reactRefresh from '@vitejs/plugin-react-refresh'
 import svgrPlugin from 'vite-plugin-svgr'
 
-// see all documentation here https://vitejs.dev/config/
 export default defineConfig({
-  // This changes the out put dir from dist to build change as your need
-  // comment this out if that isn't relevant for your project
   build: {
     outDir: 'dist',
   },
@@ -14,7 +11,6 @@ export default defineConfig({
     svgrPlugin({
       svgrOptions: {
         icon: true,
-        // ...svgr options (https://react-svgr.com/docs/options/)
       },
     }),
   ],