Resizing the image and the highlighter

.github/workflows/playwright.yml

@@ -0,0 +1,27 @@
+name: Playwright Tests
+on:
+  push:
+    branches: [ main, master ]
+  pull_request:
+    branches: [ main, master ]
+jobs:
+  test:
+    timeout-minutes: 60
+    runs-on: ubuntu-latest
+    steps:
+    - uses: actions/checkout@v4
+    - uses: actions/setup-node@v4
+      with:
+        node-version: lts/*
+    - name: Install dependencies
+      run: npm ci
+    - name: Install Playwright Browsers
+      run: npx playwright install --with-deps
+    - name: Run Playwright tests
+      run: npx playwright test
+    - uses: actions/upload-artifact@v4
+      if: always()
+      with:
+        name: playwright-report
+        path: playwright-report/
+        retention-days: 30

.gitignore

@@ -1,4 +1,4 @@
 .env
 node_modules
-.env
 node_modules/
+.DS_Store

__mocks__/mockSupabaseClient.js

@@ -0,0 +1,9 @@
+const from = jest.fn(() => ({
+    insert: jest.fn(() => ({
+      select: jest.fn(),
+    })),
+  }));
+
+  const supabase = { from };
+
+module.exports = supabase;

client/src/components/App.jsx

@@ -1,28 +1,28 @@
 // App.jsx
-import React, {useEffect} from 'react';
+import React, { useEffect } from 'react';
 import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
 import { Box, CssBaseline } from '@mui/material';
 import { ThemeProvider, styled } from '@mui/material/styles';
 import { gapi } from 'gapi-script';
 import Nav from './Nav';
 import Home from './Home';
 import Search from './Search';
-import ShowImages from './ShowImages';
 import Login from './Login';
 import SignUp from './SignUp';
 import About from './About';
 import Background from './Background';
 import SecretCloset from './SecretCloset';
-import MyCloset from './MyCloset'
+import Upload from './Upload';
 
 import customTheme from '../themes/customTheme';
 import backgroundImage from '../assets/images/background1.jpg';
 import { GoogleOAuthProvider } from '@react-oauth/google';
-import { GoogleLogin } from '@react-oauth/google';
+import { store } from '../store.js';
+import { Provider } from 'react-redux';
 
 const google_key = process.env.CLIENT_ID;
 
-const scope = ""; 
+const scope = '';
 const BackgroundBox = styled(Box)(({ theme }) => ({
   position: 'relative',
   minHeight: '100vh',
@@ -42,7 +42,6 @@ const BackgroundBox = styled(Box)(({ theme }) => ({
   },
 }));
 
-
 const ContentContainer = styled(Box)(({ theme }) => ({
   position: 'relative',
   zIndex: 1,
@@ -52,67 +51,63 @@ const ContentContainer = styled(Box)(({ theme }) => ({
 
 console.log('App.jsx is running');
 
-    <App />
-
+<App />;
 
 function App() {
-
-  console.log(google_key)
+  // to remove, why google oauth is here?
+  console.log(google_key);
   useEffect(() => {
-
-    function start(){
-        gapi.auth2.init({
-            client_id: '135318755257-cbm6k01p765cp64udecsj4vt7mghnc7s.apps.googleusercontent.com',
-            scope: '/login'
-        })
-
-        // gapi.client.init({
-        //     client_id: clientID,
-        //     scope: scope
-        // })
-    };
-
-    gapi.load('client:auth2', start)
-
-})
-const onSuccess = (res)=>{
-  console.log('successfully logged in')
-  navigate('/home');
-  //res.redirect('/home')
-}
-
-const onFailure = (res)=>{
-  console.log('fail', res)
-}
+    function start() {
+      gapi.auth2.init({
+        client_id:
+          '135318755257-cbm6k01p765cp64udecsj4vt7mghnc7s.apps.googleusercontent.com',
+        scope: '/login',
+      });
+
+      // gapi.client.init({
+      //     client_id: clientID,
+      //     scope: scope
+      // })
+    }
+
+    gapi.load('client:auth2', start);
+  });
+  const onSuccess = (res) => {
+    console.log('successfully logged in');
+    navigate('/home');
+    //res.redirect('/home')
+  };
+
+  const onFailure = (res) => {
+    console.log('fail', res);
+  };
 
   return (
-  <GoogleOAuthProvider clientId= {google_key} >
-
-    <ThemeProvider theme={customTheme}>
-      <CssBaseline />
-      <Router>
-        <Background />
-        <ContentContainer>
-          <Nav />
-          <Routes>
-            <Route path="/" element={<Home />} />
-            <Route path="/search" element={<Search />} />
-            <Route path="/login" element={<Login />} />
-            <Route path="/signUp" element={<SignUp />} />
-            <Route path="/about" element={<About />} />
-            <Route path="/secretCloset" element={<SecretCloset />} />
-
-
-          </Routes>
-        </ContentContainer>
-      </Router>
-    </ThemeProvider>
-
-</GoogleOAuthProvider>
+    <Provider store={store}>
+      <GoogleOAuthProvider clientId={google_key}>
+        <ThemeProvider theme={customTheme}>
+          <CssBaseline />
+          <Router>
+            <Background />
+            <ContentContainer>
+              <Nav />
+              <Routes>
+                <Route path="/" element={<Home />} />
+                <Route path="/search" element={<Search />} />
+                <Route path="/login" element={<Login />} />
+                <Route path="/signUp" element={<SignUp />} />
+                <Route path="/about" element={<About />} />
+                <Route path="/secretCloset" element={<SecretCloset />} />
+                <Route path="/upload" element={<Upload />} />
+              </Routes>
+            </ContentContainer>
+          </Router>
+        </ThemeProvider>
+      </GoogleOAuthProvider>
+    </Provider>
   );
 }
 
-
 export default App;
 
-//  <Route path="/myCloset" element={<MyCloset />} />
+//  <Route path="/myCloset" element={<MyCloset />} />

client/src/components/ImageForm.jsx

@@ -0,0 +1,45 @@
+// ImageForm.jsx
+
+import React, { useState } from 'react';
+import CircularProgress from '@mui/material/CircularProgress';
+import TextField from '@mui/material/TextField';
+import Button from '@mui/material/Button';
+import { useDispatch, useSelector } from 'react-redux';
+import { describe, } from '../slices/promptSlice'
+
+function ImageForm({ onImageGenerated, handleSubmit, imageUpload, errors, setErrors  }) {
+  const itemDescription = useSelector(store => store.prompt.itemDescription);
+  const [loading, setLoading] = useState(false);
+
+
+  const dispatch = useDispatch();
+
+
+
+  return (
+    <form onSubmit={handleSubmit}>
+      <TextField
+        id='item_description_text_box'
+        // defaultValue="hi"
+        label='Item description'
+        value={itemDescription}
+        onChange={(e) => dispatch(describe(e.target.value))}
+        error={errors.itemDescription}
+        multiline
+        helperText={errors.itemDescription ? 'Item description is required' : 'Describe the clothes in detail: color, style, features, etc.'}
+        rows = {5}
+      />
+      <br />
+      <br />
+      <Button variant='contained' type='submit'>
+        Generate Image
+      </Button>
+      {imageUpload != undefined && <p>Uploaded image ready.</p>}
+      <br />
+      <br />
+      {loading && <CircularProgress />}
+    </form>
+  );
+}
+
+export default ImageForm;