From 98a813272ee44357ac0b7ae4d4e41fad9e4c7f62 Mon Sep 17 00:00:00 2001 From: rohit raj Date: Sun, 24 Mar 2024 19:48:29 +0530 Subject: [PATCH 1/3] fix sidebar and header bug --- src/commons/Header/index.jsx | 2 +- src/commons/Sidebar/index.jsx | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/src/commons/Header/index.jsx b/src/commons/Header/index.jsx index e3c86f9..ed00ea0 100644 --- a/src/commons/Header/index.jsx +++ b/src/commons/Header/index.jsx @@ -69,7 +69,7 @@ class NavigationToggle extends Component { } handleBlur = () => { - if (window.innerWidth <= 1500) { + if (window.innerWidth <= 1500 || document.body.clientWidth <= 1500) { close(); // Close sidebar when navigation toggle loses focus and width is less than 821px } } diff --git a/src/commons/Sidebar/index.jsx b/src/commons/Sidebar/index.jsx index 5809f36..d44ca9c 100644 --- a/src/commons/Sidebar/index.jsx +++ b/src/commons/Sidebar/index.jsx @@ -191,13 +191,13 @@ export default class Sidebar extends Component { } handleBlur = () => { - if (window.innerWidth <= 1500) { + if (window.innerWidth <= 1500 || document.body.clientWidth <= 1500) { this.setState({ open: false }); } } handleFocus = () => { - if (window.innerWidth <= 1500) { + if (window.innerWidth <= 1500 || document.body.clientWidth <= 1500) { this.setState({ open: true }); } } From d48f515e0c489581608b50b68a44ce565ec64c6a Mon Sep 17 00:00:00 2001 From: rohit raj Date: Sun, 31 Mar 2024 14:39:58 +0530 Subject: [PATCH 2/3] Add: Horizontal navbar, broadcast --- package-lock.json | 91 +++++++--- src/commons/Header/index.jsx | 304 ++++++++++++++++++++++++++++++--- src/commons/Sidebar/index.jsx | 23 +-- src/components/Index/index.jsx | 253 ++++++++++++++++++++++++++- src/layouts/base.css | 1 + 5 files changed, 601 insertions(+), 71 deletions(-) diff --git a/package-lock.json b/package-lock.json index eddeeee..4ebaf41 100644 --- a/package-lock.json +++ b/package-lock.json @@ -3765,7 +3765,6 @@ "version": "10.4.13", "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.13.tgz", "integrity": "sha512-49vKpMqcZYsJjwotvt4+h/BCjJVnhGwcLpDt5xkcaOG3eLrG/HUYLagrihYsQ+qrIBgIzX1Rw7a6L8I/ZA1Atg==", - "dev": true, "funding": [ { "type": "opencollective", @@ -8488,7 +8487,6 @@ "version": "4.2.0", "resolved": "https://registry.npmjs.org/fraction.js/-/fraction.js-4.2.0.tgz", "integrity": "sha512-MhLuK+2gUcnZe8ZHlaaINnQLl0xRIGRfcGk2yl8xoQAfHrSsL3rYu6FCmBdkdbhc9EPlwyGHewaRsvwRMJtAlA==", - "dev": true, "engines": { "node": "*" }, @@ -20146,6 +20144,19 @@ "is-typedarray": "^1.0.0" } }, + "node_modules/typescript": { + "version": "5.4.3", + "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.4.3.tgz", + "integrity": "sha512-KrPd3PKaCLr78MalgiwJnA25Nm8HAmdwN3mYUYZgG/wizIo9EainNVQI9/yDavtVFRN2h3k8uf3GLHuhDMgEHg==", + "peer": true, + "bin": { + "tsc": "bin/tsc", + "tsserver": "bin/tsserver" + }, + "engines": { + "node": ">=14.17" + } + }, "node_modules/typography": { "version": "0.16.21", "license": "MIT", @@ -24014,7 +24025,8 @@ "@emotion/use-insertion-effect-with-fallbacks": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/@emotion/use-insertion-effect-with-fallbacks/-/use-insertion-effect-with-fallbacks-1.0.0.tgz", - "integrity": "sha512-1eEgUGmkaljiBnRMTdksDV1W4kUnmwgp7X9G8B++9GYwl1lUdqSndSriIrTJ0N7LQaoauY9JJ2yhiOYK5+NI4A==" + "integrity": "sha512-1eEgUGmkaljiBnRMTdksDV1W4kUnmwgp7X9G8B++9GYwl1lUdqSndSriIrTJ0N7LQaoauY9JJ2yhiOYK5+NI4A==", + "requires": {} }, "@emotion/utils": { "version": "1.2.0", @@ -24266,7 +24278,8 @@ "version": "2.2.0" }, "ws": { - "version": "7.4.5" + "version": "7.4.5", + "requires": {} } } }, @@ -24493,7 +24506,8 @@ "@react-icons/all-files": { "version": "4.1.0", "resolved": "https://registry.npmjs.org/@react-icons/all-files/-/all-files-4.1.0.tgz", - "integrity": "sha512-hxBI2UOuVaI3O/BhQfhtb4kcGn9ft12RWAFVMUeNjqqhLsHvFtzIkFaptBJpFDANTKoDfdVoHTKZDlwKCACbMQ==" + "integrity": "sha512-hxBI2UOuVaI3O/BhQfhtb4kcGn9ft12RWAFVMUeNjqqhLsHvFtzIkFaptBJpFDANTKoDfdVoHTKZDlwKCACbMQ==", + "requires": {} }, "@rsuite/icon-font": { "version": "4.0.0", @@ -24981,7 +24995,8 @@ "version": "7.4.1" }, "acorn-jsx": { - "version": "5.3.2" + "version": "5.3.2", + "requires": {} }, "acorn-node": { "version": "1.8.2", @@ -25018,10 +25033,12 @@ } }, "ajv-errors": { - "version": "1.0.1" + "version": "1.0.1", + "requires": {} }, "ajv-keywords": { - "version": "3.5.2" + "version": "3.5.2", + "requires": {} }, "alphanum-sort": { "version": "1.0.2" @@ -25246,7 +25263,6 @@ "version": "10.4.13", "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.13.tgz", "integrity": "sha512-49vKpMqcZYsJjwotvt4+h/BCjJVnhGwcLpDt5xkcaOG3eLrG/HUYLagrihYsQ+qrIBgIzX1Rw7a6L8I/ZA1Atg==", - "dev": true, "requires": { "browserslist": "^4.21.4", "caniuse-lite": "^1.0.30001426", @@ -25310,7 +25326,8 @@ } }, "babel-core": { - "version": "7.0.0-bridge.0" + "version": "7.0.0-bridge.0", + "requires": {} }, "babel-eslint": { "version": "10.1.0", @@ -25388,7 +25405,8 @@ } }, "babel-plugin-remove-graphql-queries": { - "version": "2.16.1" + "version": "2.16.1", + "requires": {} }, "babel-plugin-transform-react-remove-prop-types": { "version": "0.4.24" @@ -27341,7 +27359,8 @@ "version": "2.1.2" }, "ws": { - "version": "7.4.6" + "version": "7.4.6", + "requires": {} } } }, @@ -27370,7 +27389,8 @@ "version": "2.1.2" }, "ws": { - "version": "7.4.6" + "version": "7.4.6", + "requires": {} } } }, @@ -27778,7 +27798,8 @@ } }, "eslint-plugin-react-hooks": { - "version": "1.7.0" + "version": "1.7.0", + "requires": {} }, "eslint-scope": { "version": "5.1.1", @@ -28381,8 +28402,7 @@ "fraction.js": { "version": "4.2.0", "resolved": "https://registry.npmjs.org/fraction.js/-/fraction.js-4.2.0.tgz", - "integrity": "sha512-MhLuK+2gUcnZe8ZHlaaINnQLl0xRIGRfcGk2yl8xoQAfHrSsL3rYu6FCmBdkdbhc9EPlwyGHewaRsvwRMJtAlA==", - "dev": true + "integrity": "sha512-MhLuK+2gUcnZe8ZHlaaINnQLl0xRIGRfcGk2yl8xoQAfHrSsL3rYu6FCmBdkdbhc9EPlwyGHewaRsvwRMJtAlA==" }, "fragment-cache": { "version": "0.2.1", @@ -29267,7 +29287,8 @@ }, "dependencies": { "graphql-type-json": { - "version": "0.2.4" + "version": "0.2.4", + "requires": {} } } }, @@ -29324,10 +29345,12 @@ } }, "graphql-type-json": { - "version": "0.3.2" + "version": "0.3.2", + "requires": {} }, "graphql-ws": { - "version": "4.9.0" + "version": "4.9.0", + "requires": {} }, "gray-percentage": { "version": "2.0.0" @@ -30308,7 +30331,8 @@ } }, "isomorphic-ws": { - "version": "4.0.1" + "version": "4.0.1", + "requires": {} }, "isurl": { "version": "1.0.0", @@ -30870,7 +30894,8 @@ "version": "1.4.1" }, "meros": { - "version": "1.1.4" + "version": "1.1.4", + "requires": {} }, "methods": { "version": "1.1.2" @@ -33914,7 +33939,8 @@ "react-ga": { "version": "3.3.1", "resolved": "https://registry.npmjs.org/react-ga/-/react-ga-3.3.1.tgz", - "integrity": "sha512-4Vc0W5EvXAXUN/wWyxvsAKDLLgtJ3oLmhYYssx+YzphJpejtOst6cbIHCIyF50Fdxuf5DDKqRYny24yJ2y7GFQ==" + "integrity": "sha512-4Vc0W5EvXAXUN/wWyxvsAKDLLgtJ3oLmhYYssx+YzphJpejtOst6cbIHCIyF50Fdxuf5DDKqRYny24yJ2y7GFQ==", + "requires": {} }, "react-hot-loader": { "version": "4.13.0", @@ -33964,7 +33990,8 @@ "version": "3.0.4" }, "react-onclickoutside": { - "version": "6.12.1" + "version": "6.12.1", + "requires": {} }, "react-popper": { "version": "1.3.11", @@ -34039,7 +34066,8 @@ } }, "react-typography": { - "version": "0.16.20" + "version": "0.16.20", + "requires": {} }, "react-window": { "version": "1.8.8", @@ -34137,7 +34165,8 @@ } }, "redux-thunk": { - "version": "2.4.1" + "version": "2.4.1", + "requires": {} }, "regenerate": { "version": "1.4.2" @@ -35989,6 +36018,12 @@ "is-typedarray": "^1.0.0" } }, + "typescript": { + "version": "5.4.3", + "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.4.3.tgz", + "integrity": "sha512-KrPd3PKaCLr78MalgiwJnA25Nm8HAmdwN3mYUYZgG/wizIo9EainNVQI9/yDavtVFRN2h3k8uf3GLHuhDMgEHg==", + "peer": true + }, "typography": { "version": "0.16.21", "requires": { @@ -36368,7 +36403,8 @@ "use-isomorphic-layout-effect": { "version": "1.1.2", "resolved": "https://registry.npmjs.org/use-isomorphic-layout-effect/-/use-isomorphic-layout-effect-1.1.2.tgz", - "integrity": "sha512-49L8yCO3iGT/ZF9QttjwLF/ZD9Iwto5LnH5LmEdk/6cFmXddqi2ulF0edxTwjj+7mqvpVVGQWvbXZdn32wRSHA==" + "integrity": "sha512-49L8yCO3iGT/ZF9QttjwLF/ZD9Iwto5LnH5LmEdk/6cFmXddqi2ulF0edxTwjj+7mqvpVVGQWvbXZdn32wRSHA==", + "requires": {} }, "util": { "version": "0.11.1", @@ -37586,7 +37622,8 @@ } }, "ws": { - "version": "7.5.7" + "version": "7.5.7", + "requires": {} }, "xdg-basedir": { "version": "4.0.0" diff --git a/src/commons/Header/index.jsx b/src/commons/Header/index.jsx index ed00ea0..409762a 100644 --- a/src/commons/Header/index.jsx +++ b/src/commons/Header/index.jsx @@ -1,24 +1,197 @@ -import React, { Component } from "react"; +import React, { Component, useState, useEffect } from "react"; import { Link } from "gatsby"; import { FiMenu, FiX, FiUser } from 'react-icons/fi' import sidebarStore from '../../reducers/sidebarReducer'; import userStore from '../../reducers/userReducer'; import { open, close } from '../../actions/sidebarActions'; +import { getUser, isLoggedIn } from "../../services/userServices"; +import { Dropdown } from "rsuite"; +import store from "../../reducers/sidebarReducer"; + + + +const SidebarItems = ({ backupName, backupData }) => { + const [isAdmin, setIsAdmin] = useState(false) + useEffect(() => { + const _isAdmin = isLoggedIn() && getUser().type <= 2; + if (_isAdmin != isAdmin) { + setIsAdmin(_isAdmin);// Admin or support + console.log("Render sidebar") + } + },) + return ( + + ) +}; + + +//separate dropdown item component defined with the download attribute with tag +const DropItemwithDownload = ({ to, title, download }) => ( + + {title} + +); + + + + +const path = () => { + if (typeof (window) == "undefined") + return ""; + else + return window.location.pathname; +} + +const SidebarItem = (props) => ( +
  • + + {props.title} + +
    • +); + +const DropItem = (props) => ( + + {props.title} + +); + + const HeaderLogo = () => (
    MUCAPP
    @@ -28,7 +201,10 @@ const HeaderLogo = () => ( class UserLink extends Component { state = { - loggedIn: false + loggedIn: false, + backupName: "", // Initialize backupName state + backupData: "", // Initialize backupData state + screenWidth: window.innerWidth, // Initialize screenWidth state }; async checkLoggedIn() { @@ -43,16 +219,63 @@ class UserLink extends Component { userStore.subscribe(() => { this.checkLoggedIn(); }); + + + // Add event listener for window resize + window.addEventListener('resize', this.handleResize); + + } + + componentWillUnmount() { + // Remove event listener when component unmounts + window.removeEventListener('resize', this.handleResize); + } + + handleResize = () => { + // Update screenWidth state when window is resized + this.setState({ screenWidth: window.innerWidth }); + } + + componentDidMount() { + store.subscribe(() => { + this.setState({ open: store.getState() === "open" }); + this.updateBackup(); + }); + setInterval(this.updateBackup, 5000); + this.updateBackup(); + } + + updateBackup = () => { + this.setState({ + backupData: "data:text/json;charset=utf-8," + encodeURIComponent(JSON.stringify(localStorage)), + backupName: "mucapp-" + new Date().toJSON() + ".json" + }) } render = () => ( - - - +
    + + {this.state.screenWidth > 1024 && ( +
    + +
    + )} + + + + + + +
    ); } @@ -69,7 +292,7 @@ class NavigationToggle extends Component { } handleBlur = () => { - if (window.innerWidth <= 1500 || document.body.clientWidth <= 1500) { + if (window.innerWidth <= 1800 || document.body.clientWidth <= 1800) { close(); // Close sidebar when navigation toggle loses focus and width is less than 821px } } @@ -93,6 +316,37 @@ class NavigationToggle extends Component { } export default class Header extends Component { + state = { + backupName: "", // Initialize backupName state + backupData: "", // Initialize backupData state + screenWidth: window.innerWidth, // Initialize screenWidth state + }; + + componentDidMount() { + this.updateBackup(); + + // Add event listener for window resize + window.addEventListener('resize', this.handleResize); + } + + componentWillUnmount() { + // Remove event listener when component unmounts + window.removeEventListener('resize', this.handleResize); + } + + handleResize = () => { + // Update screenWidth state when window is resized + this.setState({ screenWidth: window.innerWidth }); + } + + + updateBackup = () => { + // Update backupName and backupData states + this.setState({ + backupData: "data:text/json;charset=utf-8," + encodeURIComponent(JSON.stringify(localStorage)), + backupName: "mucapp-" + new Date().toJSON() + ".json" + }) + } render = () => (
    - - + + {/* */} + {this.state.screenWidth <= 1024 && } +
    ); diff --git a/src/commons/Sidebar/index.jsx b/src/commons/Sidebar/index.jsx index c0a8175..0102d13 100644 --- a/src/commons/Sidebar/index.jsx +++ b/src/commons/Sidebar/index.jsx @@ -87,16 +87,16 @@ const SidebarItems = ({ backupName, backupData }) => { {/* */} {/* */} - + {/* */} {/* */} {/*
  • Admin
    • */} {/* ; - - - - + + + + */} {isAdmin && @@ -119,9 +119,9 @@ const SidebarItems = ({ backupName, backupData }) => { - - - + {/* + + */} @@ -163,7 +163,8 @@ const SidebarItems = ({ backupName, backupData }) => { }} > 🗂Backup -
    )} + + )} ) }; @@ -191,13 +192,13 @@ export default class Sidebar extends Component { } handleBlur = () => { - if (window.innerWidth <= 1500 || document.body.clientWidth <= 1500) { + if (window.innerWidth <= 1800 || document.body.clientWidth <= 1800) { this.setState({ open: false }); } } handleFocus = () => { - if (window.innerWidth <= 1500 || document.body.clientWidth <= 1500) { + if (window.innerWidth <= 1800 || document.body.clientWidth <= 1800) { this.setState({ open: true }); } } diff --git a/src/components/Index/index.jsx b/src/components/Index/index.jsx index 365e461..c48b50d 100644 --- a/src/components/Index/index.jsx +++ b/src/components/Index/index.jsx @@ -1,12 +1,100 @@ -import React from "react"; +import { React, useState, useEffect } from "react"; import utsavLogo from "../../images/loader.gif" import Countdown from 'react-countdown'; +import { Link, navigate } from "gatsby"; +import eventsService from "../../services/events"; +import participationStatus from "../../services/participationStatus"; +import { MdLocationOn, MdOpenInNew } from 'react-icons/md' const cookingEventsOpenDate = new Date("February 27, 2023, 23:59:59"); const cookingEventsCloseDate = new Date("March 6, 2023, 17:00:00"); const studentEventsOpenDate = new Date("March 15, 2023, 21:00:00"); const studentEventsCloseDate = new Date("March 27, 2023, 23:59:59"); +// JSON for the google map location for each venue. Since location is not being saved, this json should be updated everytime a new venue is added or removed +// venue: *name of the venue on the website +// location: *name of the venue on google map +const venueLocations = [ + { + venue: "Dr. TMA Pai Hall, 1st Floor", + location: "Dr. TMA Pai Halls" + }, + { + venue: "Dr. TMA Pai Hall, 2nd Floor", + location: "Dr. TMA Pai Halls" + }, + { + venue: "Dr. TMA Pai Hall, 3rd Floor", + location: "Dr. TMA Pai Halls" + }, + { + venue: "Counselling Hall, manipal.edu", + location: "" + }, + { + venue: "MMMC, Manipal", + location: "Melaka Manipal Medical College (MMMC)" + }, + { + venue: "KMC Greens, Main Stage", + location: "KMC Greens" + }, + { + venue: "KMC Greens, STEPS", + location: "KMC Greens" + }, + { + venue: "KMC Food Court, 2nd floor", + location: "KMC Food Court" + }, + { + venue: "WGSHA, Kitchen", + location: "Welcomgroup Graduate School of Hotel Administration (WGSHA)" + }, + { + venue: "Sharada Hall, MCHP", + location: "Sharada Hall, MCHP, MAHE, Manipal" + }, + { + venue: "DBMS/MMMC (3rd Floor - Digi Lab)", + location: "Melaka Manipal Medical College (MMMC)" + }, + { + venue: "Biochemistry LH 1", + location: "Department of Biochemistry" + }, +]; + + +const styles = { + eventCard: { + // marginRight: 20, + // marginBottom: 20, + padding: 20, + minHeight: 200, + height: "auto", + width: "100%", + borderRadius: 5, + border: "2px solid rgba(0, 0, 0, .1)", + color: "inherit", + boxShadow: "0px 5px 20px -4px rgba(0, 0, 0, .1)", + transition: "all .2s ease", + ":hover": { + color: "inherit", + boxShadow: "0px 5px 50px -4px rgba(0, 0, 0, .1)", + transform: "translateY(-10px)" + }, + }, + table_styles: { + // border: "2px solid black", + fontSize: "16px", + textWrap: "balance", + }, + table_th: { + overflowX: "hidden" + } +}; + const renderer = ({ days, hours, minutes, seconds, completed }) => { if (completed) { return registrations are closed!; @@ -40,12 +128,159 @@ const RegistrationTimer = () => { } -export default () => -
    -

    MAHE Utsav Coordinators App

    -

    UTSAV 2024!

    - {/* */} - {/*
    The festival is on!
    */} - Logo -
    +export default () => { + const [events, setEvents] = useState([]); + const [loading, setLoading] = useState(true); + useEffect(() => { + const fetchData = async () => { + try { + let events = await eventsService.getAll(); + events = await Promise.all(events.map(async (e) => { + const team = await eventsService.getTeams(e.id); + const alreadyCheckedClgs = []; + + const noOfOutstation = team.filter(t => { + const res = t.college.isOutStationed === true && alreadyCheckedClgs.findIndex((id) => id === t.college._id) === -1; + alreadyCheckedClgs.push(t.college._id) + return res; + }).length; + return { ...e, noOfOutstation } + })); + let statues = await participationStatus.get(); + let participationStatusObj = {}; + statues.forEach(obj => { + if (!participationStatusObj[obj.event]) { + participationStatusObj[obj.event] = { + yes: 0, + no: 0, + maybe: 0 + } + } + if (obj.status === "Yes") + participationStatusObj[obj.event].yes++; + else if (obj.status === "Maybe") + participationStatusObj[obj.event].maybe++; + else + participationStatusObj[obj.event].no++; + }); + events = events.map(event => ({ + id: event.id, + name: event.name, + description: event.description, + college: event.college, + venue: event.venue, + rounds: event.rounds, + startDate: event.startDate, + endDate: event.endDate, + maxTeamsPerCollege: event.maxTeamsPerCollege, + faculty: event.faculty, + participationStatus: participationStatusObj[event.id], + noOfOutstation: event.noOfOutstation + })); + events.sort((a, b) => { + return new Date(a.startDate) - new Date(b.startDate); + }); + setEvents(events); + setLoading(false); + } catch (error) { + console.error("Error fetching data:", error); + } + }; + fetchData(); + }, []); + + + return ( +
    +

    MAHE Utsav Coordinators App

    +

    UTSAV 2024!

    + {/* */} + {/*
    The festival is on!
    */} + {/* Logo */} + +
    +

    Upcoming Events (Today)

    + + + + + + + + + { + events + .filter(event => { + const eventStartDate = new Date(event.startDate); + const today = new Date(); + return eventStartDate.getDate() === today.getDate() && + eventStartDate.getMonth() === today.getMonth() && + eventStartDate.getFullYear() === today.getFullYear(); + }) + .map((event, index) => { + const startTime = new Date(event.startDate).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' }); + const endTime = new Date(event.endDate).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' }); + const venue = event.venue; + const locationInfo = venueLocations.find(item => item.venue === venue); + const googleMapsLink = locationInfo ? `https://www.google.com/maps/search/?api=1&query=${encodeURIComponent(locationInfo.location)}` : null; + + return ( + + + + + + + ); + }) + } + +
    Event NameVenue ( Click to View in Google Maps ) Start TimeEnd Time
    {event.name} + {event.venue} +
    + +
    + +     		{startTime}{endTime}
    +
    +{/* +
    +

    Completed Events

    + + + + + + + + + { + events + .filter(event => { + const eventEndDate = new Date(event.endDate); + const today = new Date(); + return eventEndDate < today; // Filter events with end date before today + }) + .map((event, index) => { + const startTime = new Date(event.startDate).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' }); + const endTime = new Date(event.endDate).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' }); + return ( + + + + + + + ); + }) + } + +
    Event NameVenueStart TimeEnd Time
    {event.name}{event.venue}{startTime}{endTime}
    +
    */} +
    + ) +} ; diff --git a/src/layouts/base.css b/src/layouts/base.css index fcfdf71..9b72b76 100644 --- a/src/layouts/base.css +++ b/src/layouts/base.css @@ -43,6 +43,7 @@ button.mucapp { text-align: center; justify-content: center; transition: .15s ease-out; + min-width: 100px; } button.mucapp:hover { From d6a70d8137e38197007a16b28bb88a55ccf0ea5d Mon Sep 17 00:00:00 2001 From: rohit raj Date: Sun, 31 Mar 2024 20:14:41 +0530 Subject: [PATCH 3/3] fix window object --- src/commons/Header/index.jsx | 44 +++++++++++++++++++++++----------- src/components/Index/index.jsx | 12 ++++++---- 2 files changed, 37 insertions(+), 19 deletions(-) diff --git a/src/commons/Header/index.jsx b/src/commons/Header/index.jsx index 409762a..0dfe64f 100644 --- a/src/commons/Header/index.jsx +++ b/src/commons/Header/index.jsx @@ -204,7 +204,7 @@ class UserLink extends Component { loggedIn: false, backupName: "", // Initialize backupName state backupData: "", // Initialize backupData state - screenWidth: window.innerWidth, // Initialize screenWidth state + screenWidth: (typeof window !== "undefined") ? window.innerWidth : "", // Initialize screenWidth state }; async checkLoggedIn() { @@ -222,13 +222,25 @@ class UserLink extends Component { // Add event listener for window resize - window.addEventListener('resize', this.handleResize); + if (typeof window !== "undefined") { + window.addEventListener('resize', this.handleResize); + } + + + store.subscribe(() => { + this.setState({ open: store.getState() === "open" }); + this.updateBackup(); + }); + setInterval(this.updateBackup, 5000); + this.updateBackup(); } componentWillUnmount() { // Remove event listener when component unmounts - window.removeEventListener('resize', this.handleResize); + if (typeof window !== "undefined") { + window.removeEventListener('resize', this.handleResize); + } } handleResize = () => { @@ -236,14 +248,14 @@ class UserLink extends Component { this.setState({ screenWidth: window.innerWidth }); } - componentDidMount() { - store.subscribe(() => { - this.setState({ open: store.getState() === "open" }); - this.updateBackup(); - }); - setInterval(this.updateBackup, 5000); - this.updateBackup(); - } + // componentDidMount() { + // store.subscribe(() => { + // this.setState({ open: store.getState() === "open" }); + // this.updateBackup(); + // }); + // setInterval(this.updateBackup, 5000); + // this.updateBackup(); + // } updateBackup = () => { this.setState({ @@ -319,19 +331,23 @@ export default class Header extends Component { state = { backupName: "", // Initialize backupName state backupData: "", // Initialize backupData state - screenWidth: window.innerWidth, // Initialize screenWidth state + screenWidth: (typeof window !== "undefined") ? window.innerWidth : "", // Initialize screenWidth state }; componentDidMount() { this.updateBackup(); // Add event listener for window resize - window.addEventListener('resize', this.handleResize); + if (typeof window !== "undefined") { + window.addEventListener('resize', this.handleResize); + } } componentWillUnmount() { // Remove event listener when component unmounts - window.removeEventListener('resize', this.handleResize); + if (typeof window !== "undefined") { + window.removeEventListener('resize', this.handleResize); + } } handleResize = () => { diff --git a/src/components/Index/index.jsx b/src/components/Index/index.jsx index 29355fe..c0bf132 100644 --- a/src/components/Index/index.jsx +++ b/src/components/Index/index.jsx @@ -285,15 +285,16 @@ export default () => { - {/* +

    Completed Events

    - - - + + + + { @@ -312,13 +313,14 @@ export default () => { + ); }) }
    Event NameVenueStart TimeEnd TimeTotal Participants1st Place2nd Place3rd Place
    {event.venue} {startTime} {endTime}{endTime}
    -
    */} + ) };