Telegram explanation and client-side render for string degrees in hom…

…epage (#415) * Overhaul of localization service Putemm capì mo * Initial setup of telegram new page * Telegram page almost done * update telegram page * Fix getPath on courses/slug route * Update it.ts * Client-side load of string degrees for homepage Enable static generation for homepage (niceimprovement) --------- Co-authored-by: Giuseppe Del Campo <giuseppe.delcampo@outlook.com>
StudentiUniMi · Nov 2, 2023 · 61df465 · 61df465
1 parent a15f23c
commit 61df465
Show file tree

Hide file tree

Showing 17 changed files with 1,221 additions and 953 deletions.
diff --git a/components/Atoms/Chip.tsx b/components/Atoms/Chip.tsx
@@ -11,31 +11,37 @@ interface Props {
     outlined?: boolean,
     theme?: Theme,
     className?: string,
-    style?: CSSProperties
+    style?: CSSProperties,
+    isLoading?: boolean
 };
 
 const Chip = (props: Props) => {
     return (
-        <div className={props.className ?? ''} style={Object.assign({
-            backgroundColor: props.outlined || !props.bgColor ? "transparent" : props.bgColor,
+        <div className={`${props.className ?? ''}${props.isLoading ? ' chip-shimmer' : ''}`} style={Object.assign({
+            backgroundColor: props.outlined || !props.bgColor ? "transparent" : props.isLoading ? props.theme?.palette.neutralLight : props.bgColor,
             display: 'inline-flex',
             alignItems: 'center',
             justifyContent: 'center',
             whiteSpace: 'nowrap',
             cursor: 'default',
             borderRadius: 16,
             border: props.outlined && `1px solid ${props.theme?.palette.neutralTertiary}`,
+            width: props.isLoading ? randomIntFromInterval(100,150) : 'auto',
             height: props.size === 'small' ? 24 : 32,
             transition: 'all ease-in 0.1s'
         }, props.style)}>
-            <Text 
+            {!props.isLoading && <Text 
                 variant={"small"} 
                 styles={semibold} 
                 style={{ color: props.textColor, padding: props.size === 'small' ? '0px 8px' : '0px 12px' }}>
                     {props.label}
-            </Text>
+            </Text>}
         </div>
     )
 };
 
+const randomIntFromInterval = (minWidth: number, maxWidth: number) => {
+  return Math.floor(Math.random() * (maxWidth - minWidth + 1) + minWidth);
+};
+
 export default Chip;
diff --git a/components/Atoms/GroupTypes.tsx b/components/Atoms/GroupTypes.tsx
@@ -7,7 +7,7 @@ import GroupType from "models/GroupType";
 import GroupTypesData from '../../data/GroupTypes.json';
 import LocalizationService from 'services/LocalizationService';
 
-type Page = 'courses' | 'groups';
+type Page = 'courses' | 'groups' | 'telegram';
 
 interface Props {
     page: Page
@@ -28,7 +28,7 @@ const GroupTypes = (props: Props) => {
         root: {
             display: 'flex',
             flexDirection: 'column',
-            backgroundColor: props.page === "courses" ? theme.palette.neutralLighter : theme.palette.white,
+            backgroundColor: props.page === "courses" || props.page === "telegram" ? theme.palette.neutralLighter : theme.palette.white,
             gap: 15,
             maxWidth: 200,
             maxHeight: 250,

diff --git a/components/Courses/GroupItem.tsx b/components/Courses/GroupItem.tsx
@@ -208,9 +208,9 @@ const CourseItem = (props: Props) => {
                 }
 
                 <Text styles={descriptionTextStyles}>
-                    {data.year === -1 && <Chip label={locale?.courses.mainGroup} size="small" textColor={theme.palette.black} bgColor={theme.palette.neutralLight} className="m-1" />}
-                    {yearText !== null && <Chip label={yearText} size="small" textColor={theme.palette.black} bgColor={theme.palette.neutralLighter} className="m-1" />}
-                    {semesterText !== null && <Chip label={semesterText} size="small" textColor={theme.palette.black} bgColor={theme.palette.neutralLighter} />}
+                    {data.year === -1 && <Chip label={locale?.courses.mainGroup} size="small" textColor={theme.palette.black} bgColor={theme.palette.neutralLight} className="m-1" theme={theme} />}
+                    {yearText !== null && <Chip label={yearText} size="small" textColor={theme.palette.black} bgColor={theme.palette.neutralLighter} className="m-1" theme={theme} />}
+                    {semesterText !== null && <Chip label={semesterText} size="small" textColor={theme.palette.black} bgColor={theme.palette.neutralLighter} theme={theme} />}
                 </Text>
 
                 <Text variant="small" style={{ marginTop: 8, marginBottom: 8 }}>

diff --git a/components/Header/HeaderMenu.tsx b/components/Header/HeaderMenu.tsx
@@ -1,4 +1,4 @@
-import { useEffect, useRef, useState, useCallback, useContext } from "react";
+import { useEffect, useState, useContext, CSSProperties } from "react";
 import { FontSizes, IDropdownOption, Icon, Panel, Text, Pivot, PivotItem, IPivotStyles, useTheme, Link } from '@fluentui/react';
 import { useRouter } from 'next/router';
 import { useBoolean } from "@fluentui/react-hooks";
@@ -24,13 +24,13 @@ const HeaderMenu = () => {
     const { isPolicyAccepted, togglePolicyDialog } = useContext(GlobalContext);
     const [isOpen, { setTrue: openPanel, setFalse: dismissPanel }] = useBoolean(false);
 
-    const cardStyle = { 
+    const cardStyle: CSSProperties = { 
         backgroundColor: theme.palette.themeDarkAlt, 
         borderRadius: 10, 
         padding:15 
     };
 
-    const mobileHeaderButton = { 
+    const mobileHeaderButton: CSSProperties = { 
         fontSize: FontSizes.size18,
         backgroundColor: theme.palette.themePrimary,
         color: theme.palette.white,
@@ -56,53 +56,23 @@ const HeaderMenu = () => {
         [ItemsKeys.university, locale?.headerMenuItems.university],
         [ItemsKeys.organization, locale?.headerMenuItems.aboutUs]
     ]);
-
-    const getPath = useCallback((): Array<string | boolean> => {
+    
+    const getPath = (): string => {
         var pathname = router.pathname;
-        var states = pathname.substring(1).split('/').filter(x => x !== '');
-        let first = states.length > 0 ? states[0] : '';
-        let isCorrectPathKey = Object.keys(ItemsKeys).filter(x => x === first).length !== 0;
-        return [first, isCorrectPathKey];
-    }, []);
-
-    let didMount = useRef(false);
-    let [path, isCorrect] = getPath();
-    const [selectedKey, setSelectedKey] = useState(isCorrect ? path as ItemsKeys : ItemsKeys.home);
-
-    /* Initialize header element based on URL */
-    useEffect(() => {
-        if (!didMount.current) {
-            didMount.current = true;
-            let [path, isCorrect] = getPath();
-            if (!isCorrect) {
-                router.push('/');
-                setSelectedKey(ItemsKeys.home);
-            } else {
-                setSelectedKey(path as ItemsKeys);
-            }
-        }
-    }, [getPath]);
+        if (pathname.substring(1) === "") return "home";
 
-    /* Handle push and pop events of browser */
-    useEffect(() => {
-        router.beforePopState(({ as }) => {
-            const routeEl = as.substring(1,);
+        var path = pathname.substring(1).split("/")[0];
+        return path;
+    };
 
-            if (routeEl === "") setSelectedKey("home" as ItemsKeys);
-            else setSelectedKey(routeEl as ItemsKeys);
-
-            return true;
-        });
+    const [selectedKey, setSelectedKey] = useState("");
 
-        return () => {
-            router.beforePopState(() => true);
-        };
-    }, [router]);
+    useEffect(()=>{
+        setSelectedKey(getPath());
+    }, [router.pathname]);
 
     const handlePivotLinkClick = (item?: PivotItem, _e?: React.MouseEvent<HTMLElement, MouseEvent>) => {
         if (item!.props.itemKey !== selectedKey) {
-            setSelectedKey(item!.props.itemKey! as ItemsKeys);
-
             if (item!.props.itemKey === "home") {
                 router.push('/');
             } else {
@@ -113,8 +83,6 @@ const HeaderMenu = () => {
 
     const handleDropdownValueChange = (item?: IDropdownOption): void => {
         if (item!.key !== selectedKey) {
-            setSelectedKey(item!.key! as ItemsKeys);
-
             if (item!.key! === "home") {
                 router.push('/');
             } else {
@@ -180,7 +148,7 @@ const HeaderMenu = () => {
                         </div>
 
                         <div className="mb-3">
-                            <div style={{ ...cardStyle, backgroundColor: theme.palette.yellow }} onClick={() => { router.push("/courses"); setSelectedKey(ItemsKeys.courses); dismissPanel(); } }>
+                            <div style={{ ...cardStyle, backgroundColor: theme.palette.yellow }} onClick={() => { router.push("/courses"); dismissPanel(); } }>
                                 <Text variant="medium" styles={semibold} style={{ color: "#0f0f0f" }}>{locale?.sidebar.searchGroup} <Icon iconName="ChevronRightMed" style={{ fontSize: 10 }} /></Text>
                             </div>
                         </div>

diff --git a/components/Home/DegreesMarquee.tsx b/components/Home/DegreesMarquee.tsx
@@ -4,6 +4,7 @@ import Marquee from "react-fast-marquee";
 import Chip from '../Atoms/Chip';
 
 interface Props {
+    isLoadingDegrees: boolean,
     degrees: string[]
 };
 
@@ -16,18 +17,34 @@ const DegreesMarquee = (props: Props) => {
     return (
         <div className="degrees-marquee d-flex flex-column" style={{ gap: 10 }}>
 
-            <Marquee direction={"right"} gradient={false} speed={10}>
+            <Marquee direction={"right"} gradient={false} speed={9}>
                 {firstHalf.map((x,i) =>
                     <Text styles={semibold} key={i}>
-                        <Chip label={x} size="small" textColor={theme.palette.white} bgColor={theme.palette.themeDarkAlt} className="mr-1" />
+                        <Chip 
+                            label={x} 
+                            size="small" 
+                            textColor={theme.palette.white} 
+                            bgColor={theme.palette.themeDarkAlt} 
+                            className="mr-1" 
+                            theme={theme}
+                            isLoading={props.isLoadingDegrees} 
+                        />
                     </Text>
                 )}
             </Marquee>
 
-            <Marquee direction={"left"} gradient={false} speed={10}>
+            <Marquee direction={"left"} gradient={false} speed={9}>
                 {secondHalf.map((x,i) =>
                     <Text styles={semibold} key={i+half}>
-                        <Chip label={x} size="small" textColor={theme.palette.white} bgColor={theme.palette.themeDarkAlt} className="mr-1" />
+                        <Chip 
+                            label={x} 
+                            size="small" 
+                            textColor={theme.palette.white} 
+                            bgColor={theme.palette.themeDarkAlt} 
+                            className="mr-1" 
+                            theme={theme}
+                            isLoading={props.isLoadingDegrees} 
+                        />
                     </Text>
                 )}
             </Marquee>

diff --git a/components/Home/Landing.tsx b/components/Home/Landing.tsx
@@ -9,12 +9,12 @@ import Row from 'react-bootstrap/Row';
 import Image from 'next/image';
 
 interface Props {
-    degrees: string[]
+    isLoadingDegrees: boolean,
+    degrees: Array<string>
 };
 
 const Landing = (props: Props) => {
     const locale = LocalizationService.strings();
-    let stringDegrees: string[] = props.degrees;
 
     return (
         <div className="pb-5 pt-5">
@@ -50,12 +50,15 @@ const Landing = (props: Props) => {
                             </h2>
                         </div>
 
-                        <DegreesMarquee degrees={stringDegrees} />
+                        <DegreesMarquee 
+                            isLoadingDegrees={props.isLoadingDegrees}
+                            degrees={props.degrees} 
+                        />
                     </Col>
                 </Row>
             </Container>
         </div>
     )
-}
+};
 
 export default Landing;
diff --git a/components/Home/Telegram.tsx b/components/Home/Telegram.tsx
@@ -4,6 +4,7 @@ import { Container } from 'react-bootstrap';
 import Col from 'react-bootstrap/Col';
 import Row from 'react-bootstrap/Row';
 import LocalizationService from "../../services/LocalizationService";
+import router from 'next/router';
 
 const TelegramSection = () => {
     var theme = useTheme();
@@ -21,7 +22,7 @@ const TelegramSection = () => {
                     </Col>
 
                     <Col lg={2} className="text-right center-mobile">
-                        <DefaultButton href="https://youtu.be/kgNxRZghkkA?t=133" text={locale?.homepage.telegramButton} iconProps={buttonIconProps} allowDisabledFocus style={buttonStyle} />
+                        <DefaultButton onClick={() => { router.push("/telegram"); }} text={locale?.homepage.telegramButton} iconProps={buttonIconProps} allowDisabledFocus style={buttonStyle} />
                     </Col>
                 </Row>
             </Container>