Merge pull request #94 from TreeHacks/treehacks-2023

updates
TreeHacks · Jan 28, 2023 · 378e211 · 378e211
2 parents 5f0ea98 + 1c9eb08
commit 378e211
Show file tree

Hide file tree

Showing 51 changed files with 710 additions and 301 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -59,7 +59,7 @@
     "gsap": "^2.0.2",
     "html-webpack-plugin": "2.29.0",
     "jest": "20.0.4",
-    "node-sass": "^4.13.1",
+    "node-sass": "^4.14.1",
     "object-assign": "4.1.1",
     "path": "^0.12.7",
     "postcss-flexbugs-fixes": "3.2.0",
@@ -72,6 +72,7 @@
     "react-dom": "^16.12.0",
     "react-emojione": "^5.0.1",
     "react-player": "^1.6.4",
+    "react-responsive-masonry": "^2.1.7",
     "react-router": "^4.3.1",
     "react-router-dom": "^4.3.1",
     "react-textfit": "^1.1.0",

diff --git a/src/index.js b/src/index.js
@@ -9,6 +9,7 @@ import Projects from "./js/projects.jsx";
 import Hackpacks from "./js/hackpacks.jsx";
 import RoomStatus from "./js/room-status.jsx";
 import Apis from "./js/apis/Apis.jsx";
+
 import Challenge from "./js/challenge.jsx";
 import "./favicons/favicons";
 import "./index.scss";

diff --git a/src/js/apis/Apis.jsx b/src/js/apis/Apis.jsx
@@ -1,26 +1,28 @@
 import React, { useEffect, useState } from "react";
 import Bricklayer from "bricklayer";
 import data from "./data.yaml";
+import Masonry, { ResponsiveMasonry } from "react-responsive-masonry";
 
 export default class extends React.Component {
   constructor(props) {
     super(props);
-    this.myRef = React.createRef();
     this.state = {
       tag: null,
       searchInput: "",
       companyData: data.companies,
+      constantCompanyData: data.companies,
     };
-    this.onTagClick = this.onTagClick.bind(this);
     this.handleChange = this.handleChange.bind(this);
   }
 
   handleChange = (e) => {
     e.preventDefault();
     this.setState({ searchInput: e.target.value });
     //const dataC = [{ name: "Belgium", continent: "Europe" }];
-    if (this.state.searchInput.length > 0) {
-      const filtered = this.state.companyData.filter(
+    if (this.state.searchInput.length == 0) {
+      this.setState({ companyData: this.state.constantCompanyData });
+    } else if (this.state.searchInput.length > 0) {
+      const filtered = this.state.constantCompanyData.filter(
         (country) =>
           country.apis[0].title
             .toLowerCase()
@@ -45,23 +47,6 @@ export default class extends React.Component {
       project.submitLastName?.includes(search)
   );*/
 
-  componentDidMount() {
-    this.bricklayer = new Bricklayer(this.myRef.current);
-  }
-  onTagClick(tag) {
-    this.bricklayer.destroy();
-
-    if (tag == this.state.tag) {
-      this.setState({ tag: null }, () => {
-        this.bricklayer = new Bricklayer(this.myRef.current);
-      });
-    } else {
-      this.setState({ tag: tag }, () => {
-        this.bricklayer = new Bricklayer(this.myRef.current);
-      });
-    }
-  }
-
   render() {
     return (
       <div class="apis container">
@@ -80,20 +65,22 @@ export default class extends React.Component {
           Here you can find a list of all the API's offered by our sponsoring
           companies, along with any resources and forms we post to receive cloud
           credits.
-          {/* <input
+          <input
             type="text"
             placeholder="Search here"
+            id="searchInput"
             style={{
               width: "80%",
               borderRadius: "20px",
+              fontSize: "20px",
               backgroundColor: "transparent",
               border: "1px solid black",
               padding: "10px 15px",
               margin: "20px 0",
             }}
             onChange={this.handleChange}
             value={this.state.searchInput}
-          /> */}
+          />
           {/*  {(data.tags || []).map((tag) => (
             <button
               className={`api-tag-button ${
@@ -105,41 +92,64 @@ export default class extends React.Component {
             </button>
           ))} */}
         </div>
-        <div className="bricklayer" ref={this.myRef}>
-          {this.state.companyData.map((company) =>
-            company.apis.map((api) => {
-              if (
-                this.state.tag == null ||
-                (api.tags && api.tags.includes(this.state.tag))
-              ) {
-                return (
-                  <div className="api-item-container">
-                    <div className="card api-item" key={api.title}>
-                      <h3>{api.title}</h3>
-                      <p>{api.description}</p>
-                      {company.slack && (
-                        <p>
-                          slack: <strong>#{company.slack}</strong>
-                        </p>
-                      )}
-                      {console.log(api)}
-                      {api.links != null &&
-                        api.links.map((link) => (
-                          <a target="_blank" href={link.url}>
-                            <button className="main-button">
-                              {link.title || link.url}
-                            </button>
-                          </a>
-                        ))}
+        <ResponsiveMasonry columnsCountBreakPoints={{ 350: 1, 750: 2, 900: 3 }}>
+          <Masonry>
+            {this.state.companyData.map((company) =>
+              company.apis.map((api) => {
+                if (
+                  this.state.tag == null ||
+                  (api.tags && api.tags.includes(this.state.tag))
+                ) {
+                  return (
+                    <div className="api-item-container">
+                      <div className="card api-item" key={api.title}>
+                        <h3>{api.title}</h3>
+                        <p>{api.description}</p>
+                        {company.slack && (
+                          <p>
+                            slack: <strong>#{company.slack}</strong>
+                          </p>
+                        )}
+                        {console.log(api)}
+                        {api.links != null &&
+                          api.links.map((link) => (
+                            <a target="_blank" href={link.url}>
+                              <button className="main-button">
+                                {link.title || link.url}
+                              </button>
+                            </a>
+                          ))}
+                      </div>
                     </div>
-                  </div>
-                );
-              } else {
-                return null;
-              }
-            })
-          )}
-        </div>
+                  );
+                } else {
+                  return null;
+                }
+              })
+            )}
+            {this.state.companyData.length == 0 && (
+              <div
+                style={{
+                  justifyContent: "center",
+                  display: "flex",
+                  flexDirection: "column",
+                  alignContent: "center",
+                  alignItems: "center",
+                }}
+              >
+                <h1
+                  style={{
+                    color: "black",
+                    paddingBottom: "30px",
+                  }}
+                >
+                  No results found
+                </h1>
+              </div>
+            )}
+          </Masonry>
+        </ResponsiveMasonry>
+        <div></div>
       </div>
     );
   }

diff --git a/src/js/apis/data.yaml b/src/js/apis/data.yaml
@@ -104,7 +104,7 @@ companies:
             url: https://docs.mem.ai/
         tags:
           - Geospatial
-  - company: Mem
+  - company: Convex
     apis:
       - title: Convex API
         description: Convex platform getting started, usage docs, and reference APIs
@@ -113,3 +113,12 @@ companies:
             url: https://docs.convex.dev/tutorial
         tags:
           - Geospatial
+  - company: Algolia
+    apis:
+      - title: Algolia API
+        description: Algolia has set up the "1 month free" for TreeHacks 2023 hackers, hackers can redeem it at https://algolia.com/redeem using the code TREEHACKS23
+        links:
+          - title: Redeem here
+            url: https://algolia.com/redeem
+        tags:
+          - Geospatial
diff --git a/src/js/event-schedule.js b/src/js/event-schedule.js
@@ -29,7 +29,10 @@ export default Vue.component("event-schedule", {
         </div>
       </div>
     </div>
+   
     <div class="schedule-category-view" v-if="query.length > 0 || selectedCat != -1">
+
+    
       <div class="section-wrapper">
         <div class="content-wrapper-wide">
           <div class="schedule-category-view-inner">
@@ -41,10 +44,14 @@ export default Vue.component("event-schedule", {
               <div v-if="item.description" v-html="item.description" />
               <span class="schedule-category-view-item-circle" :style="{background: item.color}"></span>
             </div>
+            <div v-if="categoryItems.length == 0" class="schedule-category-view-item">
+              Coming soon! We are still finalizing the incredible lineup and schedule for these events!
+            </div>
           </div>
         </div>
       </div>
     </div>
+    
     <div ref="wrapper" v-if="query.length == 0 && selectedCat == -1" class="schedule-wrapper" @scroll="handleScroll" @click="hidePopup">
       <div class="schedule-inner" :style="{height: scheduleHeight, width: visibleHours * hourWidth + 'px'}">
         <div v-for="i in visibleHours" class="schedule-marker" :style="{left: (i - 1) * hourWidth + 'px'}">
@@ -131,6 +138,11 @@ export default Vue.component("event-schedule", {
             color: "#E51B5D",
             items: [],
           },
+          {
+            name: "Food",
+            color: "#0089B6",
+            items: [],
+          },
           {
             name: "Special Talks / Events",
             color: "#513ec3",
@@ -495,15 +507,15 @@ export default Vue.component("event-schedule", {
       //   this.calendar.download("treeHacksSchedule2021")
       // }
       if (this.selectedCat === 0) {
-        this.calendar0.download("mainEvents2021");
+        this.calendar0.download("mainEvents2023");
       } else if (this.selectedCat === 1) {
-        this.calendar1.download("hackX2021");
+        this.calendar1.download("hackX2023");
       } else if (this.selectedCat === 2) {
-        this.calendar2.download("workshops2021");
+        this.calendar2.download("workshops2023");
       } else if (this.selectedCat === 3) {
-        this.calendar3.download("officeHours2021");
+        this.calendar3.download("officeHours2023");
       } else {
-        this.calendar.download("treeHacksSchedule2021");
+        this.calendar.download("treeHacksSchedule2023");
       }
     },
     hidePopup: function (e) {

diff --git a/src/js/prizeData.json b/src/js/prizeData.json
@@ -0,0 +1 @@
+{}