Feature/event

craco.config.js

@@ -0,0 +1,10 @@
+module.exports = {
+    style: {
+        postcss: {
+            plugins: [
+                require('tailwindcss'),
+                require('autoprefixer'),
+            ],
+        },
+    },
+}

package.json

@@ -4,6 +4,7 @@
   "private": true,
   "dependencies": {
     "@auth0/auth0-react": "^1.0.0",
+    "@craco/craco": "^6.2.0",
     "@material-ui/core": "^4.11.2",
     "@sentry/react": "^6.0.2",
     "@sentry/tracing": "^6.0.2",
@@ -17,17 +18,17 @@
     "react-dom": "^16.13.1",
     "react-loading": "^2.0.3",
     "react-router-dom": "^5.2.0",
-    "react-scripts": "^3.4.3",
+    "react-scripts": "^4.0.3",
     "react-stack-grid": "^0.7.1",
     "recoil": "^0.1.2",
     "serve": "^11.3.2",
     "styled-components": "^5.1.1"
   },
   "scripts": {
     "start": "serve -s build",
-    "dev": "react-scripts start",
-    "build": "react-scripts build",
-    "test": "react-scripts test",
+    "dev": "craco start",
+    "build": "craco build",
+    "test": "craco test",
     "eject": "react-scripts eject",
     "heroku-postbuild": "react-scripts build"
   },
@@ -57,6 +58,9 @@
     "@types/react-router-dom": "^5.1.5",
     "@types/styled-components": "^5.1.1",
     "@types/typeform__embed": "^0.22.1",
+    "autoprefixer": "^9.8.6",
+    "postcss": "^7.0.36",
+    "tailwindcss": "npm:@tailwindcss/postcss7-compat@^2.2.7",
     "typescript": "^3.7.5"
   }
 }

src/api/actions/event.ts

@@ -0,0 +1,38 @@
+import axios from "axios";
+import * as Sentry from "@sentry/react";
+import { events_set } from "../../config/interface";
+
+const get_events = async (authToken: string): Promise<events_set> => {
+  if (authToken === undefined || authToken === "") {
+    return {
+      isLoading: true,
+    };
+  }
+
+  const config = {
+    headers: {
+      Authorization: `Bearer ${authToken}`,
+    },
+  };
+  const result: events_set = await axios
+    .get(
+      (process.env.REACT_APP_CLOUD_FUNCTION_URL as string) + "/auth0/events", //Is this a valid URL
+      config
+    )
+    .then((res) => {
+      return {
+        ...res.data,
+        isLoading: false,
+      };
+    })
+    // 401 Unauthorized Error
+    .catch((err) => {
+      Sentry.captureException(err);
+      return {
+        isLoading: false,
+      };
+    });
+  return result;
+};
+
+export default get_events;

src/api/state.ts

@@ -4,6 +4,7 @@ import verify from "./actions/initialize";
 import verify_gsuite from "./actions/initialize_gsuite";
 import get_profile from "./actions/profile";
 import get_applications from "./actions/application";
+import get_events from "./actions/event";
 
 export const jwt = atom({
   key: "jwt",
@@ -28,6 +29,13 @@ export const profile = selector({
   }
 });
 
+export const event = selector({
+    key: "event",
+    get: async ({get}) => {
+        return await get_events(get(jwt).token);
+    }
+});
+
 export const application = selector({
   key: "application",
   get: async ({get}) => {

src/config/interface.ts

@@ -72,4 +72,17 @@ export interface application_set {
   applications?: application[];
   total?: number;
   isLoading: boolean;
+}
+
+export interface event {
+    name: string,
+    date: string,
+    path_name: string,
+    public: boolean
+}
+
+export interface events_set {
+    events?: event[],
+    total?: number,
+    isLoading: boolean
 }

src/index.css

@@ -1,6 +1,10 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
 * {
   box-sizing: border-box;
-  font-family: sharp-sans;
+    font-family: sharp-sans, serif;
   transition: all 0.2s ease-in-out
 }
 
@@ -21,7 +25,7 @@ code {
 
 @font-face {
   font-family: sharp-sans;
-  font-weight: lighter;
+  font-weight: 200; /* Modified font-weight to 200 to represent light-text */
   src: url(./assets/fonts/samsungsharpsans.otf)
 }
 

src/views/Profile/Profile.tsx

@@ -3,7 +3,7 @@ import { Tabs, Layout } from "antd";
 import Navbar from "../../components/Navbar/DarkNavbar";
 import "./Profile.css";
 import Button from "../../components/OrangeButton/OrangeButton";
-import { profile } from "../../api/state";
+import { profile, event } from "../../api/state";
 import { useRecoilValue } from "recoil";
 import { useHistory } from "react-router-dom";
 import { useAuth0 } from "@auth0/auth0-react";
@@ -14,6 +14,7 @@ const { TabPane } = Tabs;
 const Profile = () => {
   const history = useHistory();
   const user_profile = useRecoilValue(profile);
+  const events = useRecoilValue(event); //Add another check for this later
   const { isLoading, isAuthenticated } = useAuth0();
 
   useEffect(() => {
@@ -45,6 +46,60 @@ const Profile = () => {
       <DiscordPane />
     );
 
+  const eventCard  = (event: any) => {
+    //How do I get the EVENT object?
+    //extract date property
+    //Ignore sub-title - Only display title? Modify padding and all appropriately while keeping current title/sub-title commented out
+    return (
+      <div className="flex items-center lg:max-w-4xl space-x-3 border-2 justify-center rounded-2xl py-4 pl-6 pr-2 bg-gray-900">
+        <div className="flex flex-col justify-center space-y-2 px-4 py-2">
+            <div className="lg:text-3xl text-white text-center">
+                Aug
+            </div>
+            <div className="lg:text-4xl text-white text-center">
+                8
+            </div>
+            <div className="lg:text-3xl text-white text-center">
+                Sun
+            </div>
+        </div>
+        <div className="flex-auto inline-block px-2 py-1 space-y-8">
+            <div className="space-y-2">
+                <div className="lg:text-4xl">
+                    Working with Firebase and Flutter
+                </div>
+                <div className="lg:text-2xl">
+                    with Daniel Gerynd
+                </div>
+            </div>
+            <div className="space-x-8">
+                <a className="inline-block text-white hover:text-white text-base text-center px-1 py-3 w-32 rounded-2xl box-content border-0 bg-gradient-to-r from-red-500 to-yellow-500 hover:from-yellow-500 hover:to-red-500 href=#">
+                    RSVP
+                </a>
+                <a className="inline-block text-white hover:text-white text-base text-center px-1 py-3 w-32 rounded-2xl box-content border-0 bg-gradient-to-r from-red-500 to-yellow-500 hover:from-yellow-500 hover:to-red-500 href=#">
+                    View Event
+                </a>
+            </div>
+        </div>
+      </div>
+    )
+  }
+
+  /*const eventSections = (
+    <Menu mode="horizontal">
+        <Menu.Item icon={<MailOutlined />} key="Upcoming">
+            Upcoming
+        </Menu.Item>
+        <Menu.Item key="Attending">
+            Attending
+        </Menu.Item>
+        <Menu.Item key="Past">
+            Past
+        </Menu.Item>
+    </Menu>
+  ) */
+
+
   return (
     <Layout>
       <Navbar selectedPage="profile" />
@@ -74,6 +129,9 @@ const Profile = () => {
               Note: If you recently submitted an application, it may take a
               short period of time before appearing
             </p>
+            {
+
+            }
             {user_profile.profile?.past_applications ? (
               user_profile.profile.past_applications
                 .map((app, index) => (
@@ -175,6 +233,18 @@ const Profile = () => {
           <TabPane tab="Discord" key={5}>
             {discPane}
           </TabPane>
+          <TabPane tab="Events" key={6}>
+              <div className="lg:text-2xl text-white">Upcoming Events</div>
+              {events.events? (
+                  events.events
+                      .map((event, index) => (
+                          eventCard(event)
+                      ))
+                      .reverse()
+              ) : (
+                  <p>No events available.</p>
+              )}
+          </TabPane>
         </Tabs>
       </Content>
     </Layout>

tailwind.config.js

@@ -0,0 +1,11 @@
+module.exports = {
+  purge: ['./src/**/*.{js,jsx,ts,tsx}', './public/index.html'],
+  darkMode: false, // or 'media' or 'class'
+  theme: {
+    extend: {},
+  },
+  variants: {
+    extend: {},
+  },
+  plugins: [],
+}

tsconfig.json

@@ -17,7 +17,8 @@
     "resolveJsonModule": true,
     "noEmit": true,
     "jsx": "react",
-    "isolatedModules": true
+    "isolatedModules": true,
+    "noFallthroughCasesInSwitch": true
   },
   "include": [
     "src"