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]
}
diff --git a/chore-no-more/src/App.css b/chore-no-more/src/App.css
index 0480aba..c2e5c4f 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,205 @@
#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: flex;
+
+
+ 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*/
+ padding: 0; /*adds spacing between content and border*/
+ margin: 20px; /*adds space outside the border*/
}
-#todo {
+.users-display {
+ position: relative;
+ right: 300px;
+ bottom: 470px;
+ display: flexbox;
+ overflow: scroll;
+ 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*/
+ margin: 20px; /*adds space outside the border*/
+}
+
+.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: 2px solid black;
+ z-index: 2;
+ padding-top: 10px;
+ padding-bottom: 10px;
}
-#list1 {
+.body {
+ padding: 10px;
+ margin-top: 40px;
+ display: grid;
position: absolute;
- top: 200px;
- left: 140px;
+ align-self: center;
+ width: 100%;
+ top: 10px;
+ bottom: 9%;
+ grid-template-columns: 1fr 1fr;
+ gap: 15px;
+ overflow: scroll;
+
+
}
-#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: 2px solid black;
+ padding-top: 10px;
+ padding-bottom: 10px;
position: absolute;
- top: 400px;
- left: 100px;
-}
\ No newline at end of file
+ bottom: 0px;
+
+
+}
+
+.divider {
+ width: 15px;
+ height: auto;
+ display: inline-block;
+}
+
+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-card {
+ width: 100%;
+ padding: 15px;
+ background: #fff;
+ box-sizing: border-box;
+ border-radius: 6px;
+ border: 1px solid black;
+ position: relative;
+}
+
+.chore-card .buttons {
+ text-align: center;
+}
+.chore-card i {
+ color: #bbb;
+ margin-left: 5px;
+ margin-right: 5px;
+ font-size: 1.2em;
+ padding: 5px;
+ 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 7c8aded..f091139 100644
--- a/chore-no-more/src/App.js
+++ b/chore-no-more/src/App.js
@@ -1,39 +1,21 @@
import './App.css';
import React from 'react';
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 { 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 ? (
- <>
-
-
-
-
-
- ) : (
-
- )}
-
-
How To Use
- Groups
- Calendar
) : (
How To Use
- Groups
- Calendar
)}
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 }
+
+
+
+
+ { props.children }
+
+
{chore.Chore}
-
+
- claim
- delete
+ Claim
+ Complete
)
}
- 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 9ca0cd7..ee3a08f 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,7 +15,10 @@ export function Chores({groupId}) {
const session = useSession();
const [ claimed, setClaimed ] = useState(false);
const [ deleted, setDeleted ] = useState(false);
+ const [buttonPopup, setButtonPopup] = useState(false);
const [username, setUserName] = useState();
+
+
useEffect(() => {
async function fetchChores(){
@@ -47,6 +51,7 @@ export function Chores({groupId}) {
}
getUsersName();
+
fetchChores();
setAddedChores(false);
setClaimed(false);
@@ -106,31 +111,39 @@ export function Chores({groupId}) {
{session.provider_token ?
:
- {groupId ?
-
-
Add a new chore
- setChoreName(e.target.value )} />
-
- :
}
-
+ {groupId ?
+ <>
+
+
+ {chores && (
+
+ {/* order-by buttons */}
+
+ {chores.map(chore => (
+
+ ))}
+
+
+ )}
+
+
:
}
}
-
- {groupId ?
- <>
Incomplete 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 a081609..5360c80 100644
--- a/chore-no-more/src/components/Groups.js
+++ b/chore-no-more/src/components/Groups.js
@@ -2,7 +2,9 @@ import React, { useState, useEffect } from 'react'
import { supabase } from '../supabaseClient';
import { useSession} from '@supabase/auth-helpers-react';
import { Chores } from './Chores';
-import Chorecard from './Chorecard';
+import AddPopup from './AddPopup';
+import LeavePopup from './LeavePopup';
+import ChangePopup from './ChangePopup';
export function Groups() {
@@ -16,8 +18,12 @@ 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);
+ const [addedMember, setAddedMemeber] = useState(false);
+
useEffect(() => {
async function getGroupId() {
@@ -63,11 +69,13 @@ export function Groups() {
setNameList(data)
}
}
- setChangedName(false);
+
+ setChangedName(false);
+ setAddedMemeber(false);
getGroupId();
displayMembers();
-
- }, [session, exist, changedName, groupId]);
+ }, [session, exist, changedName, groupId, addedMember]);
+
async function createGroup() {
const { error } = await supabase
@@ -104,7 +112,7 @@ export function Groups() {
if(error){
console.log(error);
} else {
- console.log("No error");
+ setAddedMemeber(true);
}
/*const {error2} = await supabase
.from('Groups')
@@ -164,25 +172,61 @@ 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)} />
-
-
+
+
+
+
+
+ {nameList.map(todo =>
{todo.Name}
)}
+
+
+
+
+
) : (
@@ -195,4 +239,4 @@ export function Groups() {
)}
);
-}
+}
\ 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 }
+
+
+
+
+ { props.children }
+
+
-
-
+
-
-
+
+
+
-
+
);
}
\ 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 (
+
+ );
+}
+
+export default SignUp;
diff --git a/chore-no-more/src/components/Stylesheet.js b/chore-no-more/src/components/Stylesheet.js
index 545ce67..4a54eb2 100644
--- a/chore-no-more/src/components/Stylesheet.js
+++ b/chore-no-more/src/components/Stylesheet.js
@@ -2,5 +2,5 @@ import React from 'react';
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
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..e0e894e
--- /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 ? (
+ <>
+
+
+
+
+ ) : (
+ <>
+
+
+ {/**/}
+
+ )}
+
+