Dev to main (#68)

* fix: can hover filter trigger * refactor * log仕込み * fix: iroiro * feat: 幅320pxに対応 * fix: mobile streamer icon size * feat: sticky date header * refactor: iroiro
mnsinri · Oct 27, 2024 · 852ee14 · 852ee14
1 parent 37b9dba
commit 852ee14
Show file tree

Hide file tree

Showing 21 changed files with 277 additions and 97 deletions.
diff --git a/src/components/displayHistoryButton/index.tsx b/src/components/displayHistoryButton/index.tsx
@@ -0,0 +1,16 @@
+import React from "react";
+import { Button } from "./styles";
+import { useSettingInterface } from "src/hooks";
+
+export const DisplayHistoryButton = () => {
+  const { isDisplayHistory } = useSettingInterface();
+
+  return (
+    <Button
+      state={isDisplayHistory.state}
+      onClick={() => isDisplayHistory.onChange(!isDisplayHistory.state)}
+    >
+      <isDisplayHistory.icon size={24} />
+    </Button>
+  );
+};
diff --git a/src/components/displayHistoryButton/styles.tsx b/src/components/displayHistoryButton/styles.tsx
@@ -0,0 +1,24 @@
+import styled, { css } from "styled-components";
+
+export const Button = styled.button<{ state: boolean }>`
+  width: 40px;
+  border: 0;
+  border-radius: 5px;
+  background-color: ${({ theme }) => theme.displayHistoryButton.bg.normal};
+  transition: 0.3s ease;
+  color: ${({ theme, state }) =>
+    state
+      ? theme.displayHistoryButton.iconActive
+      : theme.displayHistoryButton.icon};
+  ${({ state }) =>
+    state &&
+    css`
+      box-shadow:
+        inset 3px 3px 5px #bbbbbb,
+        inset -3px -3px 5px #ffffff;
+    `}
+
+  &:hover {
+    background-color: ${({ theme }) => theme.displayHistoryButton.bg.hover};
+  }
+`;
diff --git a/src/components/dropdownMenu/toggleButtonItem/index.tsx b/src/components/dropdownMenu/toggleButtonItem/index.tsx
@@ -17,13 +17,16 @@ type Contents = {
 type Props = {
   contents: Contents | ((isOn: boolean) => Contents);
   children?: ReactNode | ((isOn: boolean) => ReactNode);
-} & ComponentProps<typeof ToggleButton>;
+} & Pick<ComponentProps<typeof DropdownItem>, "style"> &
+  ComponentProps<typeof ToggleButton>;
 
 export const ToggleButtonItem: React.FC<Props> = ({
   contents: _contents,
   children: _children,
   onChange: _onChange,
   initState = false,
+  size = 22,
+  style,
   disabled,
 }) => {
   const [isOn, setOn] = useState(initState);
@@ -44,11 +47,11 @@ export const ToggleButtonItem: React.FC<Props> = ({
   );
 
   return (
-    <DropdownItem contents={contents}>
+    <DropdownItem contents={contents} style={{ ...style, cursor: "default" }}>
       {children}
       <FlexEnd>
         <ToggleButton
-          size={22}
+          size={size}
           onChange={onChange}
           initState={initState}
           disabled={disabled}

diff --git a/src/components/header/index.tsx b/src/components/header/index.tsx
@@ -1,5 +1,6 @@
 import React, { FC } from "react";
 import logo from "../../logo.png";
+import { DisplayHistoryButton } from "../displayHistoryButton";
 import { SettingMenu } from "../settingMenu";
 import { Container, Icon, Title, TitleText, DropdownWrapper } from "./styles";
 
@@ -17,6 +18,7 @@ export const Header: FC<Props> = ({ isScrolled, onOpenMenu, onCloseMenu }) => {
         <TitleText>Vspo stream schedule</TitleText>
       </Title>
       <DropdownWrapper>
+        <DisplayHistoryButton />
         <SettingMenu
           position={{ y: 40 }}
           onOpen={onOpenMenu}

diff --git a/src/components/header/styles.tsx b/src/components/header/styles.tsx
@@ -2,13 +2,14 @@ import { breakpointMediaQueries } from "src/configs";
 import styled, { css } from "styled-components";
 
 export const Container = styled.div<{ isScrolled: boolean }>`
-  padding: 5px 10px;
+  padding: 10px 10px 10px 20px;
   margin-bottom: 5px;
   position: sticky;
   top: 0;
   left: 0;
   display: flex;
   align-items: center;
+  justify-content: space-between;
   border-radius: 0 0 10px 10px;
   z-index: 10;
   background-color: ${({ theme }) => theme.bg};
@@ -28,15 +29,8 @@ export const Container = styled.div<{ isScrolled: boolean }>`
 `;
 
 export const Title = styled.div`
-  width: 100%;
   display: flex;
-  justify-content: center;
-  margin-left: 40px;
-
-  ${breakpointMediaQueries.tablet`
-    justify-content: start;
-    margin-left: 0px;
-  `}
+  justify-content: start;
 `;
 
 export const Icon = styled.img`
@@ -59,7 +53,7 @@ export const TitleText = styled.div`
 `;
 
 export const DropdownWrapper = styled.div`
-  width: 40px;
   display: flex;
+  gap: 5px;
   justify-content: flex-end;
 `;
diff --git a/src/components/inViewContainer/index.tsx b/src/components/inViewContainer/index.tsx
@@ -0,0 +1,45 @@
+import React, {
+  ReactElement,
+  ReactNode,
+  useEffect,
+  useRef,
+  useState,
+} from "react";
+import { ObserverElement } from "./styles";
+
+type Props<T> = {
+  data: T[];
+  renderItem: (props: T) => ReactNode;
+  observerHeight?: number;
+};
+
+export const InViewContainer = <T,>({
+  data,
+  renderItem,
+  observerHeight,
+}: Props<T>): ReactElement => {
+  const [renderDataIdx, setRenderDataIdx] = useState<number>(1);
+  const ref = useRef<HTMLDivElement>(null!);
+
+  useEffect(() => {
+    const observer = new IntersectionObserver(([entry]) => {
+      if (!entry.isIntersecting) return;
+
+      setRenderDataIdx((n) => ++n);
+    });
+
+    observer.observe(ref.current);
+
+    return () => {
+      observer.unobserve(ref.current);
+      setRenderDataIdx(1);
+    };
+  }, [data]);
+
+  return (
+    <>
+      {data.slice(0, renderDataIdx).map((props) => renderItem(props))}
+      <ObserverElement ref={ref} height={observerHeight} />
+    </>
+  );
+};
diff --git a/src/components/inViewContainer/styles.tsx b/src/components/inViewContainer/styles.tsx
@@ -0,0 +1,6 @@
+import styled from "styled-components";
+
+export const ObserverElement = styled.div<{ height?: number }>`
+  min-height: ${({ height }) => height ?? 0}px;
+  width: 100%;
+`;
diff --git a/src/components/mainContainer/index.tsx b/src/components/mainContainer/index.tsx
@@ -14,6 +14,7 @@ import { StreamGridHeader } from "../streamGridHeader";
 import { useDisplaySize, useSetting, useVspoStream } from "src/providers";
 import { toYYYYMMDD } from "src/utils";
 import { responsiveProperties } from "src/configs";
+import { InViewContainer } from "../inViewContainer";
 
 type DailyStream = {
   date: string;
@@ -91,7 +92,6 @@ export const MainContainer: FC = () => {
     return () => {
       window.removeEventListener("resize", onResize);
       ref.removeEventListener("scroll", onScroll);
-      window.removeEventListener("onload", onResize);
     };
   }, [displaySize]);
 
@@ -151,16 +151,20 @@ export const MainContainer: FC = () => {
           onOpenMenu={disableScroll}
           onCloseMenu={enableScroll}
         />
-        {dailyStreams.map(({ date, streams }) => (
-          <DailyStreamContainer key={date}>
-            <StreamGridHeader dateString={date} />
-            <StreamGrid
-              streams={streams}
-              {...gridProperties}
-              minHeight={calcStreamGridMinHeight(streams.length)}
-            />
-          </DailyStreamContainer>
-        ))}
+        <InViewContainer
+          data={dailyStreams}
+          renderItem={({ date, streams }) => (
+            <DailyStreamContainer key={date}>
+              <StreamGridHeader dateString={date} />
+              <StreamGrid
+                streams={streams}
+                {...gridProperties}
+                minHeight={calcStreamGridMinHeight(streams.length)}
+              />
+            </DailyStreamContainer>
+          )}
+          observerHeight={30}
+        />
       </Container>
     </Background>
   );

diff --git a/src/components/mainContainer/styles.tsx b/src/components/mainContainer/styles.tsx
@@ -28,8 +28,4 @@ export const Container = styled.div`
 
 export const DailyStreamContainer = styled.div`
   padding: 0 20px;
-
-  &:last-child {
-    padding-bottom: 30px;
-  }
 `;
diff --git a/src/components/settingMenu/index.tsx b/src/components/settingMenu/index.tsx
@@ -7,20 +7,20 @@ import {
 } from "../dropdownMenu";
 import { Button } from "./styles";
 import { StreamerFilter } from "../streamerFilter";
-import { useDisplaySize, useSetting, useSettingDispatch } from "src/providers";
-import { BiExpandAlt, BiMenu } from "react-icons/bi";
+import { useDisplaySize } from "src/providers";
+import { BiMenu } from "react-icons/bi";
 import { FaGithub } from "react-icons/fa";
-import { TbMoonFilled, TbMarquee2, TbHistory } from "react-icons/tb";
 import { IoIosArrowBack } from "react-icons/io";
+import { useSettingInterface } from "src/hooks";
+import { SettingComponentProps } from "types";
 
 type Props = Pick<
   ComponentProps<typeof Dropdown>,
   "position" | "onOpen" | "onClose"
 >;
 
 export const SettingMenu: FC<Props> = memo(({ position, onOpen, onClose }) => {
-  const setting = useSetting();
-  const configDispatch = useSettingDispatch();
+  const settings = useSettingInterface();
   const displaySize = useDisplaySize();
 
   const MenuButton = memo(() => (
@@ -45,59 +45,17 @@ export const SettingMenu: FC<Props> = memo(({ position, onOpen, onClose }) => {
     <DropdownItem contents={{ text }} style={{ fontSize: 13 }} />
   ));
 
-  const ThemeSetting = memo(() => (
+  const SettingMenuItem = (props: SettingComponentProps) => (
     <ToggleButtonItem
-      initState={setting.isDarkTheme.state}
+      initState={props.state}
       contents={{
-        icon: <TbMoonFilled size={18} />,
-        text: "Dark theme",
+        icon: <props.icon size={18} />,
+        text: props.label,
       }}
-      onChange={(payload) => configDispatch({ target: "isDarkTheme", payload })}
-      disabled={setting.isDarkTheme.isReadOnly}
+      onChange={props.onChange}
+      disabled={props.isReadOnly}
     />
-  ));
-
-  const ExpandSetting = memo(() => (
-    <ToggleButtonItem
-      initState={setting.isExpandAlways.state}
-      contents={{
-        icon: <BiExpandAlt size={18} />,
-        text: "Expand always",
-      }}
-      onChange={(payload) =>
-        configDispatch({ target: "isExpandAlways", payload })
-      }
-      disabled={setting.isExpandAlways.isReadOnly}
-    />
-  ));
-
-  const MarqueeSetting = memo(() => (
-    <ToggleButtonItem
-      initState={setting.isMarqueeTitle.state}
-      contents={{
-        icon: <TbMarquee2 size={18} />,
-        text: "Marquee title",
-      }}
-      onChange={(payload) =>
-        configDispatch({ target: "isMarqueeTitle", payload })
-      }
-      disabled={setting.isMarqueeTitle.isReadOnly}
-    />
-  ));
-
-  const HistorySetting = memo(() => (
-    <ToggleButtonItem
-      initState={setting.isDisplayHistory.state}
-      contents={{
-        icon: <TbHistory size={18} />,
-        text: "Stream history",
-      }}
-      onChange={(payload: boolean) =>
-        configDispatch({ target: "isDisplayHistory", payload })
-      }
-      disabled={setting.isDisplayHistory.isReadOnly}
-    />
-  ));
+  );
 
   return (
     <Dropdown
@@ -107,10 +65,10 @@ export const SettingMenu: FC<Props> = memo(({ position, onOpen, onClose }) => {
       onClose={onClose}
     >
       <DropdownHeader text="Setting" />
-      <ThemeSetting />
-      <ExpandSetting />
-      <MarqueeSetting />
-      <HistorySetting />
+      <SettingMenuItem {...settings.isDarkTheme} />
+      <SettingMenuItem {...settings.isExpandAlways} />
+      <SettingMenuItem {...settings.isMarqueeTitle} />
+      <SettingMenuItem {...settings.isDisplayHistory} />
       <Border />
       {displaySize !== "mobile" && <DropdownHeader text="Filter" />}
       <StreamerFilter

diff --git a/src/components/settingMenu/styles.tsx b/src/components/settingMenu/styles.tsx
@@ -1,6 +1,7 @@
 import styled from "styled-components";
 
 export const Button = styled.button`
+  width: 40px;
   border: 0;
   border-radius: 5px;
   background-color: ${({ theme }) => theme.dropdown.input.bg.normal};

diff --git a/src/components/streamGrid/index.tsx b/src/components/streamGrid/index.tsx
@@ -11,7 +11,6 @@ type Props = {
 };
 export const StreamGrid: FC<Props> = ({ streams, column, gap, minHeight }) => {
   const streamsMatrix = useMemo(() => {
-    console.log("streamsMatrix", column);
     const sortedStreams = [...streams].sort(
       (a, b) =>
         a.startAt.getTime() - b.startAt.getTime() ||

diff --git a/src/components/streamGridHeader/index.tsx b/src/components/streamGridHeader/index.tsx
@@ -1,6 +1,13 @@
 import React, { FC, useMemo } from "react";
 import { useTheme } from "styled-components";
-import { Bar, Container, DateLabel, Icon } from "./styles";
+import {
+  Bar,
+  Container,
+  DateContainer,
+  DateLabel,
+  DateLabelForOutline,
+  Icon,
+} from "./styles";
 import { toYYYYMMDD } from "src/utils";
 
 type Props = {
@@ -52,7 +59,10 @@ export const StreamGridHeader: FC<Props> = ({ dateString }) => {
           <Bar key={param.height} {...param} />
         ))}
       </Icon>
-      <DateLabel>{parseToViewDate(dateString)}</DateLabel>
+      <DateContainer>
+        <DateLabel>{parseToViewDate(dateString)}</DateLabel>
+        <DateLabelForOutline>{parseToViewDate(dateString)}</DateLabelForOutline>
+      </DateContainer>
     </Container>
   );
 };