Merge pull request #5 from thenikhilk/thenikhilk-patch-1

Removed CDN dependencies

config/package-solution.json

@@ -3,12 +3,11 @@
   "solution": {
     "name": "Instagram Feed",
     "id": "2d0ddffd-2b2b-497c-8ed7-f52d1bbd4d48",
-    "version": "1.0.0.0",
+    "version": "1.0.1.0",
     "includeClientSideAssets": true,
-    "skipFeatureDeployment": true,
-    "isDomainIsolated": false
+    "skipFeatureDeployment": true
   },
   "paths": {
     "zippedPackage": "solution/thenikhilk-sp-ig-feed.sppkg"
   }
-}
+}

config/write-manifests.json

@@ -1,4 +1,4 @@
 {
   "$schema": "https://developer.microsoft.com/json-schemas/spfx-build/write-manifests.schema.json",
-  "cdnBasePath": "https://cdn.jsdelivr.net/gh/thenikhilk/cdn/tnk-sp-ig/"
-}
+  "cdnBasePath": "<!-- PATH TO CDN -->"
+}

documentation/developer-guide.md

@@ -34,10 +34,16 @@ gulp bundle --ship
 gulp package-solution --ship
 ```
 
+### OR
+
+``` powershell
+npm run package
+```
+
 Files to deploy will be available at path `temp\deploy` and the package(*.sppkg) will be available at `sharepoint\solution` path.
 
 Make sure to update the `cdnBasePath` at `config\write-manifests.json` before deployment to the location where you have deployed your assets.
 
 Additional info for deployment is available at [link](https://docs.microsoft.com/en-us/sharepoint/dev/spfx/web-parts/get-started/deploy-web-part-to-cdn "link").
 
-SPFx Documentation: [link](https://docs.microsoft.com/en-us/sharepoint/dev/spfx/sharepoint-framework-overview "link")
+SPFx Documentation: [link](https://docs.microsoft.com/en-us/sharepoint/dev/spfx/sharepoint-framework-overview "link")

documentation/installation-guide.md

@@ -16,7 +16,6 @@ Download the latest version of the SharePoint App (`*.sppkg`) from [releases](ht
 1. Go to the SharePoint admin page. Go to the apps section and click on the Apps Catalog (if the Apps Catalog do not exist, create it).
 2. In the Apps Catalog, go to the Apps for SharePoint section.
 3. Drag & Drop the downloaded `thenikhilk-sp-ig-feed.sppkg` file in the Apps list. Wait during the deployment and verify that the package is correctly installed.
-4. Make a note of the URL shown while deploying and ensure it is accessible from your site since the Web Part will load assets from this CDN.
 
 ![App Catalog](assets/app-catalog.png "App Catalag")
 

package.json

@@ -9,33 +9,36 @@
   "scripts": {
     "build": "gulp bundle",
     "clean": "gulp clean",
-    "test": "gulp test"
+    "test": "gulp test",
+    "package": "gulp bundle --ship && gulp package-solution --ship"
   },
   "dependencies": {
-    "react": "16.8.5",
-    "react-dom": "16.8.5",
-    "@types/react": "16.8.8",
-    "@types/react-dom": "16.8.3",
-    "office-ui-fabric-react": "6.189.2",
     "@microsoft/sp-core-library": "1.9.1",
-    "@microsoft/sp-webpart-base": "1.9.1",
     "@microsoft/sp-lodash-subset": "1.9.1",
     "@microsoft/sp-office-ui-fabric-core": "1.9.1",
+    "@microsoft/sp-webpart-base": "1.9.1",
+    "@types/es6-promise": "0.0.33",
+    "@types/react": "16.8.8",
+    "@types/react-dom": "16.8.3",
     "@types/webpack-env": "1.13.1",
-    "@types/es6-promise": "0.0.33"
+    "jquery": "^3.4.1",
+    "office-ui-fabric-react": "6.189.2",
+    "react": "16.8.5",
+    "react-dom": "16.8.5"
   },
   "resolutions": {
     "@types/react": "16.8.8"
   },
   "devDependencies": {
+    "@microsoft/rush-stack-compiler-2.9": "0.7.16",
     "@microsoft/sp-build-web": "1.9.1",
-    "@microsoft/sp-tslint-rules": "1.9.1",
     "@microsoft/sp-module-interfaces": "1.9.1",
+    "@microsoft/sp-tslint-rules": "1.9.1",
     "@microsoft/sp-webpart-workbench": "1.9.1",
-    "@microsoft/rush-stack-compiler-2.9": "0.7.16",
-    "gulp": "~3.9.1",
     "@types/chai": "3.4.34",
+    "@types/jquery": "^3.3.31",
     "@types/mocha": "2.2.38",
-    "ajv": "~5.2.2"
+    "ajv": "~5.2.2",
+    "gulp": "~3.9.1"
   }
 }

src/models/IError.ts

@@ -2,5 +2,4 @@ export interface IError {
     status: number;
     heading: string;
     message: string;
-    error: TypeError;
 }

src/webparts/instagramFeed/components/InstagramFeed.tsx

@@ -12,6 +12,7 @@ import { ITheme, getTheme, mergeStyleSets } from 'office-ui-fabric-react/lib/Sty
 import * as strings from 'InstagramFeedWebPartStrings';
 import { IInstagramFeed, Edge } from '../../../models/IInstagramFeed';
 import { IError } from '../../../models/IError';
+import * as $ from "jquery";
 
 const shimmerWrapperClass = mergeStyles({
   padding: 2,
@@ -84,58 +85,87 @@ export default class InstagramFeed extends React.Component<IInstagramFeedProps,
     };
   }
 
-  private async _loadData() {
-    await fetch(`https://images${~~(Math.random() * 33)}-focus-opensocial.googleusercontent.com/gadgets/proxy?container=none&url=https://www.instagram.com/${this.props.username ? this.props.username : strings.DefaultUsername}`,
-      {
-        method: "GET",
-      })
-      .then(async (response) => {
-        let responseText = await response.text();
-        let regex = /_sharedData = ({.*);<\/script>/m,
-          json = JSON.parse(regex.exec(responseText)[1]),
-          data = json.entry_data.ProfilePage[0];
-        return data;
-      })
-      .then(
-        (result) => {
-          this.setState({
-            isLoaded: true,
-            items: result,
-            error: null
-          });
-          this.render();
-        },
-        (error) => {
-          let failure: IError = {
-            heading: strings.ErrorHeading,
-            message: strings.ErrorMessage,
-            status: 404,
-            error: error
-          };
-          // show error
-          this.setState({
-            items: null,
-            isLoaded: true,
-            error: failure
-          });
-        }
-      )
-      .catch(
-        (exception) => {
-          let failure: IError = {
-            heading: strings.ExceptionHeading,
-            message: strings.ExceptionMessage,
-            status: 500,
-            error: exception
-          };
-          // show exception
-          this.setState({
-            items: null,
-            isLoaded: true,
-            error: failure
-          });
+  private handleSuccess(success) {
+    let regex = /_sharedData = ({.*);<\/script>/m;
+    // let json = JSON.parse(regex.exec(success)[1]);
+    let json = JSON.parse(success);
+    if (json && json.graphql && json.graphql.user) {
+      let data = json;
+      this.setState({
+        isLoaded: true,
+        items: data,
+        error: null
+      });
+      this.render();
+    }
+  }
+
+  private handleFailure(error) {
+    let failure: IError = {
+      heading: strings.ErrorHeading,
+      message: strings.ErrorMessage,
+      status: error
+    };
+    // show error
+    this.setState({
+      items: null,
+      isLoaded: true,
+      error: failure
+    });
+  }
+
+  private getData(count) {
+    var params = {
+      url: `https://www.instagram.com/${this.props.username ? this.props.username.trim() : strings.DefaultUsername}/?__a=1`,
+      container: 'none'
+    };
+
+    var esc = encodeURIComponent;
+    var query = Object.keys(params)
+      .map(k => esc(k) + '=' + esc(params[k]))
+      .join('&');
+
+    let dataURL: string = `https://images${~~(Math.random() * 33)}-focus-opensocial.googleusercontent.com/gadgets/proxy?${query}`;
+    // let dataURL: string = `https://images${~~(Math.random() * 33)}-focus-opensocial.googleusercontent.com/gadgets/proxy?container=none&url=https://www.instagram.com/${this.props.username ? this.props.username.trim() : strings.DefaultUsername}/?__a=1`;
+    try {
+      let xhr = new XMLHttpRequest();
+      xhr.open('GET', dataURL);
+      xhr.onload = () => {
+        if (xhr.status === 200) {
+          this.handleSuccess(xhr.responseText);
+        } else if (xhr.status === 404) {
+          this.handleFailure(xhr.status);
+        } else {
+          this.getData(1);
         }
-      );
+      };
+      xhr.send();
+    } catch (exception) {
+      if (0 === count) {
+        this.getData(1);
+      } else {
+        throw exception;
+      }
+    }
+  }
+
+  private async _loadData() {
+    try {
+      this.getData(0);
+    } catch (exception) {
+      console.warn(`${exception.code}-${exception.name}: ${exception.message}`);
+      let failure: IError = {
+        heading: strings.ExceptionHeading,
+        message: strings.ExceptionMessage,
+        status: 500
+      };
+      // show exception
+      this.setState({
+        items: null,
+        isLoaded: true,
+        error: failure
+      });
+    }
   }
 
   public componentDidMount() {
@@ -159,7 +189,7 @@ export default class InstagramFeed extends React.Component<IInstagramFeedProps,
   }
 
   private _errorNotification = (): JSX.Element => {
-    console.error(this.state.error.error);
+    console.error(`${this.state.error.status}: ${this.state.error.message}`);
     return (
       <MessageBar
         messageBarType={MessageBarType.error}

src/webparts/instagramFeed/loc/en-us.js

@@ -9,7 +9,7 @@ define([], function () {
     "ShowAliasToggleFalseLabel": "No",
     "ToggleExpandText": "See more",
     "ToggleCollapseText": "Close",
-    "ExceptionHeading": "An error occurred",
+    "ExceptionHeading": "An exception occurred",
     "ExceptionMessage": "Failed to load data, please check WebPart settings or try again later.",
     "ErrorHeading": "An error occurred",
     "ErrorMessage": "Failed to load data, please check WebPart settings or try again later."