Combine Spec-z Catalogs and Training Set Maker page

frontend/components/EmailField.js

@@ -0,0 +1,53 @@
+import React, { useState, useEffect } from 'react'
+import TextField from '@mui/material/TextField'
+import PropTypes from 'prop-types'
+
+function EmailField({ initialValue = '', onEmailChange, onClearForm }) {
+  const [email, setEmail] = useState(initialValue)
+  const [isValidEmail, setIsValidEmail] = useState(true)
+
+  const handleEmailChange = event => {
+    const newEmail = event.target.value
+    setEmail(newEmail)
+    onEmailChange(newEmail)
+  }
+
+  const handleBlur = () => {
+    if (email.trim() !== '') {
+      validateEmail(email)
+    }
+  }
+
+  const validateEmail = value => {
+    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/
+    const isValid = emailRegex.test(value)
+    setIsValidEmail(isValid)
+  }
+
+  useEffect(() => {
+    setEmail(initialValue)
+    setIsValidEmail(true)
+  }, [onClearForm, initialValue])
+
+  return (
+    <div>
+      <TextField
+        id="email"
+        variant="outlined"
+        value={email}
+        onChange={handleEmailChange}
+        onBlur={handleBlur}
+        error={!isValidEmail}
+        helperText={!isValidEmail ? 'Invalid email address' : ''}
+      />
+    </div>
+  )
+}
+
+EmailField.propTypes = {
+  initialValue: PropTypes.string,
+  onEmailChange: PropTypes.func,
+  onClearForm: PropTypes.func
+}
+
+export default EmailField

frontend/components/SearchRadius.js

@@ -0,0 +1,47 @@
+import React, { useState, useEffect } from 'react'
+import TextField from '@mui/material/TextField'
+import PropTypes from 'prop-types'
+
+const SearchRadius = ({ searchRadius, onChange, reset }) => {
+  const formatSearchRadius = value => {
+    if (/^\d+\.\d*$/.test(value)) {
+      return value
+    } else {
+      return value.replace(/[^\d.]/g, '')
+    }
+  }
+
+  const [localSearchRadius, setLocalSearchRadius] = useState(
+    formatSearchRadius(searchRadius)
+  )
+
+  useEffect(() => {
+    setLocalSearchRadius(formatSearchRadius(searchRadius))
+  }, [reset, searchRadius])
+
+  const handleRadiusChange = event => {
+    const inputValue = event.target.value
+
+    if (/^\d+(\.\d*)?$/.test(inputValue)) {
+      setLocalSearchRadius(inputValue)
+      onChange(event)
+    }
+  }
+
+  return (
+    <TextField
+      id="searchRadius"
+      variant="outlined"
+      value={localSearchRadius}
+      onChange={handleRadiusChange}
+    />
+  )
+}
+
+SearchRadius.propTypes = {
+  searchRadius: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+  onChange: PropTypes.func,
+  reset: PropTypes.bool
+}
+
+export default SearchRadius

frontend/components/SpeczData.js

@@ -1,3 +1,5 @@
+import * as React from 'react'
+import { getProducts } from '../services/product'
 import { DataGrid } from '@mui/x-data-grid'
 import moment from 'moment'
 import { Box } from '@mui/material'
@@ -30,13 +32,29 @@ const columns = [
   }
 ]
 
+async function fetchData(filters, query) {
+  try {
+    const response = await getProducts({
+      filters,
+      page: 0,
+      page_size: 25,
+      sort: [{ field: 'created_at', sort: 'desc' }],
+      search: query
+    })
+
+    return response.results
+  } catch (error) {
+    console.error(error)
+    throw error
+  }
+}
+
 function DataTable({ rows }) {
   return (
-    <Box style={{ height: 300, width: '100%' }}>
+    <Box sx={{ height: 300, width: '100%' }}>
       <DataGrid
         rows={rows}
         columns={columns}
-        // getRowId={row => row.id}
         pageSizeOptions={[5, 10]}
         checkboxSelection
       />
@@ -48,39 +66,33 @@ DataTable.propTypes = {
   rows: PropTypes.arrayOf(PropTypes.object).isRequired
 }
 
-const rows = [
-  {
-    id: 1,
-    display_name: 'Jandson 1',
-    uploaded_by: 'User1',
-    created_at: '2023-01-01'
-  },
-  {
-    id: 2,
-    display_name: 'Jandson 2',
-    uploaded_by: 'User2',
-    created_at: '2023-02-15'
-  },
-  {
-    id: 3,
-    display_name: 'Jandson 3',
-    uploaded_by: 'User3',
-    created_at: '2023-03-22'
-  },
-  {
-    id: 4,
-    display_name: 'Jandson V',
-    uploaded_by: 'User1',
-    created_at: '2023-04-10'
-  },
-  {
-    id: 5,
-    display_name: 'Jandson Try',
-    uploaded_by: 'User2',
-    created_at: '2023-05-05'
-  }
-]
+function DataTableWrapper({ filters, query }) {
+  const [rows, setRows] = React.useState([])
+
+  React.useEffect(() => {
+    const fetchAndSetData = async () => {
+      try {
+        const data = await fetchData(filters, query)
+        setRows(data)
+      } catch (error) {
+        console.error(error)
+      }
+    }
+
+    fetchAndSetData()
+  }, [filters, query])
 
-export default function App() {
   return <DataTable rows={rows} />
 }
+
+DataTableWrapper.propTypes = {
+  filters: PropTypes.object,
+  query: PropTypes.string
+}
+
+DataTableWrapper.defaultProps = {
+  filters: {},
+  query: ''
+}
+
+export default DataTableWrapper

frontend/components/TsmData.js

@@ -1,3 +1,5 @@
+import * as React from 'react'
+import { getProducts } from '../services/product'
 import { DataGrid } from '@mui/x-data-grid'
 import moment from 'moment'
 import { Box } from '@mui/material'
@@ -30,15 +32,27 @@ const columns = [
   }
 ]
 
+async function fetchData(filters, query) {
+  try {
+    const response = await getProducts({
+      filters,
+      page: 0,
+      page_size: 25,
+      sort: [{ field: 'created_at', sort: 'desc' }],
+      search: query
+    })
+
+    return response.results
+  } catch (error) {
+    console.error(error)
+    throw error
+  }
+}
+
 function DataTable({ rows }) {
   return (
-    <Box style={{ height: 300, width: '100%' }}>
-      <DataGrid
-        rows={rows}
-        columns={columns}
-        // getRowId={row => row.id}
-        pageSizeOptions={[5, 10]}
-      />
+    <Box sx={{ height: 300, width: '100%' }}>
+      <DataGrid rows={rows} columns={columns} pageSizeOptions={[5, 10]} />
     </Box>
   )
 }
@@ -47,39 +61,33 @@ DataTable.propTypes = {
   rows: PropTypes.arrayOf(PropTypes.object).isRequired
 }
 
-const rows = [
-  {
-    id: 1,
-    display_name: 'Jandson 1',
-    uploaded_by: 'User1',
-    created_at: '2023-01-01'
-  },
-  {
-    id: 2,
-    display_name: 'Jandson 2',
-    uploaded_by: 'User2',
-    created_at: '2023-02-15'
-  },
-  {
-    id: 3,
-    display_name: 'Jandson 3',
-    uploaded_by: 'User3',
-    created_at: '2023-03-22'
-  },
-  {
-    id: 4,
-    display_name: 'Jandson V',
-    uploaded_by: 'User1',
-    created_at: '2023-04-10'
-  },
-  {
-    id: 5,
-    display_name: 'Jandson Try',
-    uploaded_by: 'User2',
-    created_at: '2023-05-05'
-  }
-]
+function DataTableWrapper({ filters, query }) {
+  const [rows, setRows] = React.useState([])
+
+  React.useEffect(() => {
+    const fetchAndSetData = async () => {
+      try {
+        const data = await fetchData(filters, query)
+        setRows(data)
+      } catch (error) {
+        console.error(error)
+      }
+    }
+
+    fetchAndSetData()
+  }, [filters, query])
 
-export default function App() {
   return <DataTable rows={rows} />
 }
+
+DataTableWrapper.propTypes = {
+  filters: PropTypes.object,
+  query: PropTypes.string
+}
+
+DataTableWrapper.defaultProps = {
+  filters: {},
+  query: ''
+}
+
+export default DataTableWrapper