chore: image widget styles

Author: juliantellez

packages/frontend/auth/src/Routes/Protected.tsx

@@ -1,21 +1,27 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 import { AuthContext } from '../AuthContext';
 
 interface ProtectedRouteProps {
   children: React.ReactNode;
 }
 
 export const ProtectedRoute: React.FC<ProtectedRouteProps> = (props) => {
-  const { isAuthenticated, isLoading, logIn } = React.useContext(AuthContext);
+  const { isAuthenticated, isLoading, logIn, logOut, isLoggedOut } = React.useContext(AuthContext);
+
+  useEffect(() => {
+    if(isLoading) {
+      return 
+    }
+
+    if(!isAuthenticated || isLoggedOut) {
+      logOut().then(logIn)
+    }
+
+  }, [isAuthenticated, isLoading, logIn, logOut, isLoggedOut])
 
   if (isLoading) {
     return <div>Loading User....</div>;
   }
 
-  if (!isAuthenticated && !isLoading) {
-    logIn();
-    return null;
-  }
-
   return <>{props.children}</>;
 };

packages/frontend/config/webpack/webpack.config.ts

@@ -15,17 +15,19 @@ interface Configuration extends WebpackConfiguration {
 
 const createConfig = ({
   dirname,
-  isProduction
-}: {dirname: string, isProduction: boolean}): Configuration => {
+  isProduction,
+  analyse
+}: {dirname: string, isProduction: boolean, analyse?: boolean}): Configuration => {
   const env = createWebpackEnv({
-    ANALYSE: false,
+    ANALYSE: analyse || false,
     NODE_ENV: isProduction ? "production" : "development"
   })
+
   const paths = createWebpackPaths(dirname)
   const plugins = createWebpackPlugins(env, paths)
 
   const config: Configuration = {
-    mode: isProduction ? 'production' : 'development',
+  mode: isProduction ? 'production' : 'development',
   entry: './src/index.tsx',
   output: {
     path: path.resolve(dirname, 'dist'),
@@ -44,17 +46,23 @@ const createConfig = ({
       {
         test: /\.scss$/,
         use: [
-          isProduction ? MiniCssExtractPlugin.loader : 'style-loader',
-          'css-loader',
+          MiniCssExtractPlugin.loader,
+          {
+            loader: 'css-loader',
+            options: { importLoaders: 1 }, // make imports go through postcss
+          },
           'postcss-loader',
           'sass-loader',
         ],
       },
       {
         test: /\.css$/,
         use: [
-          isProduction ? MiniCssExtractPlugin.loader : 'style-loader',
-          'css-loader',
+          MiniCssExtractPlugin.loader,
+          {
+            loader: 'css-loader',
+            options: { importLoaders: 1 }, // make imports go through postcss
+          },
           'postcss-loader',
         ],
       },
@@ -89,14 +97,12 @@ const createConfig = ({
   },
   }
 
-  if (isProduction) {
-    config.plugins?.push(
+  config.plugins?.push(
       new MiniCssExtractPlugin({
         filename: '[name].[contenthash].css',
 
       })
     );
-  }
 
   return config
 };

packages/frontend/ui/src/components/ImageUploader/Row.tsx

@@ -31,7 +31,7 @@ export function ItemRow({ item, onCancel }: { item: UploadItem; onCancel: () =>
   const humanEta = item.etaSec ? `${item.etaSec}s` : "";
 
   return (
-    <Card className="my-3">
+    <Card className="mb-2">
       <Flex align="center" gap="3">
         <img
           src={item.previewUrl}

packages/frontend/ui/src/components/ImageUploader/index.tsx

@@ -50,9 +50,9 @@ export function MaistroImageUploader({
             state: "QUEUED",
             progress: 0,
         });
-
-        setItems((prev) => [...next, ...prev]);
     }
+
+    setItems((prev) => [...next, ...prev]);
   }
 
   const handleUpload = async (id: string) => {
@@ -116,8 +116,9 @@ export function MaistroImageUploader({
         xhr.onload = async () => {
             if (xhr.status >= 200 && xhr.status < 300) {
                 // S3 usually returns 204 for successful POST
-                setItems((cur) => updateItem(cur, id, { state: "PROCESSING", progress: 100, xhr: undefined, s3Key }));
-                // 3) Manually trigger resize in your API
+                setItems((item) => updateItem(item, id, { state: "DONE", progress: 100, xhr: undefined, s3Key }));
+
+                // 3) Manually trigger resize
                 const reponse = await resizeImage({
                     url: `${apiBaseUrl}/resize`,
                     key: `${ownerType === "user" ? "users" : "businesses"}/${ownerId}/${response.ImageId}/original.bin`,
@@ -157,7 +158,9 @@ export function MaistroImageUploader({
     });
   };
 
-  const clearDone = () => setItems((cur) => cur.filter((x) => x.state !== "DONE" && x.state !== "CANCELED"));
+  const clearDone = () => {
+    setItems([]);
+  }
 
   const totalPct = React.useMemo(() => {
     if (items.length === 0) {
@@ -173,7 +176,6 @@ export function MaistroImageUploader({
     return Math.round(sum / active.length);
   }, [items]);
 
-  // TODO fix flow, resizing works but UI doesn't reflect it
   return (
     <Theme appearance="light" accentColor="crimson" grayColor="sand" radius="large" scaling="100%">
       <Card
@@ -193,7 +195,7 @@ export function MaistroImageUploader({
               <Button variant="solid" onClick={() => inputRef.current?.click()} style={{ background: "#FF3366" }}>
                 Seleccionar archivos
               </Button>
-              <Button variant="soft" onClick={startAll}>Subir & procesar</Button>
+              <Button variant="soft" onClick={startAll}>Subir</Button>
               <Button variant="ghost" onClick={clearDone}>Limpiar</Button>
             </Flex>
           </Flex>
@@ -224,8 +226,8 @@ export function MaistroImageUploader({
         </Box>
 
         <Flex className="py-6" direction="column">
-            {items.map((it) => (
-              <ItemRow key={it.id} item={it} onCancel={() => cancelItem(it.id)} />
+            {items.map((item, index) => (
+              <ItemRow key={`${item.id}-${index}`} item={item} onCancel={() => cancelItem(item.id)} />
             ))}
             {items.length === 0 && (
               <Text className="py-3" color="gray">No hay archivos aún. Usa “Seleccionar archivos” o arrastra aquí.</Text>

packages/frontend/ui/src/styles/global.css

@@ -1,5 +1,9 @@
 @import '@radix-ui/themes/styles.css';
 
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
 
 :root {
     --maistro-black: #000000;