Add config file to provide notification URL (#18)

* add config

* add dev and prod configs

* Update App.js

* Update README.md

* cong

* Update README.md

* Update package.json

README.md

@@ -53,6 +53,10 @@ If you need to update `npm`, you can make it using `npm`!
     cd NotificationCenter
     npm install --force
 
+    Note:
+    Make sure that you have correct endpoint set inside `config/.env` file:
+    You case this URL for dev notifications: https://d2xm4bcf3at21r.cloudfront.net/dynNotifications.json
+
 ## Running the project
 
     npm run start

config/.env

@@ -0,0 +1 @@
+NOTIFICATION_URL=""

config/.env.dev

@@ -0,0 +1 @@
+NOTIFICATION_URL=""

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dynamods/notifications-center",
-  "version": "0.0.10",
+  "version": "0.0.11",
   "description": "Notification center maintained by Dynamo Team@Autodesk",
   "author": "Autodesk Inc.",
   "license": "MIT",
@@ -18,7 +18,7 @@
     "lint:fix": "eslint src/ tests/ --fix",
     "test": "npm run lint:fix && jest",
     "start": "webpack serve",
-    "build": "webpack --config webpack.config.js --mode=development",
+    "build": "webpack --config webpack.config.js --env dev --mode=development",
     "bundle": "webpack --config webpack.config.js --mode=production",
     "copy": "cp package.json dist/ && cp README.md dist/",
     "production": "npm run bundle && npm run copy"
@@ -29,15 +29,16 @@
     "react-dom": "^18.2.0"
   },
   "devDependencies": {
-    "@filipeop/notifications-panel": "^0.0.2",
     "@babel/core": "^7.18.6",
     "@babel/preset-env": "^7.18.6",
     "@babel/preset-react": "^7.18.6",
+    "@filipeop/notifications-panel": "^0.0.2",
     "@hig/timestamp": "^2.1.0",
     "axios": "^0.27.2",
     "babel-loader": "^8.2.5",
     "compression-webpack-plugin": "^10.0.0",
     "css-loader": "^6.7.1",
+    "dotenv-webpack": "^8.0.0",
     "enzyme": "^3.11.0",
     "enzyme-adapter-react-16": "^1.15.6",
     "eslint": "^8.21.0",

src/App.js

@@ -7,33 +7,34 @@ import Timestamp from '@hig/timestamp';
 function App() {
   const [APIData, setAPIData] = useState(false);
   useEffect(() => {
-    axios.get('http://demo9540080.mockable.io/notifications')
-      .then((response) => {
-        const notifications = response.data.notifications;
-        let notificationData = [];
-
-        for (let i = 0; i < notifications.length; i++) {
-          var notificationItem = {
-            id: notifications[i].id,
-            featured: true,
-            unread: true,
-            image: <img width={40} src={notifications[i].thumbnail}></img>,
-            message: notifications[i].title,
-            href: notifications[i].linkTitle,
-            timestamp: <Timestamp timestamp={notifications[i].created} />,
-            content: <div>                
-              <b>{notifications[i].title}</b>
-              <p>{notifications[i].longDescription}</p>
-              <a href={notifications[i].link}>{notifications[i].linkTitle}</a>
-            </div>
-          };
-          notificationData.push(notificationItem);
-        }
-
-        setAPIData(notificationData);
-      });
+    window.RequestNotifications = RequestNotifications;
   }, []);
-
+
+  const RequestNotifications = (url) => {
+    axios.get(url)
+    .then((response) => {
+      const notifications = response.data.notifications;
+      let notificationData = [];
+      for (let i = 0; i < notifications.length; i++) {
+        var notificationItem = {
+          id: notifications[i].id,
+          featured: true,
+          unread: true,
+          image: <img width={40} src={notifications[i].thumbnail}></img>,
+          message: notifications[i].title,
+          href: notifications[i].linkTitle,
+          timestamp: <Timestamp timestamp={notifications[i].created} />,
+          content: <div>
+            <b>{notifications[i].title}</b>
+            <p>{notifications[i].longDescription}</p>
+            <a href={notifications[i].link}>{notifications[i].linkTitle}</a>
+          </div>
+        };
+        notificationData.push(notificationItem);
+      }
+      setAPIData(notificationData);
+    });
+  }
   return APIData ?
   <NotificationsPanel class="NotificationsFlyout"
       heading="Notifications"
@@ -42,5 +43,4 @@ function App() {
   </NotificationsPanel>
   : null;
 }
-
-export default App;
+export default App;

webpack.config.js

@@ -1,44 +1,52 @@
 const path = require('path');
 const TerserPlugin = require('terser-webpack-plugin');
+const Dotenv = require('dotenv-webpack');
 
-module.exports = {
-  mode: 'development',
-  entry: {
-    app: './src/index.js',
-  },
-  output: {
-    path: path.join(__dirname, '/dist/build'),
-    filename: 'index.bundle.js',
-    publicPath: '',
-    clean: true,
-  },
-  module: {
-    rules: [
-      {
-        test: /\.(js|jsx)$/,
-        exclude: /node_modules/,
-        use: {
-          loader: 'babel-loader'
-        }
-      },
-      {
-        test: /\.(scss|css)$/,
-        exclude: /node_modules/,
-        use: [
-          'style-loader',
-          'css-loader',
-          'sass-loader'
-        ]
-      }
-    ]
-  },
-  optimization: {
-    minimizer: [
-      new TerserPlugin({
-        parallel: true,
-        terserOptions: {
+module.exports = env => {
+    return {
+        mode: 'development',
+        entry: {
+            app: './src/index.js',
+        },
+        output: {
+            path: path.join(__dirname, '/dist/build'),
+            filename: 'index.bundle.js',
+            publicPath: '',
+            clean: true,
+        },
+        module: {
+            rules: [
+                {
+                    test: /\.(js|jsx)$/,
+                    exclude: /node_modules/,
+                    use: {
+                        loader: 'babel-loader'
+                    }
+                },
+                {
+                    test: /\.(scss|css)$/,
+                    exclude: /node_modules/,
+                    use: [
+                        'style-loader',
+                        'css-loader',
+                        'sass-loader'
+                    ]
+                }
+            ]
         },
-      }),
-    ],
-  }
+        optimization: {
+            minimizer: [
+                new TerserPlugin({
+                    parallel: true,
+                    terserOptions: {
+                    },
+                }),
+            ],
+        },
+        plugins: [
+            new Dotenv({
+              path: `./config/.env${env.dev ? `.dev` : ''}`
+            })
+        ]
+    }
 };