Merge pull request #26 from nandcoder/ekta

ui + form update

Author: Ekkri

src/components/Card.js

@@ -1,14 +1,12 @@
 import { Link } from 'react-router-dom';
 import Button from 'react-bootstrap/Button';
 import Card from 'react-bootstrap/Card';
-// import { TextsmsTwoTone } from '@mui/icons-material';
 
-function BasicExample({ head, text, link, imgUrl }) {
+function BasicExample({ head, text,textColor, link, imgUrl }) {
   return (
-    <Card style={{ width: '18rem', height: '12rem', background: `url(${imgUrl})`, backgroundPosition: 'center center', backgroundSize: 'cover', backgroundRepeat: 'no-repeat' }}>
-      {/* <Card.Img variant="top" src={imgUrl} /> */}
+    <Card text={textColor} style={{ width: '18rem', height: '12rem',border: 'solid #c6c6c6 5px',borderRadius:'20px', background: `url(${imgUrl})`, backgroundPosition: 'center center', backgroundSize: 'cover', backgroundRepeat: 'no-repeat' }}>
       <Card.Body>
-        <Card.Title style={{ fontWeight: 'bolder', fontSize: '30px' }}>{head}</Card.Title>
+        <Card.Title style={{ fontWeight: 'bolder', fontSize: '30px',color:'black' }}>{head}</Card.Title>
         <Card.Text style={{
           float: "right",
           fontWeight: "500",

src/pages/Home/Sections/AddGroup.js

@@ -123,7 +123,18 @@ const AddGroup = (props) => {
                         </FormErrorMessage>
                     </FormControl>
 
-
+                    <FormControl marginTop="2" isInvalid={errors.days}>
+                            <FormLabel htmlFor="days">Days</FormLabel>
+                            <Input
+                                type="number"
+                                name="days"
+                                placeholder="Number of days of the trip"
+                                {...register("days")}
+                            />
+                            <FormErrorMessage>
+                                {errors.days && errors.days.message}
+                            </FormErrorMessage>
+                        </FormControl>
 
                     <FormControl mt="2" isInvalid={errors.involved}>
                         <FormLabel htmlFor="involved">Add members to the group</FormLabel>

src/pages/Home/index.js

@@ -5,88 +5,20 @@ import AddGroup from "./Sections/AddGroup";
 import GroupCard from "./Sections/GroupCard";
 import { db } from "../../utils/firebase";
 import { AuthContext } from "../../components/Authentication/AuthProvider";
+import { DataContext } from "../../components/Authentication/DataProvider";
 import AddButton from "../../components/AddButton";
 import Loader from "../../components/Loader";
 import img1 from "../../assets/images/i5.jpeg"
 import img2 from "../../assets/images/p3.jpeg"
 import img3 from "../../assets/images/t3.jpeg"
-// export const DataContext = createContext();
-// export const DataProvider = ({ children }) => {
-//     const { user } = useContext(AuthContext);
-//     const [currentGroup, setCurrentGroup] = useState('');
-//     const [transactions, setTransactions] = useState([]);
-//     const [users, setUsers] = useState({});
-//     const [friends, setFriends] = useState([]);
-//     useEffect(() => {
-//         const temp = [];
-//         const tempFriends = []
-//         db.collection("transactions")
-//             .where("involved", "array-contains", user.uid)
-//             .get()
-//             .then((querySnapshot) => {
-//                 querySnapshot.forEach((doc) => {
-//                     // console.log(doc.id, " => ", doc.data());
-//                     const id = doc.id;
-//                     const data = doc.data();
-//                     const finalTransaction = {
-//                         id,
-//                         data,
-//                     }
-//                     data.involved.forEach(personId => {
-//                         if (tempFriends.includes(personId)) { }
-//                         else tempFriends.push(personId)
-//                     });
-//                     temp.push(finalTransaction);
-//                 })
-//             })
-//             .catch((error) => {
-//                 console.log("Error getting documents: ", error);
-//             })
-//             .finally(() => {
-//                 setFriends(tempFriends);
-//                 setTransactions(temp);
-//             });
-
-
-//     }, [user]);
-//     useEffect(() => {
-//         const temp = {}
-//         if (friends.length) db.collection("users")
-//             .where("userId", "in", friends)
-//             .get()
-//             .then((querySnapshot) => {
-//                 querySnapshot.forEach((doc) => {
-//                     // doc.data() is never undefined for query doc snapshots
-//                     // console.log(doc.id, " => ", doc.data());
-//                     const data = doc.data();
-//                     const dataWithAmt = { ...data, amount: 0 };
-//                     temp[data.userId] = dataWithAmt;
-//                     // setUsers((prevUsers) => {
-//                     //     return { ...prevUsers, [id]: dataWithAmt, }
-//                     // })
-//                 });
-//             })
-//             .catch((error) => {
-//                 console.log("Error getting documents: ", error);
-//             })
-//             .finally(() => {
-//                 setUsers(temp)
-//                 // setLoading(false)
-//             })
-//     }, [friends]);
-
-//     return (
-//         <DataContext.Provider value={{ transactions, setTransactions, users, setUsers, currentGroup, setCurrentGroup }} >
-//             {children}
-//         </DataContext.Provider>
-//     )
-// }
 
 const colorss = ["#B794F4", "#c5fb9d", "#f5a9b8", "#faf089", "#90D2DA", "#FEB2B2", "#FBD38D", "#DA90CB", "#DB90CB"]
 
 const Home = () => {
     const { user } = useContext(AuthContext);
+    const { transactions}=useContext(DataContext);
     const [groups, setGroups] = useState([]);
+    const [amount,setAmount]=useState({total:0,iOwe:0,peopleOwe:0})
     const [loading, setLoading] = useState(true);
     const [show, setShow] = useState(false);
     const handleClose = () => setShow(false);
@@ -113,6 +45,26 @@ const Home = () => {
 
     }, [user]);
 
+useEffect(()=>{
+    let total=0,negative=0,positive=0;
+    transactions.forEach((transaction)=>{
+        const amt=transaction.data.amount/transaction.data.involved.length
+        if(transaction.data.paidBy===user.uid){
+            positive+=amt
+            total+=amt
+        }else{
+            negative-=amt
+            total+=amt
+        }
+    })
+    const updatedAmount={
+        total:total,
+        iOwe:negative,
+        peopleOwe:positive,
+    }
+    setAmount(updatedAmount)
+},[transactions,user])
+
     // const [spent, setSpent] = useState(0);
     // const [remain, setRemain] = useState(0);
     // const spentLink = "/";
@@ -125,21 +77,24 @@ const Home = () => {
                     className="fbcard"
                     imgUrl={img3}
                     head="Total Expenditure"
-                    text="₹ 10000"
+                    text={`₹ ${amount.total}`}
+                    textColor={'info'}
                     link="/transaction"
                 />
                 <Card
                     className="fbcard"
                     imgUrl={img2}
                     head="I OWE PEOPLE"
-                    text="₹ 3000"
+                    text={`₹ ${amount.iOwe}`}
+                    textColor={'danger'}
                     link="/transaction"
                 />
                 <Card
                     className="fbcard"
                     imgUrl={img1}
                     head="PEOPLE OWE ME"
-                    text="₹ 800"
+                    text={`₹ ${amount.peopleOwe}`}
+                    textColor={'success'}
                     link="/user"
                 />
             </Container>

src/utils/validator/addGroupResolver.js

@@ -42,6 +42,23 @@ const addGroupSchema = Joi.object({
             });
             return errors;
         }),
+        days: Joi.number()
+        .positive()
+        .integer()
+        .required()
+        .error((errors) => {
+            errors.forEach((err) => {
+                if (err.code === "number.positive") {
+                    err.message = "Days must be positive"
+                }
+                else if (err.code === "number.base") {
+                    err.message = "Days must be an integer"
+                }
+                else if (err.code === "number.empty") {
+                    err.message = "Days is required"
+                }
+            })
+        }),
     mails: Joi.array()
         .items(Joi.string())
         .unique()