diff --git a/package-lock.json b/package-lock.json index 71fed2b..cb5d0ac 100644 --- a/package-lock.json +++ b/package-lock.json @@ -8,7 +8,8 @@ "dependencies": { "@emotion/react": "^11.13.3", "@emotion/styled": "^11.13.0", - "@mui/material": "^6.0.2", + "@mui/icons-material": "^6.1.2", + "@mui/material": "^6.1.2", "@the-collab-lab/shopping-list-utils": "^2.2.0", "firebase": "^10.12.5", "react": "^18.3.1", @@ -3323,24 +3324,49 @@ } }, "node_modules/@mui/core-downloads-tracker": { - "version": "6.0.2", - "resolved": "https://registry.npmjs.org/@mui/core-downloads-tracker/-/core-downloads-tracker-6.0.2.tgz", - "integrity": "sha512-Cg68oOlAfbJgMgvbCwcX3Y3HdygCl6X1nREYTdEWcEKUQhNarrC45Cc35mP+zA7p3ZXE/7FLiaTCCgwuSoef/Q==", + "version": "6.1.2", + "resolved": "https://registry.npmjs.org/@mui/core-downloads-tracker/-/core-downloads-tracker-6.1.2.tgz", + "integrity": "sha512-1oE4U38/TtzLWRYWEm/m70dUbpcvBx0QvDVg6NtpOmSNQC1Mbx0X/rNvYDdZnn8DIsAiVQ+SZ3am6doSswUQ4g==", "funding": { "type": "opencollective", "url": "https://opencollective.com/mui-org" } }, + "node_modules/@mui/icons-material": { + "version": "6.1.2", + "resolved": "https://registry.npmjs.org/@mui/icons-material/-/icons-material-6.1.2.tgz", + "integrity": "sha512-7NNcjW5JoT9jHagrVbARA1o41vQY2xezDamtke+mEKKZmsJyejfRBOacSrPDfjZQ//lyhIjNKyzAwisxYJR47w==", + "dependencies": { + "@babel/runtime": "^7.25.6" + }, + "engines": { + "node": ">=14.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/mui-org" + }, + "peerDependencies": { + "@mui/material": "^6.1.2", + "@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0", + "react": "^17.0.0 || ^18.0.0 || ^19.0.0" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + } + } + }, "node_modules/@mui/material": { - "version": "6.0.2", - "resolved": "https://registry.npmjs.org/@mui/material/-/material-6.0.2.tgz", - "integrity": "sha512-KrnkJFSyhsAh8V30DNUbWyRyxMi4ZHjFg1ikQGx+mUAIffFTYIEx9Q+Kxd3vCT0FUFGOmbsuh6F6yRhpybsjkg==", - "dependencies": { - "@babel/runtime": "^7.25.0", - "@mui/core-downloads-tracker": "^6.0.2", - "@mui/system": "^6.0.2", - "@mui/types": "^7.2.16", - "@mui/utils": "^6.0.2", + "version": "6.1.2", + "resolved": "https://registry.npmjs.org/@mui/material/-/material-6.1.2.tgz", + "integrity": "sha512-5TtHeAVX9D5d2LYfB1GAUn29BcVETVsrQ76Dwb2SpAfQGW3JVy4deJCAd0RrIkI3eEUrsl0E4xuBdreszxdTTg==", + "dependencies": { + "@babel/runtime": "^7.25.6", + "@mui/core-downloads-tracker": "^6.1.2", + "@mui/system": "^6.1.2", + "@mui/types": "^7.2.17", + "@mui/utils": "^6.1.2", "@popperjs/core": "^2.11.8", "@types/react-transition-group": "^4.4.11", "clsx": "^2.1.1", @@ -3359,7 +3385,7 @@ "peerDependencies": { "@emotion/react": "^11.5.0", "@emotion/styled": "^11.3.0", - "@mui/material-pigment-css": "^6.0.2", + "@mui/material-pigment-css": "^6.1.2", "@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0", "react": "^17.0.0 || ^18.0.0 || ^19.0.0", "react-dom": "^17.0.0 || ^18.0.0 || ^19.0.0" @@ -3385,12 +3411,12 @@ "integrity": "sha512-/LLMVyas0ljjAtoYiPqYiL8VWXzUUdThrmU5+n20DZv+a+ClRoevUzw5JxU+Ieh5/c87ytoTBV9G1FiKfNJdmg==" }, "node_modules/@mui/private-theming": { - "version": "6.0.2", - "resolved": "https://registry.npmjs.org/@mui/private-theming/-/private-theming-6.0.2.tgz", - "integrity": "sha512-emddFcRhA0hPGVIwIbW5g0V8vtCgw2g/H/A7jTdGe7dpCWEPpp6jPIXRRKcEUWgmg91R6rBNfV+LFHxBxmZXOQ==", + "version": "6.1.2", + "resolved": "https://registry.npmjs.org/@mui/private-theming/-/private-theming-6.1.2.tgz", + "integrity": "sha512-S8WcjZdNdi++8UhrrY8Lton5h/suRiQexvdTfdcPAlbajlvgM+kx+uJstuVIEyTb3gMkxzIZep87knZ0tqcR0g==", "dependencies": { - "@babel/runtime": "^7.25.0", - "@mui/utils": "^6.0.2", + "@babel/runtime": "^7.25.6", + "@mui/utils": "^6.1.2", "prop-types": "^15.8.1" }, "engines": { @@ -3411,12 +3437,13 @@ } }, "node_modules/@mui/styled-engine": { - "version": "6.0.2", - "resolved": "https://registry.npmjs.org/@mui/styled-engine/-/styled-engine-6.0.2.tgz", - "integrity": "sha512-qd3Vlhted0SYVGotnCfVNcxff7vW2WN0fclbAexff60NeNS1qs/H/CImHEHUBiUGeNWMPRochbN6VF1arQ7/jA==", + "version": "6.1.2", + "resolved": "https://registry.npmjs.org/@mui/styled-engine/-/styled-engine-6.1.2.tgz", + "integrity": "sha512-uKOfWkR23X39xj7th2nyTcCHqInTAXtUnqD3T5qRVdJcOPvu1rlgTleTwJC/FJvWZJBU6ieuTWDhbcx5SNViHQ==", "dependencies": { - "@babel/runtime": "^7.25.0", + "@babel/runtime": "^7.25.6", "@emotion/cache": "^11.13.1", + "@emotion/sheet": "^1.4.0", "csstype": "^3.1.3", "prop-types": "^15.8.1" }, @@ -3442,15 +3469,15 @@ } }, "node_modules/@mui/system": { - "version": "6.0.2", - "resolved": "https://registry.npmjs.org/@mui/system/-/system-6.0.2.tgz", - "integrity": "sha512-AZv1/C4PuHgWFTA8YraIzl3FTVLdRz0RIMRwEADWZBdIhnuTHS/4+r8qE9+3CcpTHg1WsEu8btaO3AhQahSM9A==", - "dependencies": { - "@babel/runtime": "^7.25.0", - "@mui/private-theming": "^6.0.2", - "@mui/styled-engine": "^6.0.2", - "@mui/types": "^7.2.16", - "@mui/utils": "^6.0.2", + "version": "6.1.2", + "resolved": "https://registry.npmjs.org/@mui/system/-/system-6.1.2.tgz", + "integrity": "sha512-mzW7F1ZMIYS1aLON48Nrk9c65OrVEVQ+R4lUcTWs1lCSul0VGK23eo4dmY0NX5PS7Oe4xz3P5B9tQZZ7SYgxcg==", + "dependencies": { + "@babel/runtime": "^7.25.6", + "@mui/private-theming": "^6.1.2", + "@mui/styled-engine": "^6.1.2", + "@mui/types": "^7.2.17", + "@mui/utils": "^6.1.2", "clsx": "^2.1.1", "csstype": "^3.1.3", "prop-types": "^15.8.1" @@ -3481,9 +3508,9 @@ } }, "node_modules/@mui/types": { - "version": "7.2.16", - "resolved": "https://registry.npmjs.org/@mui/types/-/types-7.2.16.tgz", - "integrity": "sha512-qI8TV3M7ShITEEc8Ih15A2vLzZGLhD+/UPNwck/hcls2gwg7dyRjNGXcQYHKLB5Q7PuTRfrTkAoPa2VV1s67Ag==", + "version": "7.2.17", + "resolved": "https://registry.npmjs.org/@mui/types/-/types-7.2.17.tgz", + "integrity": "sha512-oyumoJgB6jDV8JFzRqjBo2daUuHpzDjoO/e3IrRhhHo/FxJlaVhET6mcNrKHUq2E+R+q3ql0qAtvQ4rfWHhAeQ==", "peerDependencies": { "@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0" }, @@ -3494,13 +3521,13 @@ } }, "node_modules/@mui/utils": { - "version": "6.0.2", - "resolved": "https://registry.npmjs.org/@mui/utils/-/utils-6.0.2.tgz", - "integrity": "sha512-TeFrYsxcmeoDSlkoPhX+LjIuuqC5Pyj+xz2kRceKCkUpwMNTEeVOfowXDPe+mboZwmpJ5ZxP4eiAgQMdeEasjg==", + "version": "6.1.2", + "resolved": "https://registry.npmjs.org/@mui/utils/-/utils-6.1.2.tgz", + "integrity": "sha512-6+B1YZ8cCBWD1fc3RjqpclF9UA0MLUiuXhyCO+XowD/Z2ku5IlxeEhHHlgglyBWFGMu4kib4YU3CDsG5/zVjJQ==", "dependencies": { - "@babel/runtime": "^7.25.0", - "@mui/types": "^7.2.16", - "@types/prop-types": "^15.7.12", + "@babel/runtime": "^7.25.6", + "@mui/types": "^7.2.17", + "@types/prop-types": "^15.7.13", "clsx": "^2.1.1", "prop-types": "^15.8.1", "react-is": "^18.3.1" @@ -4439,9 +4466,9 @@ "integrity": "sha512-dISoDXWWQwUquiKsyZ4Ng+HX2KsPL7LyHKHQwgGFEA3IaKac4Obd+h2a/a6waisAoepJlBcx9paWqjA8/HVjCw==" }, "node_modules/@types/prop-types": { - "version": "15.7.12", - "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.12.tgz", - "integrity": "sha512-5zvhXYtRNRluoE/jAp4GVsSduVUzNWKkOZrCDBWYtE7biZywwdC2AcEzg+cSMLFRfVgeAFqpfNabiPjxFddV1Q==" + "version": "15.7.13", + "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.13.tgz", + "integrity": "sha512-hCZTSvwbzWGvhqxp/RqVqwU999pBf2vp7hzIjiYOsl8wqOmUxkQ6ddw1cV3l8811+kdUFus/q4d1Y3E3SyEifA==" }, "node_modules/@types/react": { "version": "18.3.5", diff --git a/package.json b/package.json index 7abfcae..53876da 100644 --- a/package.json +++ b/package.json @@ -9,7 +9,8 @@ "dependencies": { "@emotion/react": "^11.13.3", "@emotion/styled": "^11.13.0", - "@mui/material": "^6.0.2", + "@mui/icons-material": "^6.1.2", + "@mui/material": "^6.1.2", "@the-collab-lab/shopping-list-utils": "^2.2.0", "firebase": "^10.12.5", "react": "^18.3.1", diff --git a/src/App.jsx b/src/App.jsx index 1bbed6a..f404fc6 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -1,6 +1,6 @@ import { BrowserRouter as Router, Routes, Route } from 'react-router-dom'; -import { Home, Layout, List, ManageList } from './views'; +import { Home, Layout, List, ManageList, ShareList } from './views'; import { useAuth, useShoppingListData, useShoppingLists } from './api'; @@ -68,6 +68,10 @@ export function App() { path="/manage-list" element={} /> + } + /> diff --git a/src/components/ShareListComponent.jsx b/src/components/ShareListComponent.jsx new file mode 100644 index 0000000..eee587b --- /dev/null +++ b/src/components/ShareListComponent.jsx @@ -0,0 +1,20 @@ +import './SingleList.css'; +import { useNavigate } from 'react-router-dom'; +import ShareIcon from '@mui/icons-material/Share'; + +export function ShareListComponent({ path, setListPath }) { + const navigate = useNavigate(); + + function handleClick() { + setListPath(path); + navigate('/share-list'); + } + + return ( + <> + + + ); +} diff --git a/src/components/index.js b/src/components/index.js index 561a06a..08414dd 100644 --- a/src/components/index.js +++ b/src/components/index.js @@ -1,2 +1,3 @@ export * from './ListItem'; export * from './SingleList'; +export * from './ShareListComponent'; diff --git a/src/views/Home.jsx b/src/views/Home.jsx index 2cf82d2..bd77866 100644 --- a/src/views/Home.jsx +++ b/src/views/Home.jsx @@ -1,9 +1,11 @@ import './Home.css'; -import { SingleList } from '../components'; +import { SingleList, ShareListComponent } from '../components'; import { createList, useAuth, deleteList } from '../api'; import { Fragment, useState, useEffect } from 'react'; import { useNavigate } from 'react-router-dom'; import { useVoiceToText } from '../utils'; +import DeleteIcon from '@mui/icons-material/Delete'; +import KeyboardVoiceIcon from '@mui/icons-material/KeyboardVoice'; export function Home({ data, setListPath, setAllLists }) { const [listName, setListName] = useState(''); @@ -57,9 +59,6 @@ export function Home({ data, setListPath, setAllLists }) { return (
-

- Hello from the home (/) page! -

- + setListName(e.target.value)} />

{error}

diff --git a/src/views/ManageList.jsx b/src/views/ManageList.jsx index 29f8aff..1652624 100644 --- a/src/views/ManageList.jsx +++ b/src/views/ManageList.jsx @@ -1,15 +1,14 @@ import { useState, useEffect } from 'react'; -import { addItem, shareList } from '../api'; +import { addItem } from '../api'; import { useVoiceToText } from '../utils'; +import KeyboardVoiceIcon from '@mui/icons-material/KeyboardVoice'; -export function ManageList({ userId, list }) { +export function ManageList({ list }) { const [formData, setFormData] = useState({ name: '', frequency: '', }); - const [email, setEmail] = useState(''); - const { text, isListening, startListening } = useVoiceToText(); useEffect(() => { @@ -25,10 +24,6 @@ export function ManageList({ userId, list }) { [e.target.name]: e.target.value, })); } - function handleEmailChange(e) { - e.preventDefault(); - setEmail(e.target.value); - } function handleSubmit(e) { e.preventDefault(); @@ -91,15 +86,15 @@ export function ManageList({ userId, list }) { }); } - async function handleEmailSubmit(e) { - e.preventDefault(); - const listPath = localStorage.getItem('tcl-shopping-list-path'); - try { - const result = await shareList(listPath, userId, email); - window.alert(result.response); - setEmail(''); - } catch (error) {} - } + // async function handleEmailSubmit(e) { + // e.preventDefault(); + // const listPath = localStorage.getItem('tcl-shopping-list-path'); + // try { + // const result = await shareList(listPath, userId, email); + // window.alert(result.response); + // setEmail(''); + // } catch (error) {} + // } function handleVoiceTransform() { if (!isListening) { @@ -109,15 +104,12 @@ export function ManageList({ userId, list }) { return ( <> -

- Hello from the /manage-list page! -

-


@@ -152,20 +144,6 @@ export function ManageList({ userId, list }) { - -
- - - - -
); diff --git a/src/views/ShareList.jsx b/src/views/ShareList.jsx new file mode 100644 index 0000000..f1a5eee --- /dev/null +++ b/src/views/ShareList.jsx @@ -0,0 +1,47 @@ +import { useState } from 'react'; +import { shareList } from '../api'; + +export function ShareList({ userId }) { + // const [formData, setFormData] = useState({ + // name: '', + // frequency: '', + // }); + + const [email, setEmail] = useState(''); + + function handleEmailChange(e) { + e.preventDefault(); + setEmail(e.target.value); + } + + async function handleEmailSubmit(e) { + e.preventDefault(); + const listPath = localStorage.getItem('tcl-shopping-list-path'); + try { + const result = await shareList(listPath, userId, email); + window.alert(result.response); + setEmail(''); + } catch (error) {} + } + + return ( + <> +
+
+ + + + +
+
+ + ); +} diff --git a/src/views/index.js b/src/views/index.js index 9f10e56..eb99635 100644 --- a/src/views/index.js +++ b/src/views/index.js @@ -2,3 +2,4 @@ export * from './ManageList'; export * from './Home'; export * from './Layout'; export * from './List'; +export * from './ShareList';