From 9edd934338bcb18f70bba5b326b96ffc7d750b17 Mon Sep 17 00:00:00 2001
From: Giacomo Pozzoni <giacomopoz@gmail.com>
Date: Fri, 1 Nov 2019 15:13:30 +0100
Subject: [PATCH] Fix react-slide-swiper not displaying any data when deployed
 to SharePoint

---
 samples/react-slide-swiper/README.md          |   4 +
 .../reactSlideSwiper/components/Card/Card.tsx |   6 +-
 .../reactSlideSwiper/services/ListItem.ts     |   6 +-
 .../reactSlideSwiper/services/ListMock.ts     | 144 +++++++++---------
 4 files changed, 82 insertions(+), 78 deletions(-)

diff --git a/samples/react-slide-swiper/README.md b/samples/react-slide-swiper/README.md
index 5d8575acd..0769b7a4e 100644
--- a/samples/react-slide-swiper/README.md
+++ b/samples/react-slide-swiper/README.md
@@ -58,6 +58,10 @@ This Web Part illustrates the following concepts on top of the SharePoint Framew
 - How JavaScript library can be loaded by the help of requirejs in web part.
 - Mobile Touch capabilities
 
+## SharePoint info
+
+When using the webpart in SharePoint, either in the SharePoint Workbench or deployed, the webpart reads by default from a List called "Swiper Content" with fields Title, ImageUrl, Description of type Single line of text. The list has to be created manually.
+
 <img src="https://telemetry.sharepointpnp.com/sp-dev-fx-webparts/samples/react-slide-swiper" />
 
 
diff --git a/samples/react-slide-swiper/src/webparts/reactSlideSwiper/components/Card/Card.tsx b/samples/react-slide-swiper/src/webparts/reactSlideSwiper/components/Card/Card.tsx
index 0adca85e4..515882c6e 100644
--- a/samples/react-slide-swiper/src/webparts/reactSlideSwiper/components/Card/Card.tsx
+++ b/samples/react-slide-swiper/src/webparts/reactSlideSwiper/components/Card/Card.tsx
@@ -8,11 +8,11 @@ export default class Card extends React.Component<ICardProps, {}> {
     return (
       <div className={styles.card}>
         <div className={styles.wrapper}>
-          <img src={this.props.listItem.imageUrl} className={styles.image} />
+          <img src={this.props.listItem.ImageUrl} className={styles.image} />
           <a href="#" className={styles.url} >
-            <h3 className={styles.title}>{this.props.listItem.title}</h3>
+            <h3 className={styles.title}>{this.props.listItem.Title}</h3>
           </a>
-          <p className={styles.description}>{this.props.listItem.description}</p>
+          <p className={styles.description}>{this.props.listItem.Description}</p>
         </div>
       </div>
     );
diff --git a/samples/react-slide-swiper/src/webparts/reactSlideSwiper/services/ListItem.ts b/samples/react-slide-swiper/src/webparts/reactSlideSwiper/services/ListItem.ts
index be5a061bd..774b7cea0 100644
--- a/samples/react-slide-swiper/src/webparts/reactSlideSwiper/services/ListItem.ts
+++ b/samples/react-slide-swiper/src/webparts/reactSlideSwiper/services/ListItem.ts
@@ -1,6 +1,6 @@
 export class ListItem {
 
-    public title: string;
-    public description:string;
-    public imageUrl: string;
+    public Title: string;
+    public Description:string;
+    public ImageUrl: string;
 }
\ No newline at end of file
diff --git a/samples/react-slide-swiper/src/webparts/reactSlideSwiper/services/ListMock.ts b/samples/react-slide-swiper/src/webparts/reactSlideSwiper/services/ListMock.ts
index 0506adedb..7913617c7 100644
--- a/samples/react-slide-swiper/src/webparts/reactSlideSwiper/services/ListMock.ts
+++ b/samples/react-slide-swiper/src/webparts/reactSlideSwiper/services/ListMock.ts
@@ -9,124 +9,124 @@ export class ListMock implements IListService {
         const fakeData: Array<ListItem> = [
 
             {
-                title: 'A convergent value empowers the standard-setters',
-                description: 'The General Head of IT Strategy benchmarks business-for-business agilities',
-                imageUrl: 'https://blog.velingeorgiev.com/static/images/OFFICE365.png'
+                Title: 'A convergent value empowers the standard-setters',
+                Description: 'The General Head of IT Strategy benchmarks business-for-business agilities',
+                ImageUrl: 'https://blog.velingeorgiev.com/static/images/OFFICE365.png'
             },
             {
-                title: 'The Digital Marketers empower a digitized correlation',
-                description: 'Whereas synchronized brand values promote strategy formulations',
-                imageUrl: 'https://blog.velingeorgiev.com/static/images/POWERSHELL.png'
+                Title: 'The Digital Marketers empower a digitized correlation',
+                Description: 'Whereas synchronized brand values promote strategy formulations',
+                ImageUrl: 'https://blog.velingeorgiev.com/static/images/POWERSHELL.png'
             },
             {
-                title: 'The market thinker strategically standardizes a competitive success',
-                description: 'The thinkers/planners benchmark a disciplined growth momentum',
-                imageUrl: 'https://blog.velingeorgiev.com/static/images/PYTHON.png'
+                Title: 'The market thinker strategically standardizes a competitive success',
+                Description: 'The thinkers/planners benchmark a disciplined growth momentum',
+                ImageUrl: 'https://blog.velingeorgiev.com/static/images/PYTHON.png'
             },
             {
-                title: 'We are going to secure our cross-pollinations',
-                description: 'We are working hard to reintermediate a competitive advantage, while the gatekeeper straightforwardly identifies barriers to success',
-                imageUrl: 'https://blog.velingeorgiev.com/static/images/SP.png'
+                Title: 'We are going to secure our cross-pollinations',
+                Description: 'We are working hard to reintermediate a competitive advantage, while the gatekeeper straightforwardly identifies barriers to success',
+                ImageUrl: 'https://blog.velingeorgiev.com/static/images/SP.png'
             },
             {
-                title: 'A convergent value empowers the standard-setters',
-                description: 'The General Head of IT Strategy benchmarks business-for-business agilities',
-                imageUrl: 'https://blog.velingeorgiev.com/static/images/JAVASCRIPT.png'
+                Title: 'A convergent value empowers the standard-setters',
+                Description: 'The General Head of IT Strategy benchmarks business-for-business agilities',
+                ImageUrl: 'https://blog.velingeorgiev.com/static/images/JAVASCRIPT.png'
             },
             {
-                title: 'The Digital Marketers empower a digitized correlation',
-                description: 'Whereas synchronized brand values promote strategy formulations',
-                imageUrl: 'https://blog.velingeorgiev.com/static/images/POWERSHELL.png'
+                Title: 'The Digital Marketers empower a digitized correlation',
+                Description: 'Whereas synchronized brand values promote strategy formulations',
+                ImageUrl: 'https://blog.velingeorgiev.com/static/images/POWERSHELL.png'
             },
             {
-                title: 'The market thinker strategically standardizes a competitive success',
-                description: 'The thinkers/planners benchmark a disciplined growth momentum',
-                imageUrl: 'https://blog.velingeorgiev.com/static/images/PYTHON.png'
+                Title: 'The market thinker strategically standardizes a competitive success',
+                Description: 'The thinkers/planners benchmark a disciplined growth momentum',
+                ImageUrl: 'https://blog.velingeorgiev.com/static/images/PYTHON.png'
             },
             {
-                title: 'We are going to secure our cross-pollinations',
-                description: 'We are working hard to reintermediate a competitive advantage, while the gatekeeper straightforwardly identifies barriers to success',
-                imageUrl: 'https://blog.velingeorgiev.com/static/images/SP.png'
+                Title: 'We are going to secure our cross-pollinations',
+                Description: 'We are working hard to reintermediate a competitive advantage, while the gatekeeper straightforwardly identifies barriers to success',
+                ImageUrl: 'https://blog.velingeorgiev.com/static/images/SP.png'
             },
             {
-                title: 'A convergent value empowers the standard-setters',
-                description: 'The General Head of IT Strategy benchmarks business-for-business agilities',
-                imageUrl: 'https://blog.velingeorgiev.com/static/images/OFFICE365.png'
+                Title: 'A convergent value empowers the standard-setters',
+                Description: 'The General Head of IT Strategy benchmarks business-for-business agilities',
+                ImageUrl: 'https://blog.velingeorgiev.com/static/images/OFFICE365.png'
             },
             {
-                title: 'The Digital Marketers empower a digitized correlation',
-                description: 'Whereas synchronized brand values promote strategy formulations',
-                imageUrl: 'https://blog.velingeorgiev.com/static/images/JAVASCRIPT.png'
+                Title: 'The Digital Marketers empower a digitized correlation',
+                Description: 'Whereas synchronized brand values promote strategy formulations',
+                ImageUrl: 'https://blog.velingeorgiev.com/static/images/JAVASCRIPT.png'
             },
             {
-                title: 'The market thinker strategically standardizes a competitive success',
-                description: 'The thinkers/planners benchmark a disciplined growth momentum',
-                imageUrl: 'https://blog.velingeorgiev.com/static/images/PYTHON.png'
+                Title: 'The market thinker strategically standardizes a competitive success',
+                Description: 'The thinkers/planners benchmark a disciplined growth momentum',
+                ImageUrl: 'https://blog.velingeorgiev.com/static/images/PYTHON.png'
             },
             {
-                title: 'We are going to secure our cross-pollinations',
-                description: 'We are working hard to reintermediate a competitive advantage, while the gatekeeper straightforwardly identifies barriers to success',
-                imageUrl: 'https://blog.velingeorgiev.com/static/images/SP.png'
+                Title: 'We are going to secure our cross-pollinations',
+                Description: 'We are working hard to reintermediate a competitive advantage, while the gatekeeper straightforwardly identifies barriers to success',
+                ImageUrl: 'https://blog.velingeorgiev.com/static/images/SP.png'
             },
             {
-                title: 'A convergent value empowers the standard-setters',
-                description: 'The General Head of IT Strategy benchmarks business-for-business agilities',
-                imageUrl: 'https://blog.velingeorgiev.com/static/images/OFFICE365.png'
+                Title: 'A convergent value empowers the standard-setters',
+                Description: 'The General Head of IT Strategy benchmarks business-for-business agilities',
+                ImageUrl: 'https://blog.velingeorgiev.com/static/images/OFFICE365.png'
             },
             {
-                title: 'The Digital Marketers empower a digitized correlation',
-                description: 'Whereas synchronized brand values promote strategy formulations',
-                imageUrl: 'https://blog.velingeorgiev.com/static/images/POWERSHELL.png'
+                Title: 'The Digital Marketers empower a digitized correlation',
+                Description: 'Whereas synchronized brand values promote strategy formulations',
+                ImageUrl: 'https://blog.velingeorgiev.com/static/images/POWERSHELL.png'
             },
             {
-                title: 'The market thinker strategically standardizes a competitive success',
-                description: 'The thinkers/planners benchmark a disciplined growth momentum',
-                imageUrl: 'https://blog.velingeorgiev.com/static/images/JAVASCRIPT.png'
+                Title: 'The market thinker strategically standardizes a competitive success',
+                Description: 'The thinkers/planners benchmark a disciplined growth momentum',
+                ImageUrl: 'https://blog.velingeorgiev.com/static/images/JAVASCRIPT.png'
             },
             {
-                title: 'We are going to secure our cross-pollinations',
-                description: 'We are working hard to reintermediate a competitive advantage, while the gatekeeper straightforwardly identifies barriers to success',
-                imageUrl: 'https://blog.velingeorgiev.com/static/images/SP.png'
+                Title: 'We are going to secure our cross-pollinations',
+                Description: 'We are working hard to reintermediate a competitive advantage, while the gatekeeper straightforwardly identifies barriers to success',
+                ImageUrl: 'https://blog.velingeorgiev.com/static/images/SP.png'
             },
             {
-                title: 'A convergent value empowers the standard-setters',
-                description: 'The General Head of IT Strategy benchmarks business-for-business agilities',
-                imageUrl: 'https://blog.velingeorgiev.com/static/images/OFFICE365.png'
+                Title: 'A convergent value empowers the standard-setters',
+                Description: 'The General Head of IT Strategy benchmarks business-for-business agilities',
+                ImageUrl: 'https://blog.velingeorgiev.com/static/images/OFFICE365.png'
             },
             {
-                title: 'The Digital Marketers empower a digitized correlation',
-                description: 'Whereas synchronized brand values promote strategy formulations',
-                imageUrl: 'https://blog.velingeorgiev.com/static/images/POWERSHELL.png'
+                Title: 'The Digital Marketers empower a digitized correlation',
+                Description: 'Whereas synchronized brand values promote strategy formulations',
+                ImageUrl: 'https://blog.velingeorgiev.com/static/images/POWERSHELL.png'
             },
             {
-                title: 'The market thinker strategically standardizes a competitive success',
-                description: 'The thinkers/planners benchmark a disciplined growth momentum',
-                imageUrl: 'https://blog.velingeorgiev.com/static/images/PYTHON.png'
+                Title: 'The market thinker strategically standardizes a competitive success',
+                Description: 'The thinkers/planners benchmark a disciplined growth momentum',
+                ImageUrl: 'https://blog.velingeorgiev.com/static/images/PYTHON.png'
             },
             {
-                title: 'We are going to secure our cross-pollinations',
-                description: 'We are working hard to reintermediate a competitive advantage, while the gatekeeper straightforwardly identifies barriers to success',
-                imageUrl: 'https://blog.velingeorgiev.com/static/images/JAVASCRIPT.png'
+                Title: 'We are going to secure our cross-pollinations',
+                Description: 'We are working hard to reintermediate a competitive advantage, while the gatekeeper straightforwardly identifies barriers to success',
+                ImageUrl: 'https://blog.velingeorgiev.com/static/images/JAVASCRIPT.png'
             },
             {
-                title: 'A convergent value empowers the standard-setters',
-                description: 'The General Head of IT Strategy benchmarks business-for-business agilities',
-                imageUrl: 'https://blog.velingeorgiev.com/static/images/OFFICE365.png'
+                Title: 'A convergent value empowers the standard-setters',
+                Description: 'The General Head of IT Strategy benchmarks business-for-business agilities',
+                ImageUrl: 'https://blog.velingeorgiev.com/static/images/OFFICE365.png'
             },
             {
-                title: 'The Digital Marketers empower a digitized correlation',
-                description: 'Whereas synchronized brand values promote strategy formulations',
-                imageUrl: 'https://blog.velingeorgiev.com/static/images/POWERSHELL.png'
+                Title: 'The Digital Marketers empower a digitized correlation',
+                Description: 'Whereas synchronized brand values promote strategy formulations',
+                ImageUrl: 'https://blog.velingeorgiev.com/static/images/POWERSHELL.png'
             },
             {
-                title: 'The market thinker strategically standardizes a competitive success',
-                description: 'The thinkers/planners benchmark a disciplined growth momentum',
-                imageUrl: 'https://blog.velingeorgiev.com/static/images/PYTHON.png'
+                Title: 'The market thinker strategically standardizes a competitive success',
+                Description: 'The thinkers/planners benchmark a disciplined growth momentum',
+                ImageUrl: 'https://blog.velingeorgiev.com/static/images/PYTHON.png'
             },
             {
-                title: 'We are going to secure our cross-pollinations',
-                description: 'We are working hard to reintermediate a competitive advantage, while the gatekeeper straightforwardly identifies barriers to success',
-                imageUrl: 'https://blog.velingeorgiev.com/static/images/SP.png'
+                Title: 'We are going to secure our cross-pollinations',
+                Description: 'We are working hard to reintermediate a competitive advantage, while the gatekeeper straightforwardly identifies barriers to success',
+                ImageUrl: 'https://blog.velingeorgiev.com/static/images/SP.png'
             }
         ];