Added empty ann list message on stories preview

Converted to use css module

front/src/components/StoriesPreview.tsx

@@ -1,5 +1,5 @@
 import { Link } from 'react-router-dom'
-import { CSSProperties, useEffect, useMemo, useRef, useState } from 'react'
+import { useEffect, useLayoutEffect, useRef, useState } from 'react'
 import { Button } from 'react-bootstrap'
 
 import { UserCategory, composeUserCategoriesFilters, userCategoriesInfos } from '../assets/userCategories'
@@ -9,64 +9,37 @@ import { URLEncodeFilters } from '../utils/filters'
 
 import rightAngleIcon from '../assets/rightAngle.svg'
 
+import styles from '../styles/StoriesPreview.module.css'
+
 type StoriesPreviewProps = {
     announcements: Announcement[],
     category: UserCategory,
 }
 
-const styles = {
+const StoriesPreview = ({ announcements, category }: StoriesPreviewProps) => (
-    container: {
+    announcements.map((ann, i) => (
-        transform: 'translateX(0)',
+        <li key={`${category}${i}`}>
-    } as CSSProperties,
+            <Link to={'/?' + new URLSearchParams({
-    ul: {
+                ...URLEncodeFilters(composeUserCategoriesFilters[category]()),
-        display: 'flex',
+                storyIndex: i.toString(),
-        gap: 10,
+            }).toString()} className={styles.link}>
-        listStyleType: 'none',
+                {ann.src?.endsWith('mp4') ? (
-        overflow: 'scroll',
+                    <video src={ann.src} className={styles.image} />
-        paddingLeft: 0,
+                ) : (
-        scrollBehavior: 'smooth',
+                    <img
-    } as CSSProperties,
+                        src={ann.src || categoryGraphics[ann.category]}
-    link: {
+                        alt={'Изображение' + (ann.src ? 'предмета' : categoryNames[ann.category])}
-        textDecoration: 'none',
+                        className={styles.image}
-        color: 'var(--bs-body-color)',
+                    />
-        maxWidth: 'calc(25vh * 9 / 16)',
+                )}
-        display: 'inline-block',
+                <p className={styles.title}>{ann.name}</p>
-    } as CSSProperties,
+                <p className={styles.title}>{userCategoriesInfos[category](ann)}</p>
-    image: {
+            </Link>
-        height: '25vh',
+        </li>
-        objectFit: 'contain',
+    ))
-        borderRadius: 12,
+)
-        marginBottom: 5,
-        maxWidth: 'inherit',
-    } as CSSProperties,
-    title: {
-        overflow: 'hidden',
-        textOverflow: 'ellipsis',
-        marginBottom: 5,
-    } as CSSProperties,
-    scrollButton: {
-        position: 'fixed',
-        right: 0,
-        top: 0,
-        zIndex: 100,
-        background: 'linear-gradient(to right, rgba(17, 17, 17, 0) 0%, rgba(17, 17, 17, 255) 100%)',
-        display: 'block',
-        height: '100%',
-        width: '10%',
-        border: 'none',
-        cursor: 'default',
-        borderRadius: 0,
-    } as CSSProperties,
-    leftScrollButton: {
-        left: 0,
-        transform: 'scaleX(-1)',
-    } as CSSProperties,
-    rightScrollButton: {
-        right: 0,
-    } as CSSProperties,
-}
 
-function StoriesPreview({ announcements, category }: StoriesPreviewProps) {
+function StoriesPreviewCarousel({ announcements, category }: StoriesPreviewProps) {
     const ulElement = useRef<HTMLUListElement | null>(null)
     const [showScrollButtons, setShowScrollButtons] = useState({ left: false, right: false })
 
@@ -90,7 +63,7 @@ function StoriesPreview({ announcements, category }: StoriesPreviewProps) {
         }
     }, [])
 
-    useEffect(() => {
+    useLayoutEffect(() => {
         const ul = ulElement.current
 
         if (ul) {
@@ -106,40 +79,26 @@ function StoriesPreview({ announcements, category }: StoriesPreviewProps) {
         }
     }
 
-    return <div style={styles.container}>
+    return <div className={styles.container}>
         {showScrollButtons.left &&
-            <Button onClick={doScroll(false)} style={{ ...styles.scrollButton, ...styles.leftScrollButton }}>
+            <Button onClick={doScroll(false)} className={`${styles.scrollButton} ${styles.leftScrollButton}`}>
                 <img src={rightAngleIcon} alt='Показать ещё' />
             </Button>
         }
-        <ul style={styles.ul} className='StoriesPreview_ul' ref={ulElement}>
+
-            {useMemo(() => announcements.map((ann, i) => (
+        {announcements.length > 0 ? (
-                <li key={`${category}${i}`}>
+            <ul className={styles.list} ref={ulElement}>
-                    <Link to={'/?' + new URLSearchParams({
+                <StoriesPreview announcements={announcements} category={category} />
-                        ...URLEncodeFilters(composeUserCategoriesFilters[category]()),
+            </ul>
-                        storyIndex: i.toString(),
+        ) : (
-                    }).toString()} style={styles.link}>
+            <p>Здесь пока пусто</p>
-                        {ann.src?.endsWith('mp4') ? (
+        )}
-                            <video src={ann.src} style={styles.image} />
-                        ) : (
-                            <img
-                                src={ann.src || categoryGraphics[ann.category]}
-                                alt={'Изображение' + (ann.src ? 'предмета' : categoryNames[ann.category])}
-                                style={styles.image}
-                            />
-                        )}
-                        <p style={styles.title}>{ann.name}</p>
-                        <p style={styles.title}>{userCategoriesInfos[category](ann)}</p>
-                    </Link>
-                </li>
-            )), [announcements, category])}
-        </ul>
         {showScrollButtons.right &&
-            <Button onClick={doScroll(true)} style={{ ...styles.scrollButton, ...styles.rightScrollButton }}>
+            <Button onClick={doScroll(true)} className={`${styles.scrollButton} ${styles.rightScrollButton}`}>
                 <img src={rightAngleIcon} alt='Показать ещё' />
             </Button>
         }
     </div>
 }
 
-export default StoriesPreview
+export default StoriesPreviewCarousel

front/src/styles/StoriesPreview.module.css

@@ -0,0 +1,56 @@
+.container {
+    transform: translateX(0);
+}
+
+.list {
+    display: flex;
+    gap: 10px;
+    list-style-type: none;
+    overflow: scroll;
+    padding-left: 0;
+    scroll-behavior: smooth;
+}
+
+.link {
+    text-decoration: none;
+    color: var(--bs-body-color);
+    max-width: calc(25vh * 9 / 16);
+    display: inline-block;
+}
+
+.image {
+    height: 25vh;
+    object-fit: contain;
+    border-radius: 12px;
+    margin-bottom: 5px;
+    max-width: inherit;
+}
+
+.title {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    margin-bottom: 5px;
+}
+
+.scrollButton {
+    position: fixed;
+    right: 0;
+    top: 0;
+    z-index: 100;
+    background: linear-gradient(to right, rgba(17, 17, 17, 0) 0%, rgba(17, 17, 17, 255) 100%);
+    display: block;
+    height: 100%;
+    width: 10%;
+    border: none;
+    cursor: default;
+    border-radius: 0;
+}
+
+.leftScrollButton {
+    left: 0;
+    transform: scaleX(-1);
+}
+
+.rightScrollButton {
+    right: 0;
+}