fix(win95): update supported dimensions (#5932)

Co-authored-by: Ali Emir Şen <[email protected]>
Co-authored-by: Refine Community Bot <[email protected]>

examples/win95/src/App.tsx

@@ -18,6 +18,7 @@ import { CommonLayout } from "@/components/layout";
 import { AboutWindow } from "@/components/about-window";
 import { VideoClubLayout } from "@/components/layout";
 import { RVCWebsiteCatalogPage } from "@/components/rvc-website/catalog";
+import { UnsupportedResolutionHandler } from "@/components/unsupported-resolution-handler";
 import { supabaseClient } from "@/supabase-client";
 import { HomePage } from "@/routes/home-page";
 import { LoginPage } from "@/routes/login-page";
@@ -45,15 +46,14 @@ import { notificationProvider } from "@/providers/notification-provider";
 
 import dayjs from "dayjs";
 import durationPlugin from "dayjs/plugin/duration";
-import { MobileVersionIsNotAvailable } from "./components/mobile-version-is-not-available";
 dayjs.extend(durationPlugin);
 
 const App = () => {
   return (
     <DevtoolsProvider>
       <BrowserRouter>
         <ThemeProvider>
-          <MobileVersionIsNotAvailable>
+          <UnsupportedResolutionHandler>
             <Refine
               dataProvider={dataProvider(supabaseClient)}
               liveProvider={liveProvider(supabaseClient)}
@@ -226,7 +226,7 @@ const App = () => {
               <DocumentTitleHandler />
               <Toaster />
             </Refine>
-          </MobileVersionIsNotAvailable>
+          </UnsupportedResolutionHandler>
         </ThemeProvider>
         <DevtoolsPanel />
       </BrowserRouter>

examples/win95/src/components/layout/common/index.tsx

@@ -2,6 +2,7 @@ import { PropsWithChildren } from "react";
 import styled from "styled-components";
 import { ScrollView } from "react95";
 import { TaskBar } from "@/components/taskbar";
+import { MINIMUM_APP_HEIGHT, MINIMUM_APP_WIDTH } from "@/utils/app-settings";
 
 export const CommonLayout = ({ children }: PropsWithChildren) => {
   return (
@@ -31,8 +32,8 @@ const Container = styled.div`
   display: flex;
   flex-direction: column;
   height: 100%;
-  min-width: 1280px;
-  min-height: 780px;
+  min-width: ${MINIMUM_APP_WIDTH}px;
+  min-height: ${MINIMUM_APP_HEIGHT}px;
   height: 100dvh;
   width: 100%;
   padding: 0;

examples/win95/src/components/tooltip/index.tsx

@@ -3,11 +3,16 @@ import { Tooltip, TooltipProps } from "react95";
 
 type Props = {
   content: ReactNode;
-} & Omit<TooltipProps, "text">;
+} & Omit<TooltipProps, "text" | "content">;
 
 export const Popover = ({ children, ...props }: PropsWithChildren<Props>) => {
   return (
-    <Tooltip {...props} style={{ color: "black" }} text={props.content as any}>
+    <Tooltip
+      {...props}
+      style={{ color: "black" }}
+      // @ts-expect-error react95 types are incorrect. <Tooltip /> works with ReactNode but types are expecting a string
+      text={props.content}
+    >
       {children}
     </Tooltip>
   );

examples/win95/src/components/mobile-version-is-not-available/index.tsx → examples/win95/src/components/unsupported-resolution-handler/index.tsx

@@ -1,7 +1,6 @@
+import { MINIMUM_APP_HEIGHT, MINIMUM_APP_WIDTH } from "@/utils/app-settings";
 import { PropsWithChildren, useEffect, useState } from "react";
 
-const MOBILE_WIDTH = 1280;
-
 function getWindowDimensions() {
   const { innerWidth: width, innerHeight: height } = window;
   return {
@@ -10,7 +9,7 @@ function getWindowDimensions() {
   };
 }
 
-export const MobileVersionIsNotAvailable = ({
+export const UnsupportedResolutionHandler = ({
   children,
 }: PropsWithChildren) => {
   const [windowDimensions, setWindowDimensions] = useState(() =>
@@ -22,7 +21,10 @@ export const MobileVersionIsNotAvailable = ({
       const dimensions = getWindowDimensions();
       const body = document.body;
 
-      if (dimensions.width < MOBILE_WIDTH) {
+      if (
+        dimensions.width < MINIMUM_APP_WIDTH ||
+        dimensions.height < MINIMUM_APP_HEIGHT
+      ) {
         body.style.overflow = "hidden";
       } else {
         body.style.overflow = "unset";
@@ -35,15 +37,18 @@ export const MobileVersionIsNotAvailable = ({
     return () => window.removeEventListener("resize", handleResize);
   }, []);
 
-  const isMobile = windowDimensions.width < MOBILE_WIDTH;
+  const isSupported =
+    windowDimensions.width >= MINIMUM_APP_WIDTH &&
+    windowDimensions.height >= MINIMUM_APP_HEIGHT;
 
   return (
     <>
       <div
         style={{
-          display: isMobile ? "flex" : "none",
+          display: isSupported ? "none" : "flex",
+          pointerEvents: isSupported ? "unset" : "none",
+          overflow: isSupported ? "unset" : "hidden",
           flexDirection: "column",
-          pointerEvents: isMobile ? "none" : "unset",
           alignItems: "center",
           justifyContent: "center",
           position: "absolute",
@@ -77,8 +82,10 @@ export const MobileVersionIsNotAvailable = ({
             marginTop: "16px",
           }}
         >
-          Mobile version is not available yet.
-          <div>Please visit from a desktop browser.</div>
+          Resolution not supported.
+          <div>
+            This website is best browsed at resolutions 1024x768 or higher.
+          </div>
         </h2>
       </div>
       {children}

examples/win95/src/routes/video-club/report/index.tsx

@@ -213,8 +213,8 @@ export const VideoClubReportPage = () => {
 
           <ContainerChart>
             <LineChart
-              width={730}
-              height={300}
+              width={600}
+              height={352}
               data={chartData}
               margin={{
                 top: 32,
@@ -377,7 +377,7 @@ const StatLight = styled(StatRow)`
 const StatTodaysRevenue = styled(StatRow)`
   background-color: #2F711E;
   color: white;
-  margin-bottom: 24px;
+  margin-bottom: 16px;
 `;
 
 const StatActiveMembers = styled(StatRow)`

examples/win95/src/routes/video-club/tapes/rent.tsx

@@ -1,5 +1,5 @@
 import { useList, useMany, useOne } from "@refinedev/core";
-import { useState } from "react";
+import { useState, useEffect } from "react";
 import styled from "styled-components";
 import { Button, GroupBox, Select, Separator, TextInput } from "react95";
 import { useForm } from "@refinedev/react-hook-form";
@@ -263,7 +263,7 @@ const RentTapeForm = ({
   member: ExtendedMember | null;
   title: ExtendedVideoTitle | null;
 }) => {
-  const { data: dataTapes } = useList<Tape>({
+  const { data: dataTapes, isSuccess: tapesIsSuccess } = useList<Tape>({
     resource: "tapes",
     filters: [
       {
@@ -295,6 +295,8 @@ const RentTapeForm = ({
     control,
     watch,
     refineCore: { onFinish },
+    formState,
+    setValue,
     handleSubmit,
   } = useForm<CreateRental>({
     defaultValues: {
@@ -309,6 +311,12 @@ const RentTapeForm = ({
     },
   });
 
+  useEffect(() => {
+    if (tapesIsSuccess) {
+      setValue("tape_id", tapeOptions?.[0]?.value);
+    }
+  }, [tapesIsSuccess]);
+
   const period = watch<"period">("period");
   const returnDate = dayjs().add(period, "day").format("DD.MM.YYYY");
   const price = NIGHTLY_RENTAL_FEE * period;
@@ -332,6 +340,7 @@ const RentTapeForm = ({
             <Controller
               control={control}
               name="tape_id"
+              rules={{ required: "Tape ID is required" }}
               render={({ field }) => (
                 <Select
                   width={"100%"}

examples/win95/src/utils/app-settings.ts

@@ -2,3 +2,6 @@ export const NIGHTLY_RENTAL_FEE = 5;
 export const NIGHTLY_LATE_RETURN_PENALTY = 10;
 export const MAXIMUM_TAPE_ALLOWED_TO_RENT = 4;
 export const DEPOSIT = 25;
+
+export const MINIMUM_APP_WIDTH = 1024;
+export const MINIMUM_APP_HEIGHT = 768;