From 67f7a99a1c820c0ca7774db12e80141fea14abb1 Mon Sep 17 00:00:00 2001 From: gadhiaeesha Date: Wed, 10 May 2023 16:02:29 -0700 Subject: [PATCH 01/11] working on display --- chore-no-more/src/App.css | 231 +++++++++++++++++---- chore-no-more/src/App.js | 10 +- chore-no-more/src/Navbar.js | 4 - chore-no-more/src/components/Chorecard.js | 5 +- chore-no-more/src/components/Chores.js | 37 ++-- chore-no-more/src/components/Groups.js | 47 +++-- chore-no-more/src/components/SignIn.js | 15 +- chore-no-more/src/components/SignOut.js | 2 +- chore-no-more/src/components/Stylesheet.js | 4 +- chore-no-more/src/index.css | 91 +------- 10 files changed, 261 insertions(+), 185 deletions(-) diff --git a/chore-no-more/src/App.css b/chore-no-more/src/App.css index 0480aba..7f321d8 100644 --- a/chore-no-more/src/App.css +++ b/chore-no-more/src/App.css @@ -4,21 +4,6 @@ } -.App-header { - background-color: #383e49; - min-height: 100vh; - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - font-size: calc(10px + 2vmin); - color: rgb(224, 11, 11); -} - -.App-link { - color: #02141a; -} - .page-break { @@ -26,19 +11,10 @@ background-color: tan; width: 2px; top: 200px; - bottom: 200px; + bottom: 70px; left: 50%; } -.welcome { - color: black; -} - -.header { - background-color: tan; - font-weight: bold; -} - .create-account { background-color: tan; @@ -48,7 +24,7 @@ border-radius: 25px; border: 1px solid black; /*sets border thickness to 1 pixel, solid line, red*/ - height: 150px; /* height of box model is taller */ + height: 300px; /* height of box model is taller */ width: 300px; /* width is 300 pixels instead of spanning the entire line*/ padding: 20px; /*adds spacing between content and border*/ margin: 20px; /*adds space outside the border*/ @@ -64,7 +40,7 @@ border-radius: 25px; border: 1px solid black; /*sets border thickness to 1 pixel, solid line, red*/ - height: 150px; /* height of box model is taller */ + height: 300px; /* height of box model is taller */ width: 300px; /* width is 300 pixels instead of spanning the entire line*/ padding: 20px; /*adds spacing between content and border*/ margin: 20px; /*adds space outside the border*/ @@ -72,43 +48,208 @@ #create-account-button { position: absolute; - top: 360px; + top: 500px; left: 270px; } #sign-in-button { position: absolute; - top: 360px; + top: 500px; right: 290px; } -.button1 { +.gsign-in { background-color: lightgrey; position: absolute; + top: 80px; + right: 35px; +} + +#sign-out { + background-color: #333 !important; + color: white; + position: relative; + top: 20px; +} + +.chores-display { + position: relative; + left: 300px; top: 50px; - right: 20px; + + display: flexbox; + overflow: scroll; + border: 1px solid black; /*sets border thickness to 1 pixel, solid line, red*/ + height: 500px; /* height of box model is taller */ + width: 400px; /* width is 300 pixels instead of spanning the entire line*/ + padding: 0; /*adds spacing between content and border*/ + margin: 20px; /*adds space outside the border*/ +} + +.users-display { + position: relative; + right: 300px; + bottom: 470px; + display: flexbox; + overflow: scroll; + border: 1px solid black; /*sets border thickness to 1 pixel, solid line, red*/ + height: 300px; /* height of box model is taller */ + width: 500px; /* width is 300 pixels instead of spanning the entire line*/ + padding: 0; /*adds spacing between content and border*/ + margin: 20px; /*adds space outside the border*/ } -#todo { +.header { + flex-shrink: 0; + margin: 0; + width: 100%; + font-size: 50; + font-weight: bold; + justify-content: center; position: absolute; - top: 100px; - left: 130px; + top: 0px; + border-bottom: 1px solid black; + z-index: 2; + padding-top: 10px; + padding-bottom: 10px; } -#list1 { +.body { + padding-top: 20px; + margin-top: 40px; + display: grid; position: absolute; - top: 200px; - left: 140px; + width: 100%; + top: 10px; + bottom: 10%; + grid-template-columns: 1fr 1fr; + gap: 20px; + overflow: auto; + + + } -#list2 { + +.body2 { + padding-top: 40px; + margin-top: 40px; + display: list-item; position: absolute; - top: 470px; - left: 140px; -} + width: 100%; + top: 10px; + bottom: 10%; + grid-template-columns: 1fr 1fr; + gap: 20px; + overflow: auto; + + -#comp { +} +.footer { + flex-shrink: 0; + margin: 0; + width: 100%; + font-size: 50; + border-top: 1px solid black; + padding-top: 10px; + padding-bottom: 10px; position: absolute; - top: 400px; - left: 100px; -} \ No newline at end of file + bottom: 0px; + z-index: 2; + + +} + +.divider { + width: 15px; + height: auto; + display: inline-block; +} + +#addMember { + +} + +h1,h2,h3 { + margin: 0; +} + + +nav { + background: var(--primary); + padding: 10px 20px; + text-align: center; +} +nav a { + color: #f2f2f2; + margin: 10px; + display: inline-block; +} +nav h1 { + color: #fff; +} +.page { + max-width: 1200px; + margin: 20px auto; + padding: 20px; +} + + +/* smoothie grid */ +.chore-grid { + +} +.chore-card { + width: 100%; + padding: 10px; + background: #fff; + box-sizing: border-box; + border-radius: 6px; + position: relative; +} + +.chore-card .buttons { + text-align: center; +} +.chore-card i { + color: #bbb; + margin-left: 10px; + font-size: 1.2em; + padding: 6px; + background: #eee; + border-radius: 50%; + cursor: pointer; +} + +/* forms */ +form { + background: #fff; + padding: 20px; + max-width: 480px; + margin: 0 auto; + border-radius: 6px; +} +form input, form textarea { + display: block; + width: 100%; + padding: 6px; + box-sizing: border-box; + border: 1px solid #ccc; + margin: 10px 0 20px 0; +} +form button { + background: var(--primary); + color: #fff; + border: 0; + border-radius: 6px; + padding: 6px 8px; + font-family: "Poppins"; + cursor: pointer; +} + +:root { + --primary: #12bca2; + --secondary: #6d15df; +} + diff --git a/chore-no-more/src/App.js b/chore-no-more/src/App.js index 3d8183c..26264d2 100644 --- a/chore-no-more/src/App.js +++ b/chore-no-more/src/App.js @@ -1,9 +1,12 @@ import './App.css'; +import { Routes, Route, Link } from 'react-router-dom'; import { useSession, useSessionContext } from '@supabase/auth-helpers-react'; import { Groups } from './components/Groups'; import { SignIn } from './components/SignIn'; import { Stylesheet } from './components/Stylesheet' import Navbar from './Navbar' +import { GoogleSignIn } from './components/GoogleSignIn'; +import { Chores } from './components/Chores'; function App() { @@ -21,12 +24,15 @@ function App() { {session ? ( <> - +

) : ( + <> + + )} @@ -35,4 +41,4 @@ function App() { -export default App; \ No newline at end of file +export default App; diff --git a/chore-no-more/src/Navbar.js b/chore-no-more/src/Navbar.js index 660b0ce..428f9e2 100644 --- a/chore-no-more/src/Navbar.js +++ b/chore-no-more/src/Navbar.js @@ -12,15 +12,11 @@ export default function Navbar () { {session ? (
    How To Use - Groups - Calendar
) : (
    How To Use - Groups - Calendar
)} diff --git a/chore-no-more/src/components/Chorecard.js b/chore-no-more/src/components/Chorecard.js index 0a5102f..51a0a2f 100644 --- a/chore-no-more/src/components/Chorecard.js +++ b/chore-no-more/src/components/Chorecard.js @@ -5,7 +5,6 @@ import { useSession} from '@supabase/auth-helpers-react'; - const Chorecard = ({ chore, onDelete, onClaim}) => { const session = useSession(); @@ -42,7 +41,7 @@ const Chorecard = ({ chore, onDelete, onClaim}) => { return (

{chore.Chore}

-
User: {chore.Assignee}
+
User: {chore.Assignee}

claim delete @@ -51,4 +50,4 @@ const Chorecard = ({ chore, onDelete, onClaim}) => { ) } - export default Chorecard \ No newline at end of file + export default Chorecard diff --git a/chore-no-more/src/components/Chores.js b/chore-no-more/src/components/Chores.js index 4d6d8a4..43124c7 100644 --- a/chore-no-more/src/components/Chores.js +++ b/chore-no-more/src/components/Chores.js @@ -85,7 +85,7 @@ export function Chores({groupId}) { } const handleClaim = (id) => { - setDeleted(true) + setClaimed(true) } return ( @@ -98,25 +98,34 @@ export function Chores({groupId}) { setChoreName(e.target.value )} />
:

} - +
} {groupId ? - <>

Incomplete Chores

- {chores && ( -
- {/* order-by buttons */} -
- {chores.map(chore => ( - - ))} -
-
- )} + <> +
+
+

Chores

+
+ {chores && ( +
+ {/* order-by buttons */} +
+ {chores.map(chore => ( + + ))} +
+
+ )} +
+ +
+ +
:

}
); -} \ No newline at end of file +} diff --git a/chore-no-more/src/components/Groups.js b/chore-no-more/src/components/Groups.js index 816eb34..f582806 100644 --- a/chore-no-more/src/components/Groups.js +++ b/chore-no-more/src/components/Groups.js @@ -156,23 +156,27 @@ export function Groups() { {exist ? (
-

Your Household

-

{groupsName}

-

Members

- {nameList.map(todo =>
{todo.Name}
)} -

- -

Add Member to household by email

-
- setMember(e.target.value)} /> -
-
- -

Change Household Name

- setNewName(e.target.value)} /> -

- +
+
+

Your Household: {groupsName}

+

Members

+
+
+
+ + {nameList.map(todo =>
{todo.Name}
)} + +
+
+ +
+ +
+
+
+ +
) : (
@@ -186,3 +190,14 @@ export function Groups() {
); } + +/* +
+ setMember(e.target.value)} /> +
+
+ +

Change Household Name

+ setNewName(e.target.value)} /> +

+*/ \ No newline at end of file diff --git a/chore-no-more/src/components/SignIn.js b/chore-no-more/src/components/SignIn.js index 4dca2c9..d2581c5 100644 --- a/chore-no-more/src/components/SignIn.js +++ b/chore-no-more/src/components/SignIn.js @@ -1,6 +1,7 @@ import React from 'react'; import { supabase } from '../supabaseClient'; import { useState } from 'react'; +import '../App.css'; export function SignIn() { const [ email, setEmail ] = useState(''); @@ -39,16 +40,15 @@ export function SignIn() { return (
- Create Account

- Email:

+ Create Account

+ Email: setEmail(e.target.value)} /> -

+ Password:

setPassword(e.target.value)} /> -

Name:

supabaseSignUp()}>Create Account
- Sign In

+ Sign In



Email:

setEmail(e.target.value)} /> -

- Password:

+ + Password: setPassword(e.target.value)} /> -

diff --git a/chore-no-more/src/components/SignOut.js b/chore-no-more/src/components/SignOut.js index e71d51f..b5ac944 100644 --- a/chore-no-more/src/components/SignOut.js +++ b/chore-no-more/src/components/SignOut.js @@ -7,7 +7,7 @@ export function SignOut() { return (
-

+

); } \ No newline at end of file diff --git a/chore-no-more/src/components/Stylesheet.js b/chore-no-more/src/components/Stylesheet.js index 74cd6db..5417c1e 100644 --- a/chore-no-more/src/components/Stylesheet.js +++ b/chore-no-more/src/components/Stylesheet.js @@ -1,5 +1,5 @@ import '../App.css' export const Stylesheet = () => { - return

Welcome to ChoreNoMore!

-} + return

Welcome to ChoreNoMore!

+} \ No newline at end of file diff --git a/chore-no-more/src/index.css b/chore-no-more/src/index.css index e399a41..30eda9d 100644 --- a/chore-no-more/src/index.css +++ b/chore-no-more/src/index.css @@ -12,93 +12,4 @@ body { code { font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace; -} - -:root { - --primary: #12bca2; - --secondary: #6d15df; -} -h1,h2,h3 { - margin: 0; -} - -body { - margin: 0; - color: #333; - font-family: 'Poppins'; - background: #f2f2f2; -} -nav { - background: var(--primary); - padding: 10px 20px; - text-align: center; -} -nav a { - color: #f2f2f2; - margin: 10px; - display: inline-block; -} -nav h1 { - color: #fff; -} -.page { - max-width: 1200px; - margin: 20px auto; - padding: 20px; -} - -/* smoothie grid */ -.chore-grid { - margin-top: 40px; - display: grid; - grid-template-columns: 1fr 1fr 1fr; - gap: 40px; -} -.chore-card { - width: 100%; - padding: 10px; - background: #fff; - box-sizing: border-box; - border-radius: 6px; - position: relative; -} - -.chore-card .buttons { - text-align: right; -} -.chore-card i { - color: #bbb; - margin-left: 10px; - font-size: 1.2em; - padding: 6px; - background: #eee; - border-radius: 50%; - cursor: pointer; -} - -/* forms */ -form { - background: #fff; - padding: 20px; - max-width: 480px; - margin: 0 auto; - border-radius: 6px; -} -form input, form textarea { - display: block; - width: 100%; - padding: 6px; - box-sizing: border-box; - border: 1px solid #ccc; - margin: 10px 0 20px 0; -} -form button { - background: var(--primary); - color: #fff; - border: 0; - border-radius: 6px; - padding: 6px 8px; - font-family: "Poppins"; - cursor: pointer; -} - +} \ No newline at end of file From 5cfac2d91b1958a45577a321cd94fa81734b9147 Mon Sep 17 00:00:00 2001 From: gadhiaeesha Date: Wed, 10 May 2023 18:39:39 -0700 Subject: [PATCH 02/11] usability features --- chore-no-more/src/App.css | 33 +++++------ chore-no-more/src/components/AddPopup.js | 15 +++++ chore-no-more/src/components/ChangePopup.js | 15 +++++ chore-no-more/src/components/Chores.js | 63 +++++++++++---------- chore-no-more/src/components/Groups.js | 57 ++++++++++++++----- chore-no-more/src/components/LeavePopup.js | 15 +++++ chore-no-more/src/components/Popup.css | 28 +++++++++ chore-no-more/src/components/Popup.js | 15 +++++ 8 files changed, 175 insertions(+), 66 deletions(-) create mode 100644 chore-no-more/src/components/AddPopup.js create mode 100644 chore-no-more/src/components/ChangePopup.js create mode 100644 chore-no-more/src/components/LeavePopup.js create mode 100644 chore-no-more/src/components/Popup.css create mode 100644 chore-no-more/src/components/Popup.js diff --git a/chore-no-more/src/App.css b/chore-no-more/src/App.css index 7f321d8..ef8450b 100644 --- a/chore-no-more/src/App.css +++ b/chore-no-more/src/App.css @@ -78,10 +78,11 @@ top: 50px; display: flexbox; + overflow: scroll; - border: 1px solid black; /*sets border thickness to 1 pixel, solid line, red*/ + border: 5px solid black; /*sets border thickness to 1 pixel, solid line, red*/ height: 500px; /* height of box model is taller */ - width: 400px; /* width is 300 pixels instead of spanning the entire line*/ + width: 410px; /* width is 300 pixels instead of spanning the entire line*/ padding: 0; /*adds spacing between content and border*/ margin: 20px; /*adds space outside the border*/ } @@ -92,7 +93,7 @@ bottom: 470px; display: flexbox; overflow: scroll; - border: 1px solid black; /*sets border thickness to 1 pixel, solid line, red*/ + border: 5px solid black; /*sets border thickness to 1 pixel, solid line, red*/ height: 300px; /* height of box model is taller */ width: 500px; /* width is 300 pixels instead of spanning the entire line*/ padding: 0; /*adds spacing between content and border*/ @@ -108,7 +109,7 @@ justify-content: center; position: absolute; top: 0px; - border-bottom: 1px solid black; + border-bottom: 2px solid black; z-index: 2; padding-top: 10px; padding-bottom: 10px; @@ -116,18 +117,17 @@ } .body { - padding-top: 20px; + padding: 20px; margin-top: 40px; display: grid; position: absolute; - width: 100%; + align-self: center; + width: 90%; top: 10px; - bottom: 10%; + bottom: 9%; grid-template-columns: 1fr 1fr; - gap: 20px; + gap: 15px; overflow: auto; - - } @@ -151,12 +151,11 @@ margin: 0; width: 100%; font-size: 50; - border-top: 1px solid black; + border-top: 2px solid black; padding-top: 10px; padding-bottom: 10px; position: absolute; bottom: 0px; - z-index: 2; } @@ -167,10 +166,6 @@ display: inline-block; } -#addMember { - -} - h1,h2,h3 { margin: 0; } @@ -197,15 +192,13 @@ nav h1 { /* smoothie grid */ -.chore-grid { - -} .chore-card { width: 100%; - padding: 10px; + padding: 15px; background: #fff; box-sizing: border-box; border-radius: 6px; + border: 1px solid black; position: relative; } diff --git a/chore-no-more/src/components/AddPopup.js b/chore-no-more/src/components/AddPopup.js new file mode 100644 index 0000000..f7448d3 --- /dev/null +++ b/chore-no-more/src/components/AddPopup.js @@ -0,0 +1,15 @@ +import React from 'react' +import './Popup.css' + +function AddPopup(props) { + return (props.trigger) ? ( +
+
+ + { props.children } +
+
+ ) : ''; +} + +export default AddPopup \ No newline at end of file diff --git a/chore-no-more/src/components/ChangePopup.js b/chore-no-more/src/components/ChangePopup.js new file mode 100644 index 0000000..44808bc --- /dev/null +++ b/chore-no-more/src/components/ChangePopup.js @@ -0,0 +1,15 @@ +import React from 'react' +import './Popup.css' + +function ChangePopup(props) { + return (props.trigger) ? ( +
+
+ + { props.children } +
+
+ ) : ''; +} + +export default ChangePopup \ No newline at end of file diff --git a/chore-no-more/src/components/Chores.js b/chore-no-more/src/components/Chores.js index 43124c7..29e2dce 100644 --- a/chore-no-more/src/components/Chores.js +++ b/chore-no-more/src/components/Chores.js @@ -5,6 +5,7 @@ import { useSession } from '@supabase/auth-helpers-react'; import { TaskChores } from './TaskChores'; import { GoogleSignIn } from './GoogleSignIn'; import Chorecard from './Chorecard'; +import Popup from './Popup'; export function Chores({groupId}) { const [ chores, setChoresList ] = useState([]); @@ -14,6 +15,8 @@ export function Chores({groupId}) { const session = useSession(); const [ claimed, setClaimed ] = useState(false); const [ deleted, setDeleted ] = useState(false); + const [buttonPopup, setButtonPopup] = useState(false); + useEffect(() => { async function fetchChores(){ @@ -92,40 +95,38 @@ export function Chores({groupId}) {
{session.provider_token ? :
- {groupId ? -
-

Add a new chore

- setChoreName(e.target.value )} /> - -
:

} - + {groupId ? + <> +
+
+

Chores

+
+ {chores && ( +
+ {/* order-by buttons */} +
+ {chores.map(chore => ( + + ))} +
+
+ )} +
+ + +

Add a new chore


+ setChoreName(e.target.value )} /> + + +
+
:

}
} - - {groupId ? - <> -
-
-

Chores

-
- {chores && ( -
- {/* order-by buttons */} -
- {chores.map(chore => ( - - ))} -
-
- )} -
- -
- -
-
:

} -
); } diff --git a/chore-no-more/src/components/Groups.js b/chore-no-more/src/components/Groups.js index f582806..9e2738c 100644 --- a/chore-no-more/src/components/Groups.js +++ b/chore-no-more/src/components/Groups.js @@ -2,6 +2,9 @@ import { useState, useEffect } from 'react' import { supabase } from '../supabaseClient'; import { useSession} from '@supabase/auth-helpers-react'; import { Chores } from './Chores'; +import AddPopup from './AddPopup'; +import LeavePopup from './LeavePopup'; +import ChangePopup from './ChangePopup'; export function Groups() { @@ -15,6 +18,11 @@ export function Groups() { const [newName, setNewName] = useState(null); const [changedName, setChangedName] = useState(false); const [nameList, setNameList] = useState([]); + const [addPopup, setAddPopup] = useState(false); + const [leavePopup, setLeavePopup] = useState(false); + const [changePopup, setChangePopup] = useState(false); + + useEffect(() => { @@ -169,11 +177,41 @@ export function Groups() {
- + + +

Add a new member


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

Are you sure you want to leave this group?


+ + +
-
+
+ +

Enter New Household Name


+ setNewName(e.target.value)} /> + +
@@ -189,15 +227,4 @@ export function Groups() { )}
); -} - -/* -
- setMember(e.target.value)} /> -
-
- -

Change Household Name

- setNewName(e.target.value)} /> -

-*/ \ No newline at end of file +} \ No newline at end of file diff --git a/chore-no-more/src/components/LeavePopup.js b/chore-no-more/src/components/LeavePopup.js new file mode 100644 index 0000000..c4a8a37 --- /dev/null +++ b/chore-no-more/src/components/LeavePopup.js @@ -0,0 +1,15 @@ +import React from 'react' +import './Popup.css' + +function LeavePopup(props) { + return (props.trigger) ? ( +
+
+ + { props.children } +
+
+ ) : ''; +} + +export default LeavePopup \ No newline at end of file diff --git a/chore-no-more/src/components/Popup.css b/chore-no-more/src/components/Popup.css new file mode 100644 index 0000000..35f69b2 --- /dev/null +++ b/chore-no-more/src/components/Popup.css @@ -0,0 +1,28 @@ +.popup { + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100vh; + background-color: rgba(0, 0, 0, 0.2); + + display: flex; + justify-content: center; + align-items: center; + z-index: 2; +} + +.popup-inner { + position: relative; + padding: 32px; + width: 100%; + max-width: 640px; + background-color: #ffffff; + +} + +.popup-inner .close-btn { + position: absolute; + top: 16px; + right: 16px; +} \ No newline at end of file diff --git a/chore-no-more/src/components/Popup.js b/chore-no-more/src/components/Popup.js new file mode 100644 index 0000000..de5dcfb --- /dev/null +++ b/chore-no-more/src/components/Popup.js @@ -0,0 +1,15 @@ +import React from 'react' +import './Popup.css' + +function Popup(props) { + return (props.trigger) ? ( +
+
+ + { props.children } +
+
+ ) : ''; +} + +export default Popup \ No newline at end of file From 8acd49580b83e23c9f13b3e844e32ed6da8675e6 Mon Sep 17 00:00:00 2001 From: gadhiaeesha Date: Wed, 10 May 2023 20:18:18 -0700 Subject: [PATCH 03/11] usability --- chore-no-more/src/App.css | 26 +++++---- chore-no-more/src/App.js | 44 ++++---------- chore-no-more/src/components/GoogleSignIn.js | 2 +- chore-no-more/src/components/SignIn.js | 38 ++++-------- chore-no-more/src/components/SignUp.js | 61 ++++++++++++++++++++ chore-no-more/src/pages/ErrorPage.js | 8 +++ chore-no-more/src/pages/Login.js | 42 ++++++++++++++ 7 files changed, 147 insertions(+), 74 deletions(-) create mode 100644 chore-no-more/src/components/SignUp.js create mode 100644 chore-no-more/src/pages/ErrorPage.js create mode 100644 chore-no-more/src/pages/Login.js diff --git a/chore-no-more/src/App.css b/chore-no-more/src/App.css index ef8450b..c2e5c4f 100644 --- a/chore-no-more/src/App.css +++ b/chore-no-more/src/App.css @@ -77,9 +77,11 @@ left: 300px; top: 50px; - display: flexbox; + display: flex; - overflow: scroll; + + overflow-x: auto; + overflow: hidden; border: 5px solid black; /*sets border thickness to 1 pixel, solid line, red*/ height: 500px; /* height of box model is taller */ width: 410px; /* width is 300 pixels instead of spanning the entire line*/ @@ -117,17 +119,18 @@ } .body { - padding: 20px; + padding: 10px; margin-top: 40px; display: grid; position: absolute; align-self: center; - width: 90%; + width: 100%; top: 10px; bottom: 9%; grid-template-columns: 1fr 1fr; gap: 15px; - overflow: auto; + overflow: scroll; + } @@ -207,22 +210,23 @@ nav h1 { } .chore-card i { color: #bbb; - margin-left: 10px; + margin-left: 5px; + margin-right: 5px; font-size: 1.2em; - padding: 6px; + padding: 5px; background: #eee; border-radius: 50%; cursor: pointer; } /* forms */ -form { +/*form { background: #fff; padding: 20px; max-width: 480px; margin: 0 auto; border-radius: 6px; -} +}*/ form input, form textarea { display: block; width: 100%; @@ -230,7 +234,7 @@ form input, form textarea { box-sizing: border-box; border: 1px solid #ccc; margin: 10px 0 20px 0; -} +}/* form button { background: var(--primary); color: #fff; @@ -245,4 +249,4 @@ form button { --primary: #12bca2; --secondary: #6d15df; } - +*/ diff --git a/chore-no-more/src/App.js b/chore-no-more/src/App.js index 26264d2..1b082ca 100644 --- a/chore-no-more/src/App.js +++ b/chore-no-more/src/App.js @@ -1,44 +1,20 @@ import './App.css'; -import { Routes, Route, Link } from 'react-router-dom'; import { useSession, useSessionContext } from '@supabase/auth-helpers-react'; -import { Groups } from './components/Groups'; -import { SignIn } from './components/SignIn'; -import { Stylesheet } from './components/Stylesheet' -import Navbar from './Navbar' -import { GoogleSignIn } from './components/GoogleSignIn'; -import { Chores } from './components/Chores'; - +import { BrowserRouter as Router, Routes, Route } from 'react-router-dom' +import Login from './pages/Login'; +import ErrorPage from './pages/ErrorPage'; +import Instructions from './pages/HowToUse'; +import SignUp from './components/SignUp'; function App() { - const { isLoading } = useSessionContext(); - const session = useSession(); - - if (isLoading) { - return <>Loading... - } return ( -
- -
- {session ? ( - <> - - -

- - - ) : ( - <> - - - - )} -
-
+ + } /> + } /> + } /> + ); } - - export default App; diff --git a/chore-no-more/src/components/GoogleSignIn.js b/chore-no-more/src/components/GoogleSignIn.js index a71236e..208cc0f 100644 --- a/chore-no-more/src/components/GoogleSignIn.js +++ b/chore-no-more/src/components/GoogleSignIn.js @@ -18,7 +18,7 @@ export function GoogleSignIn() { return (
- +
); } \ No newline at end of file diff --git a/chore-no-more/src/components/SignIn.js b/chore-no-more/src/components/SignIn.js index d2581c5..7731781 100644 --- a/chore-no-more/src/components/SignIn.js +++ b/chore-no-more/src/components/SignIn.js @@ -38,39 +38,21 @@ export function SignIn() { } return ( -
-
- Create Account

- Email: - setEmail(e.target.value)} /> - - Password:

- setPassword(e.target.value)} - /> - Name:

- setName(e.target.value)} - /> -

- -
- +
- Sign In



- Email:

- setEmail(e.target.value)} /> - - Password: - Sign In



+ Email:

+ setEmail(e.target.value)} /> + + Password: + setPassword(e.target.value)} - /> + />
-
+ +
); } \ No newline at end of file diff --git a/chore-no-more/src/components/SignUp.js b/chore-no-more/src/components/SignUp.js new file mode 100644 index 0000000..c4c4e53 --- /dev/null +++ b/chore-no-more/src/components/SignUp.js @@ -0,0 +1,61 @@ +import React from 'react'; +import { useState } from 'react'; +import { supabase } from '../supabaseClient'; +import { useSession, useSessionContext } from '@supabase/auth-helpers-react'; +import { Stylesheet } from '../components/Stylesheet'; + +function SignUp() { + const [ email, setEmail ] = useState(''); + const [ password, setPassword ] = useState(''); + const [ name, setName ] = useState(''); + + async function supabaseSignUp() { + console.log(email, password); + const { errorSignUp } = await supabase.auth.signUp({ + email: email, + password: password, + }); + if(errorSignUp){ + alert("Error logging in with email with Supabase"); + console.log(errorSignUp); + } + const { error } = await supabase + .from('Users') + .insert({ Email: email, Name : name }) + if(error){ + alert("Failed to add to database"); + console.log(error); + } + + } + + return ( +
+
+ +
+ Create Account

+ Email:

+ setEmail(e.target.value)} /> + + Password:

+ setPassword(e.target.value)} + /> + + Name:
+ setName(e.target.value)} + /> +

+ {/* Back to Sign In*/} +
+ +
+
+ ); +} + +export default SignUp; diff --git a/chore-no-more/src/pages/ErrorPage.js b/chore-no-more/src/pages/ErrorPage.js new file mode 100644 index 0000000..181b74e --- /dev/null +++ b/chore-no-more/src/pages/ErrorPage.js @@ -0,0 +1,8 @@ +import React from 'react'; +import '../App.css'; + +function ErrorPage() { + return
ERROR! Page not found.
+} + +export default ErrorPage; diff --git a/chore-no-more/src/pages/Login.js b/chore-no-more/src/pages/Login.js new file mode 100644 index 0000000..2029ed3 --- /dev/null +++ b/chore-no-more/src/pages/Login.js @@ -0,0 +1,42 @@ +import React from 'react'; +import { useSession, useSessionContext } from '@supabase/auth-helpers-react'; +import { Groups } from '../components/Groups'; +import { SignIn } from '../components/SignIn'; +import { Chores } from '../components/Chores'; +import { Stylesheet } from '../components/Stylesheet' +import Navbar from '../Navbar' +import { GoogleSignIn } from '../components/GoogleSignIn'; +import SignUp from '../components/SignUp'; + +function Login(){ + + const { isLoading } = useSessionContext(); + const session = useSession(); + + if (isLoading) { + return <>Loading... + } + + return ( +
+ +
+ {session ? ( + <> + + + + + ) : ( + <> + + + + + )} +
+
+ ); +} + +export default Login; From 5348555d60046f493e884ae256f2a173f3b6217b Mon Sep 17 00:00:00 2001 From: FrankieVara Date: Thu, 11 May 2023 12:12:06 -0700 Subject: [PATCH 04/11] Added names to appear when claiming a chore --- chore-no-more/src/components/Chorecard.js | 4 ++-- chore-no-more/src/components/Chores.js | 17 ++++++++++++++++- 2 files changed, 18 insertions(+), 3 deletions(-) diff --git a/chore-no-more/src/components/Chorecard.js b/chore-no-more/src/components/Chorecard.js index 51a0a2f..f6db280 100644 --- a/chore-no-more/src/components/Chorecard.js +++ b/chore-no-more/src/components/Chorecard.js @@ -5,7 +5,7 @@ import { useSession} from '@supabase/auth-helpers-react'; -const Chorecard = ({ chore, onDelete, onClaim}) => { +const Chorecard = ({ chore, onDelete, onClaim, name}) => { const session = useSession(); @@ -27,7 +27,7 @@ const Chorecard = ({ chore, onDelete, onClaim}) => { console.log(session); const{error, data} = await supabase .from('Chores') - .update({Assignee : session.user.email}) + .update({Assignee : name}) .eq('id', chore.id) if(error){ console.log(error) diff --git a/chore-no-more/src/components/Chores.js b/chore-no-more/src/components/Chores.js index 29e2dce..a8b3ca5 100644 --- a/chore-no-more/src/components/Chores.js +++ b/chore-no-more/src/components/Chores.js @@ -16,6 +16,7 @@ export function Chores({groupId}) { const [ claimed, setClaimed ] = useState(false); const [ deleted, setDeleted ] = useState(false); const [buttonPopup, setButtonPopup] = useState(false); + const [username, setUserName] = useState(); useEffect(() => { @@ -35,6 +36,20 @@ export function Chores({groupId}) { setChoresLoaded(true); } } + + async function getUsersName(){ + const { data } = await supabase + .from('Users') + .select('Name') + .eq('Email', session.user.email); + if(data){ + var name = data[0]; + setUserName(name.Name); + // console.log(username) + } + } + + getUsersName(); fetchChores(); setAddedChores(false); @@ -106,7 +121,7 @@ export function Chores({groupId}) { {/* order-by buttons */}
{chores.map(chore => ( - + ))}
From 5d3b1f62cee3664f064c81f0640e5b3ed1da93f0 Mon Sep 17 00:00:00 2001 From: gadhiaeesha Date: Thu, 11 May 2023 16:12:36 -0700 Subject: [PATCH 05/11] add spaces between buttons --- chore-no-more/src/components/Chores.js | 1 + chore-no-more/src/components/Groups.js | 3 +++ 2 files changed, 4 insertions(+) diff --git a/chore-no-more/src/components/Chores.js b/chore-no-more/src/components/Chores.js index a8b3ca5..1d5bb81 100644 --- a/chore-no-more/src/components/Chores.js +++ b/chore-no-more/src/components/Chores.js @@ -131,6 +131,7 @@ export function Chores({groupId}) {

Add a new chore


setChoreName(e.target.value )} /> +
+
) From aedb3327a49f31864756816edc7e955fe27cb94e Mon Sep 17 00:00:00 2001 From: gadhiaeesha Date: Thu, 11 May 2023 16:16:35 -0700 Subject: [PATCH 07/11] editing buttons --- chore-no-more/src/components/Chorecard.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/chore-no-more/src/components/Chorecard.js b/chore-no-more/src/components/Chorecard.js index 39a3f52..d7fa402 100644 --- a/chore-no-more/src/components/Chorecard.js +++ b/chore-no-more/src/components/Chorecard.js @@ -43,7 +43,7 @@ const Chorecard = ({ chore, onDelete, onClaim, name}) => {

{chore.Chore}

User: {chore.Assignee}

- claim + Claim Complete
From 88489bd76569776546146df417926c37ff56bec5 Mon Sep 17 00:00:00 2001 From: Colin Smith Date: Thu, 11 May 2023 16:44:45 -0700 Subject: [PATCH 08/11] made it so group memebers display without reload, and you can change name more than once. --- chore-no-more/src/components/Groups.js | 9 +++++++-- 1 file changed, 7 insertions(+), 2 deletions(-) diff --git a/chore-no-more/src/components/Groups.js b/chore-no-more/src/components/Groups.js index eba6bed..fe2419d 100644 --- a/chore-no-more/src/components/Groups.js +++ b/chore-no-more/src/components/Groups.js @@ -21,6 +21,7 @@ export function Groups() { const [addPopup, setAddPopup] = useState(false); const [leavePopup, setLeavePopup] = useState(false); const [changePopup, setChangePopup] = useState(false); + const [addedMember, setAddedMemeber] = useState(false); @@ -67,10 +68,11 @@ export function Groups() { setNameList(data) } } - + setChangedName(false); + setAddedMemeber(false); getGroupId(); displayMembers(); - }, [session, exist, changedName, groupId]); + }, [session, exist, changedName, groupId, addedMember]); async function createGroup() { const { error } = await supabase @@ -107,6 +109,9 @@ export function Groups() { if(error){ console.log(error); } + else{ + setAddedMemeber(true); + } /*const {error2} = await supabase .from('Groups') */ From 1a3601e88dd6b4a865a459e7ee0d85591a94722c Mon Sep 17 00:00:00 2001 From: Colin Smith Date: Thu, 11 May 2023 18:33:33 -0700 Subject: [PATCH 09/11] fixing merge conflicts --- chore-no-more/src/components/Groups.js | 3 --- 1 file changed, 3 deletions(-) diff --git a/chore-no-more/src/components/Groups.js b/chore-no-more/src/components/Groups.js index 8386905..5360c80 100644 --- a/chore-no-more/src/components/Groups.js +++ b/chore-no-more/src/components/Groups.js @@ -112,9 +112,6 @@ export function Groups() { if(error){ console.log(error); } else { - console.log("No error"); - } - else{ setAddedMemeber(true); } /*const {error2} = await supabase From e4527133ce7af899b713526d48f0537e558fa8b6 Mon Sep 17 00:00:00 2001 From: Mikayla Billings-Alston Date: Fri, 12 May 2023 01:40:52 +0000 Subject: [PATCH 10/11] updated eslint rules to warnings from errors --- chore-no-more/.eslintrc.js | 3 +++ 1 file changed, 3 insertions(+) diff --git a/chore-no-more/.eslintrc.js b/chore-no-more/.eslintrc.js index 547b829..ec795bb 100644 --- a/chore-no-more/.eslintrc.js +++ b/chore-no-more/.eslintrc.js @@ -22,6 +22,9 @@ module.exports = { "rules": { "react/prop-types": "warn", "react/jsx-key": "warn", + "no-unused-vars": "warn", + "react/react-in-jsx-scope": "warn", + "react/no-unknown-property": "warn", "lcom/lcom4": "warn", "complexity": ["warn", 10] } From 4f5bb8daea87c82520806ba47812ed4ebf19301c Mon Sep 17 00:00:00 2001 From: Mikayla Date: Thu, 11 May 2023 18:58:18 -0700 Subject: [PATCH 11/11] removing google sign in option (for now) --- chore-no-more/src/pages/Login.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/chore-no-more/src/pages/Login.js b/chore-no-more/src/pages/Login.js index 2029ed3..e0e894e 100644 --- a/chore-no-more/src/pages/Login.js +++ b/chore-no-more/src/pages/Login.js @@ -5,7 +5,7 @@ import { SignIn } from '../components/SignIn'; import { Chores } from '../components/Chores'; import { Stylesheet } from '../components/Stylesheet' import Navbar from '../Navbar' -import { GoogleSignIn } from '../components/GoogleSignIn'; +//import { GoogleSignIn } from '../components/GoogleSignIn'; import SignUp from '../components/SignUp'; function Login(){ @@ -31,7 +31,7 @@ function Login(){ <> - + {/**/} )}