scrivito-news-reader/index.js

A React component/Scrivito widget which shows how to work with external REST-APIs.

!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t(require("react"),require("scrivito"),require("axios"),require("react-select")):"function"==typeof define&&define.amd?define(["react","scrivito","axios","react-select"],t):"object"==typeof exports?exports["scrivito-news-api"]=t(require("react"),require("scrivito"),require("axios"),require("react-select")):e["scrivito-news-api"]=t(e.react,e.scrivito,e.axios,e["react-select"])}(window,function(e,t,n,r){return function(e){var t={};function n(r){if(t[r])return t[r].exports;var a=t[r]={i:r,l:!1,exports:{}};return e[r].call(a.exports,a,a.exports,n),a.l=!0,a.exports}return n.m=e,n.c=t,n.d=function(e,t,r){n.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:r})},n.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},n.t=function(e,t){if(1&t&&(e=n(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var r=Object.create(null);if(n.r(r),Object.defineProperty(r,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var a in e)n.d(r,a,function(t){return e[t]}.bind(null,a));return r},n.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return n.d(t,"a",t),t},n.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},n.p="",n(n.s=4)}([function(t,n){t.exports=e},function(e,n){e.exports=t},function(e,t){e.exports=n},function(e,t){e.exports=r},function(e,t,n){"use strict";n.r(t);var r=n(1),a=(r.provideWidgetClass("NewsApiWidget",{attributes:{listType:["enum",{values:["card","list"]}],entries:"string",apiKey:"string",category:["enum",{values:["css","html","javascript","reactjs","typescript","visual-studio-code"]}]}}),n(0)),i=n(2),o=n.n(i),l=n(3),s=n.n(l);function c(e){return(c="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e})(e)}function u(e,t){for(var n=0;n<t.length;n++){var r=t[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(e,r.key,r)}}function p(e){return(p=Object.setPrototypeOf?Object.getPrototypeOf:function(e){return e.__proto__||Object.getPrototypeOf(e)})(e)}function f(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}function v(e,t){return(v=Object.setPrototypeOf||function(e,t){return e.__proto__=t,e})(e,t)}var d=[{value:"corona",label:"Corona"},{value:"covit-19",label:"Covit-19"},{value:"covit-19 impfungen",label:"Impfungen"},{value:"covit-19 medikamente",label:"Medikamente"},{value:"biotec",label:"Biotec"},{value:"ausgangssperre",label:"Ausgangssperre"},{value:"kontaktverbot",label:"Kontaktverbot"},{value:"wirtschaftliche auswirkungen durch corona",label:"Wirtschaftliche Auswirkungen"},{value:"hilfe für selbstständige",label:"Hilfe für Selbstständige"}],g=[{value:"20",label:"20"},{value:"40",label:"40"},{value:"60",label:"60"},{value:"80",label:"80"},{value:"100",label:"100"}],y=function(e){function t(e){var n,r,a;return function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,t),r=this,(n=!(a=p(t).call(this,e))||"object"!==c(a)&&"function"!=typeof a?f(r):a).widget=n.props.widget,n._category="covit-19",n.entries=n.widget.get("entries"),n.handleChange=n.handleChange.bind(f(n)),n.handleChangeEntries=n.handleChangeEntries.bind(f(n)),n.state={items:[],value:n._category,entries:n.entries},n}var n,r,i;return function(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function");e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,writable:!0,configurable:!0}}),t&&v(e,t)}(t,a["Component"]),n=t,(r=[{key:"componentDidMount",value:function(){var e=this,t=(this.state.value,this.state.entries);o.a.get("https://newsapi.org/v2/everything?q=".concat(this._category,"&language=de&pageSize=").concat(t,"&apiKey=").concat(this.widget.get("apiKey"))).then(function(e){return e.data}).then(function(t){e.setState({items:t.articles})})}},{key:"handleChange",value:function(e){var t=this;this.setState({value:e.value});var n=e.value,r=this.state.entries;o.a.get("https://newsapi.org/v2/everything?q=".concat(n,"&language=de&pageSize=").concat(r,"&apiKey=").concat(this.widget.get("apiKey"))).then(function(e){return e.data}).then(function(e){t.setState({items:e.articles})})}},{key:"handleChangeEntries",value:function(e){var t=this;this.setState({entries:e.value});var n=this.state.value,r=e.value;o.a.get("https://newsapi.org/v2/everything?q=".concat(n,"&pageSize=").concat(r,"&apiKey=").concat(this.widget.get("apiKey"))).then(function(e){return e.data}).then(function(e){t.setState({items:e.articles})})}},{key:"render",value:function(){return a.createElement("div",null,a.createElement("label",null,"Number of entries: "),a.createElement(s.a,{options:g,defaultValue:g[0],value:this.state.entries,onChange:this.handleChangeEntries}),a.createElement("label",null,"Categories: "),a.createElement(s.a,{options:d,defaultValue:d[0],value:this.state.category,onChange:this.handleChange}),a.createElement("div",{className:"article"},this.state.items.map(function(e,t){return e.url.startsWith("https")?a.createElement("div",{className:"row",key:t},a.createElement("div",{className:"col-md-4 mt-3 pr-xs-0"},a.createElement("a",{target:"_blank",href:"".concat(e.url)},a.createElement("img",{className:"img-responsive",src:"".concat(e.urlToImage)}))),a.createElement("div",{className:"col-md-8 pr-xs-0",key:t},a.createElement("a",{target:"_blank",href:"".concat(e.url)},a.createElement("div",null,e.source.name," "),a.createElement("h1",{className:"h5 m-0 p-0"},a.createElement("b",null,e.title)),a.createElement("p",{className:"m-0 p-0 h5"},e.description)))):null})))}}])&&u(n.prototype,r),i&&u(n,i),t}();r.provideComponent("NewsApiWidget",y),r.provideEditingConfig("NewsApiWidget",{title:"Newsapi Reader",attributes:{listType:{title:"List type",values:[{value:"card",title:"List of cards"},{value:"list",title:"Simple list"}]},entries:{title:"Entries",description:"Number of entries. Default: 5"},apiKey:{title:"API-Key",description:"Your API-Key from newsapi.org"},category:{title:"Category",description:"Default: General",values:[{value:"css",title:"CSS"},{value:"html",title:"Entertainment"},{value:"javascript",title:"HTML"},{value:"reactjs",title:"React"},{value:"typescript",title:"Typescript"},{value:"visual-studio-code",title:"Visual Studio Code"}]}},properties:["listType","entries","category","apiKey"],initialContent:{listType:"card",category:"css",entries:"5"}})}])});