11import React , { useEffect , useState } from "react" ;
22import Bricklayer from "bricklayer" ;
33import data from "./data.yaml" ;
4+ import Masonry , { ResponsiveMasonry } from "react-responsive-masonry" ;
45
56export default class extends React . Component {
67 constructor ( props ) {
78 super ( props ) ;
8- this . myRef = React . createRef ( ) ;
99 this . state = {
1010 tag : null ,
1111 searchInput : "" ,
1212 companyData : data . companies ,
13+ constantCompanyData : data . companies ,
1314 } ;
14- this . onTagClick = this . onTagClick . bind ( this ) ;
1515 this . handleChange = this . handleChange . bind ( this ) ;
1616 }
1717
1818 handleChange = ( e ) => {
1919 e . preventDefault ( ) ;
2020 this . setState ( { searchInput : e . target . value } ) ;
2121 //const dataC = [{ name: "Belgium", continent: "Europe" }];
22- if ( this . state . searchInput . length > 0 ) {
23- const filtered = this . state . companyData . filter (
22+ if ( this . state . searchInput . length == 0 ) {
23+ this . setState ( { companyData : this . state . constantCompanyData } ) ;
24+ } else if ( this . state . searchInput . length > 0 ) {
25+ const filtered = this . state . constantCompanyData . filter (
2426 ( country ) =>
2527 country . apis [ 0 ] . title
2628 . toLowerCase ( )
@@ -45,23 +47,6 @@ export default class extends React.Component {
4547 project.submitLastName?.includes(search)
4648 );*/
4749
48- componentDidMount ( ) {
49- this . bricklayer = new Bricklayer ( this . myRef . current ) ;
50- }
51- onTagClick ( tag ) {
52- this . bricklayer . destroy ( ) ;
53-
54- if ( tag == this . state . tag ) {
55- this . setState ( { tag : null } , ( ) => {
56- this . bricklayer = new Bricklayer ( this . myRef . current ) ;
57- } ) ;
58- } else {
59- this . setState ( { tag : tag } , ( ) => {
60- this . bricklayer = new Bricklayer ( this . myRef . current ) ;
61- } ) ;
62- }
63- }
64-
6550 render ( ) {
6651 return (
6752 < div class = "apis container" >
@@ -80,20 +65,22 @@ export default class extends React.Component {
8065 Here you can find a list of all the API's offered by our sponsoring
8166 companies, along with any resources and forms we post to receive cloud
8267 credits.
83- { /* <input
68+ < input
8469 type = "text"
8570 placeholder = "Search here"
71+ id = "searchInput"
8672 style = { {
8773 width : "80%" ,
8874 borderRadius : "20px" ,
75+ fontSize : "20px" ,
8976 backgroundColor : "transparent" ,
9077 border : "1px solid black" ,
9178 padding : "10px 15px" ,
9279 margin : "20px 0" ,
9380 } }
9481 onChange = { this . handleChange }
9582 value = { this . state . searchInput }
96- /> */ }
83+ />
9784 { /* {(data.tags || []).map((tag) => (
9885 <button
9986 className={`api-tag-button ${
@@ -105,41 +92,64 @@ export default class extends React.Component {
10592 </button>
10693 ))} */ }
10794 </ div >
108- < div className = "bricklayer" ref = { this . myRef } >
109- { this . state . companyData . map ( ( company ) =>
110- company . apis . map ( ( api ) => {
111- if (
112- this . state . tag == null ||
113- ( api . tags && api . tags . includes ( this . state . tag ) )
114- ) {
115- return (
116- < div className = "api-item-container" >
117- < div className = "card api-item" key = { api . title } >
118- < h3 > { api . title } </ h3 >
119- < p > { api . description } </ p >
120- { company . slack && (
121- < p >
122- slack: < strong > #{ company . slack } </ strong >
123- </ p >
124- ) }
125- { console . log ( api ) }
126- { api . links != null &&
127- api . links . map ( ( link ) => (
128- < a target = "_blank" href = { link . url } >
129- < button className = "main-button" >
130- { link . title || link . url }
131- </ button >
132- </ a >
133- ) ) }
95+ < ResponsiveMasonry columnsCountBreakPoints = { { 350 : 1 , 750 : 2 , 900 : 3 } } >
96+ < Masonry >
97+ { this . state . companyData . map ( ( company ) =>
98+ company . apis . map ( ( api ) => {
99+ if (
100+ this . state . tag == null ||
101+ ( api . tags && api . tags . includes ( this . state . tag ) )
102+ ) {
103+ return (
104+ < div className = "api-item-container" >
105+ < div className = "card api-item" key = { api . title } >
106+ < h3 > { api . title } </ h3 >
107+ < p > { api . description } </ p >
108+ { company . slack && (
109+ < p >
110+ slack: < strong > #{ company . slack } </ strong >
111+ </ p >
112+ ) }
113+ { console . log ( api ) }
114+ { api . links != null &&
115+ api . links . map ( ( link ) => (
116+ < a target = "_blank" href = { link . url } >
117+ < button className = "main-button" >
118+ { link . title || link . url }
119+ </ button >
120+ </ a >
121+ ) ) }
122+ </ div >
134123 </ div >
135- </ div >
136- ) ;
137- } else {
138- return null ;
139- }
140- } )
141- ) }
142- </ div >
124+ ) ;
125+ } else {
126+ return null ;
127+ }
128+ } )
129+ ) }
130+ { this . state . companyData . length == 0 && (
131+ < div
132+ style = { {
133+ justifyContent : "center" ,
134+ display : "flex" ,
135+ flexDirection : "column" ,
136+ alignContent : "center" ,
137+ alignItems : "center" ,
138+ } }
139+ >
140+ < h1
141+ style = { {
142+ color : "black" ,
143+ paddingBottom : "30px" ,
144+ } }
145+ >
146+ No results found
147+ </ h1 >
148+ </ div >
149+ ) }
150+ </ Masonry >
151+ </ ResponsiveMasonry >
152+ < div > </ div >
143153 </ div >
144154 ) ;
145155 }
0 commit comments