From fcc8b61ba6f78315d9b5228c035aee65a3f86056 Mon Sep 17 00:00:00 2001
From: anum1608 <riaz.anum@outlook.com>
Date: Tue, 23 Jul 2024 12:08:01 +0100
Subject: [PATCH] PhotoViewer and Image selector working together to display
 selected thumbnail

---
 src/App.css                       | 11 +----------
 src/App.tsx                       | 27 ++++++++++++++++-----------
 src/photoViewer/ImageSelector.css |  5 +++++
 src/photoViewer/ImageSelector.tsx | 20 +++++++++++++-------
 src/saving_code.ts                | 30 ------------------------------
 5 files changed, 35 insertions(+), 58 deletions(-)
 delete mode 100644 src/saving_code.ts

diff --git a/src/App.css b/src/App.css
index ea5b87a..4bb47e6 100644
--- a/src/App.css
+++ b/src/App.css
@@ -41,14 +41,5 @@
   color: #888;
 }
 
-.thumbnail{
-  border: 1px solid #ddd; /* Gray border */
-  border-radius: 4px;  /* Rounded border */
-  padding: 5px; /* Some padding */
-  width: 150px; /* Set a small width */
-}
 
-img.thumbnail:hover {
-  box-shadow: 0 0 20px 10px rgba(0, 140, 186, 0.5);
-  border-radius: 4px;
-}
+
diff --git a/src/App.tsx b/src/App.tsx
index 2e3dacc..b3692bd 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -3,9 +3,14 @@ import reactLogo from './assets/react.svg'
 import viteLogo from '/vite.svg'
 import './App.css'
 import {PhotoViewer} from './photoViewer/PhotoViewer.tsx'
-import { ImageSelector, currentImage } from './photoViewer/ImageSelector.tsx'
+import { ImageSelector } from './photoViewer/ImageSelector.tsx'
 import { GetImageUrls } from './photoViewer/ImageSelector.tsx'
 
+//TOREAD : https://react.dev/learn/sharing-state-between-components
+//TOREAD : https://react.dev/learn/responding-to-events#passing-event-handlers-as-props
+
+
+
 
 
 function App() {
@@ -13,7 +18,10 @@ function App() {
   const imagesID = [1, 24, 32, 36, 44, 47];
   const url = GetImageUrls(imagesID);
 
-
+  const [currentImage, setCurrentImage] = useState('https://picsum.photos/id/250/600/300.jpg')
+  function setCurrentImageFunction(url:string){
+    setCurrentImage(url)
+  }
   //console.log(url)
 
   return (
@@ -21,19 +29,16 @@ function App() {
       <div className="card">
         <button onClick={() => setCount((count) => count + 1)}>
           count is {count}
-        </button>
-        <p>
-          Edit <code>src/App.tsx</code> and save to test HMR
-        </p>
+        </button>  
       </div>
-      <p className="read-the-docs">
-        Click on the Vite and React logos to learn more
-      </p>
 
       <h1>React Photo Viewer</h1>
       <PhotoViewer photoUrl={currentImage} />
-
-      <ImageSelector urlList={url}/>
+      <div className='imageSelector'>
+        <ImageSelector setCurrentImageFunction={setCurrentImageFunction} />
+      </div>
+      {/* <ImageSelector urlList={url}  /> */}
+      
 
       
 
diff --git a/src/photoViewer/ImageSelector.css b/src/photoViewer/ImageSelector.css
index 91fb822..afa4587 100644
--- a/src/photoViewer/ImageSelector.css
+++ b/src/photoViewer/ImageSelector.css
@@ -1,3 +1,8 @@
+.thumbnailList{
+    display: flex;
+    flex-direction: row;
+  }
+
 .thumbnail{
     border: 1px solid #ddd; /* Gray border */
     border-radius: 4px;  /* Rounded border */
diff --git a/src/photoViewer/ImageSelector.tsx b/src/photoViewer/ImageSelector.tsx
index c940908..d9c993a 100644
--- a/src/photoViewer/ImageSelector.tsx
+++ b/src/photoViewer/ImageSelector.tsx
@@ -1,20 +1,26 @@
 import React from "react";  // import React (to provide access to TSX)
-import { useState } from 'react'
 import './ImageSelector.css'
 
+const imageUrls = ['https://picsum.photos/id/1/600/300.jpg',
+                    'https://picsum.photos/id/24/600/300.jpg',
+                'https://picsum.photos/id/30/600/300.jpg',
+            'https://picsum.photos/id/56/600/300.jpg',
+        'https://picsum.photos/id/65/600/300.jpg']
 
-export const [currentImage, setCurrentImage] = useState('https://picsum.photos/id/250/600/300.jpg')
+interface ImageSelectorProps{
+    setCurrentImageFunction : (url:string)=>void;
+}
    
 
-
-export function ImageSelector({urlList}: {urlList: string[]}) {    
+//export function ImageSelector({urlList}: {urlList: string[]}, prop:ImageSelectorProps) {
+export function ImageSelector(prop:ImageSelectorProps) {    
     
     return (                
 
-        <div>
-            {urlList.map(imageUrl => { 
+        <div className="thumbnailList">
+            {imageUrls.map(imageUrl => { 
                 return          <div>
-                                <img className='thumbnail' onClick={() => setCurrentImage(imageUrl)} src={imageUrl} />
+                                <img className='thumbnail' onClick={() => prop.setCurrentImageFunction(imageUrl)} src={imageUrl} />
                                 </div> })}
         </div>
     );
diff --git a/src/saving_code.ts b/src/saving_code.ts
deleted file mode 100644
index 982566e..0000000
--- a/src/saving_code.ts
+++ /dev/null
@@ -1,30 +0,0 @@
-
-
-import { useState } from 'react'
-import reactLogo from './assets/react.svg'
-import viteLogo from '/vite.svg'
-import './App.css'
-import {PhotoViewer} from './photoViewer/PhotoViewer.tsx'
-import { ImageSelector } from './photoViewer/ImageSelector.tsx'
-import { GetImageUrls } from './photoViewer/ImageSelector.tsx'
-
-function App() {
-  const [count, setCount] = useState(0)
-  const imagesID = [1, 24, 32, 36, 44, 47];
-  const url = GetImageUrls(imagesID);
-
-  console.log(url)
-
-  return (
-    <>
-
-
-      <h1>React Photo Viewer</h1>
-      <PhotoViewer photoUrl='https://picsum.photos/id/230/200/300' />
-      <ImageSelector/>
-      <div>{url}</div>
-
-
-    </>
-  )
-}
\ No newline at end of file