Updates with React and modal attempt

static/js/main.9753ddf0.chunk.js

@@ -0,0 +1,2 @@
+(this.webpackJsonpthanos=this.webpackJsonpthanos||[]).push([[0],{15:function(t,e,c){},16:function(t,e,c){},17:function(t,e,c){"use strict";c.r(e);var n=c(0),a=c(1),s=c.n(a),i=c(8),r=c.n(i),o=(c(15),c(7)),h=c(9),j=c(2),d=c(3),l=c(5),u=c(4),b=(c(16),function(t){Object(l.a)(c,t);var e=Object(u.a)(c);function c(t){var n;return Object(j.a)(this,c),(n=e.call(this,t)).state={data:[]},n.setState({data:t}),n}return Object(d.a)(c,[{key:"render",value:function(){return Object(n.jsxs)("div",{className:"card",onClick:p(this.state.data.UserID,this.state.data.Photo),children:[Object(n.jsx)("h4",{children:Object(n.jsx)("b",{children:this.state.data.Username})}),Object(n.jsxs)("div",{className:"container",children:[Object(n.jsx)("p",{children:this.state.data.Closed}),Object(n.jsx)("p",{children:this.state.data.UserID}),Object(n.jsx)("p",{children:Object(n.jsx)("a",{href:this.state.data.Photo,children:"Verification Photo"})})]})]})}}]),c}(s.a.Component));function O(t){return Object(n.jsxs)("div",{className:"card-img",children:[Object(n.jsx)("h4",{children:Object(n.jsx)("b",{children:t.Username})}),Object(n.jsx)("img",{src:void 0!==t.Photo?t.Photo:"https://thiscatdoesnotexist.com/",alt:"Avatar",style:{width:"100%"}}),Object(n.jsx)("div",{className:"container",children:Object(n.jsx)("p",{children:t.UserID})})]})}function p(t,e){var c=Object(a.useState)([]),s=Object(h.a)(c,2),i=s[0],r=s[1];return Object(a.useEffect)((function(){fetch("https://thanos.nightmare.haus/api/user?userID=".concat(t)).then((function(t){return t.json()})).then((function(t){r(t)})).catch((function(t){return console.log(t)}))})),Object(n.jsxs)("div",{className:"card",children:[Object(n.jsx)("h4",{children:Object(n.jsx)("b",{children:i.Nick})}),Object(n.jsx)("img",{src:void 0!==e?e:"https://thiscatdoesnotexist.com/",alt:"Avatar",style:{width:"100%"}}),Object(n.jsxs)("div",{className:"container",children:[Object(n.jsx)("img",{src:void 0!==i.user.avatar?"https://cdn.discordapp.com/avatars/".concat(t,"/").concat(i.user.avatar,".png"):"https://thiscatdoesnotexist.com/",alt:"Avatar",style:{width:"100%"}}),Object(n.jsx)("p",{children:i.joined_at}),Object(n.jsx)("p",{children:i.user.id})]})]})}s.a.Component;var v=function(t){Object(l.a)(c,t);var e=Object(u.a)(c);function c(){var t;Object(j.a)(this,c);for(var n=arguments.length,a=new Array(n),s=0;s<n;s++)a[s]=arguments[s];return(t=e.call.apply(e,[this].concat(a))).state={verifications:[]},t}return Object(d.a)(c,[{key:"componentDidMount",value:function(){var t=this;fetch("https://thanos.nightmare.haus/api/verifications").then((function(t){return t.json()})).then((function(e){return t.setState({verifications:e})}))}},{key:"render",value:function(){return Object(n.jsx)("div",{className:"App",children:Object(n.jsx)("ul",{children:this.state.verifications.map((function(t,e){return Object(n.jsxs)("li",{children:[" ",Object(n.jsx)(b,Object(o.a)({},t))]},e)}))})})}}]),c}(s.a.Component);r.a.render(Object(n.jsxs)(s.a.StrictMode,{children:[Object(n.jsx)(v,{}),Object(n.jsx)(v,{})]}),document.getElementById("react_app"))}},[[17,1,2]]]);
+//# sourceMappingURL=main.9753ddf0.chunk.js.map

static/js/main.98705200.chunk.js

@@ -1,2 +0,0 @@
-(this.webpackJsonpthanos=this.webpackJsonpthanos||[]).push([[0],{14:function(e,t,n){},15:function(e,t,n){},16:function(e,t,n){"use strict";n.r(t);var c=n(0),s=n(1),i=n.n(s),r=n(8),a=n.n(r),o=(n(14),n(6)),j=n(3),h=n(4),d=n(7),l=n(5);n(15);function b(e){return Object(c.jsxs)("div",{className:"card",children:[Object(c.jsx)("h4",{children:Object(c.jsx)("b",{children:e.Username})}),Object(c.jsxs)("div",{className:"container",children:[Object(c.jsx)("p",{children:e.Closed}),Object(c.jsx)("p",{children:e.UserID}),Object(c.jsx)("p",{children:Object(c.jsx)("a",{href:e.Photo,children:"Verification Photo"})})]})]})}function u(e){return Object(c.jsxs)("div",{className:"card-img",children:[Object(c.jsx)("h4",{children:Object(c.jsx)("b",{children:e.Username})}),Object(c.jsx)("img",{src:void 0!==e.Photo?e.Photo:"https://thiscatdoesnotexist.com/",alt:"Avatar",style:{width:"100%"}}),Object(c.jsx)("div",{className:"container",children:Object(c.jsx)("p",{children:e.UserID})})]})}i.a.Component;var O=function(e){Object(d.a)(n,e);var t=Object(l.a)(n);function n(){var e;Object(j.a)(this,n);for(var c=arguments.length,s=new Array(c),i=0;i<c;i++)s[i]=arguments[i];return(e=t.call.apply(t,[this].concat(s))).state={verifications:[]},e}return Object(h.a)(n,[{key:"componentDidMount",value:function(){var e=this;fetch("https://thanos.nightmare.haus/api/verifications").then((function(e){return e.json()})).then((function(t){return e.setState({verifications:t})}))}},{key:"render",value:function(){return Object(c.jsx)("div",{className:"App",children:Object(c.jsx)("ul",{children:this.state.verifications.map((function(e,t){return Object(c.jsxs)("li",{children:[" ",Object(c.jsx)(b,Object(o.a)({},e))]},t)}))})})}}]),n}(i.a.Component);a.a.render(Object(c.jsxs)(i.a.StrictMode,{children:[Object(c.jsx)(O,{}),Object(c.jsx)(O,{})]}),document.getElementById("react_app"))}},[[16,1,2]]]);
-//# sourceMappingURL=main.98705200.chunk.js.map

static/js/main.98705200.chunk.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["App.js","index.js"],"names":["Card","data","className","Username","Closed","UserID","href","Photo","CardImg","src","undefined","alt","style","width","React","Component","Verification","state","verifications","fetch","then","response","json","setState","this","map","i","ReactDOM","render","StrictMode","document","getElementById"],"mappings":"8OAGA,SAASA,EAAKC,GACV,OACE,sBAAKC,UAAU,OAAf,UACA,6BAAI,4BAAID,EAAKE,aACX,sBAAKD,UAAU,YAAf,UACE,4BAAID,EAAKG,SACT,4BAAIH,EAAKI,SACT,4BAAG,mBAAGC,KAAML,EAAKM,MAAd,wCAKX,SAASC,EAAQP,GACf,OACE,sBAAKC,UAAU,WAAf,UACA,6BAAI,4BAAID,EAAKE,aACb,qBAAKM,SAAoBC,IAAfT,EAAKM,MAAsBN,EAAKM,MAAQ,mCAAoCI,IAAI,SAASC,MAAO,CAAEC,MAAO,UACjH,qBAAKX,UAAU,YAAf,SACE,4BAAID,EAAKI,cAMGS,IAAMC,U,IAsDbC,E,4MA3BXC,MAAQ,CACJC,cAAe,I,kEAEE,IAAD,OAEhBC,MADe,mDAEVC,MAAK,SAACC,GAAD,OAAcA,EAASC,UAC5BF,MAAK,SAACnB,GAAD,OAAU,EAAKsB,SAAS,CAACL,cAAejB,S,+BAGlD,OACG,qBAAKC,UAAU,MAAf,SACI,6BACKsB,KAAKP,MAAMC,cAAcO,KAAI,SAACxB,EAAMyB,GAAP,OAC1B,mCAAa,cAAC1B,EAAD,eAAUC,MAAdyB,c,GAfLZ,IAAMC,WC/CjCY,IAASC,OACP,eAAC,IAAMC,WAAP,WACE,cAAC,EAAD,IACA,cAAC,EAAD,OAEFC,SAASC,eAAe,gB","file":"static/js/main.98705200.chunk.js","sourcesContent":["import React from 'react';\nimport './App.css';\n\nfunction Card(data) {\n    return (\n      <div className=\"card\">\n      <h4><b>{data.Username}</b></h4>\n        <div className=\"container\">\n          <p>{data.Closed}</p>\n          <p>{data.UserID}</p>\n          <p><a href={data.Photo}>Verification Photo</a></p>\n        </div>\n      </div>\n    )\n  }\n  function CardImg(data) {\n    return (\n      <div className=\"card-img\">\n      <h4><b>{data.Username}</b></h4>\n      <img src={data.Photo !== undefined ? data.Photo : \"https://thiscatdoesnotexist.com/\"} alt=\"Avatar\" style={{ width: \"100%\" }} />\n        <div className=\"container\">\n          <p>{data.UserID}</p>\n        </div>\n      </div>\n    )\n  }\n\nclass Pending extends React.Component {\n    state = {\n        pending: []\n    }\n    componentDidMount() {\n        const apiUrl = 'https://thanos.nightmare.haus/api/pending';\n        fetch(apiUrl)\n            .then((response) => response.json())\n            .then((data) => this.setState({pending: data}));\n    }\n    render() {\n        return (\n           <div className=\"App\">\n               <ul>\n                   {this.state.pending.map((data) => (\n                       data.map((actualData) => (\n                            <li key={actualData.UserID}> <CardImg {...actualData} /></li>\n                       ))\n                   ))}\n               </ul>\n           </div>\n        );\n    }\n}\n\n\nclass Verification extends React.Component {\n    state = {\n        verifications: []\n    }\n    componentDidMount() {\n        const apiUrl = 'https://thanos.nightmare.haus/api/verifications';\n        fetch(apiUrl)\n            .then((response) => response.json())\n            .then((data) => this.setState({verifications: data}));\n    }\n    render() {\n        return (\n           <div className=\"App\">\n               <ul>\n                   {this.state.verifications.map((data, i) => (\n                       <li key={i}> <Card {...data} /></li>\n                   ))}\n               </ul>\n           </div>\n        );\n    }\n}\n\nexport {\n    Pending,\n    Verification,\n}\n\nexport default Verification;","import React from 'react';\nimport ReactDOM from 'react-dom';\nimport './index.css';\nimport Verification from './App';\nimport Pending from './App';\n\nReactDOM.render(\n  <React.StrictMode>\n    <Pending />\n    <Verification />\n  </React.StrictMode>,\n  document.getElementById('react_app')\n);\n"],"sourceRoot":""}