diff --git a/client/package-lock.json b/client/package-lock.json index 4b20b58..c2535e7 100644 --- a/client/package-lock.json +++ b/client/package-lock.json @@ -8926,27 +8926,6 @@ "url": "https://github.com/chalk/strip-ansi?sponsor=1" } }, - "node_modules/ws": { - "version": "8.17.1", - "resolved": "https://registry.npmjs.org/ws/-/ws-8.17.1.tgz", - "integrity": "sha512-6XQFvXTkbfUOZOKKILFG1PDK2NDQs4azKQl26T0YS5CxqWLgXajbPZ+h4gZekJyRqFU8pvnbAbbs/3TgRPy+GQ==", - "license": "MIT", - "engines": { - "node": ">=10.0.0" - }, - "peerDependencies": { - "bufferutil": "^4.0.1", - "utf-8-validate": ">=5.0.2" - }, - "peerDependenciesMeta": { - "bufferutil": { - "optional": true - }, - "utf-8-validate": { - "optional": true - } - } - }, "node_modules/ws": { "version": "8.17.1", "resolved": "https://registry.npmjs.org/ws/-/ws-8.17.1.tgz", diff --git a/client/src/components/Buyer/Signup.jsx b/client/src/components/Buyer/Signup.jsx index ce78633..50f84a4 100644 --- a/client/src/components/Buyer/Signup.jsx +++ b/client/src/components/Buyer/Signup.jsx @@ -82,7 +82,7 @@ export default function Signup() {

Already have an account?{' '} navigate('/login')} className={styles.a1}>Login

- Are you a Farmer?{' '} + Signup as a Farmer{' '} navigate('/fsignup')} className={styles.a1}>Click Here

diff --git a/client/src/components/Buyer/signup.module.css b/client/src/components/Buyer/signup.module.css index 285362f..91b7c7d 100644 --- a/client/src/components/Buyer/signup.module.css +++ b/client/src/components/Buyer/signup.module.css @@ -96,6 +96,7 @@ select>option{ color: black; } .p1{ + margin-bottom:40px; font-size: 18px; font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif; } @@ -115,8 +116,7 @@ select>option{ text-decoration: underline; display: flex; gap: 10px; - position: relative; - left: 2vw; + padding-left: 30px; } .google>button>span{ font-size: 20px; @@ -183,4 +183,18 @@ select>option{ color: black; background-color: transparent; } - +.bt1:hover{ + scale:1.04 +} +.email>.bt1{ + display: flex; + border: none; + padding-left: 60px; + gap: 13px; + font-size: 22px; +} +.span{ + position: relative; + bottom: 6px; + text-decoration:underline; +} \ No newline at end of file diff --git a/client/src/components/Farmer/FDashboard.jsx b/client/src/components/Farmer/FDashboard.jsx index c16598b..b758157 100644 --- a/client/src/components/Farmer/FDashboard.jsx +++ b/client/src/components/Farmer/FDashboard.jsx @@ -1,5 +1,8 @@ import styles from './FDashboard.module.css'; -import { useState } from 'react'; +import { useState, useEffect } from 'react'; +import { collection, getDocs } from 'firebase/firestore'; +import { db } from '../../../firebase'; // Import your firebase configuration + function Searchsvg() { return ( @@ -76,24 +79,29 @@ function Search() { ); } -function Box({ showSecondaryBox }) { + + + + + +function Box({ data, showSecondaryBox }) { return (
-

Name : Arvind Kumar

-

Crop : Rice

-

Quantity required : 100kg

-

Mobile No : 1234567890

-

State : Karnataka

+

Name: {data.name}

+

Crop: {data.crop}

+

Quantity required: {data.quantity}

+

Mobile No: {data.mobile}

+

State: {data.state}

- +
) } -function Secondarybox({ hideSecondaryBox }) { +function Secondarybox({ data, hideSecondaryBox }) { return (

Details:

@@ -101,17 +109,17 @@ function Secondarybox({ hideSecondaryBox }) {
-

Name : Arvind Kumar

-

Crop : Rice

-

Quantity : 100kg

-

Language Known : Kannada, Hindi, English

-

Mobile : 1234567890

-

E-mail : arvind@gmail.com

-

Address : 23, Jayanagar, Bengaluru

-

City : Bengaluru

-

District : Bengaluru

-

State : Karnataka

-

Pincode : 560078

+

Name: {data.name}

+

Crop: {data.crop}

+

Quantity: {data.quantity}

+

Language Known: {data.languages}

+

Mobile: {data.mobile}

+

E-mail: {data.email}

+

Address: {data.address}

+

City: {data.city}

+

District: {data.district}

+

State: {data.state}

+

Pincode: {data.pincode}

@@ -122,23 +130,41 @@ function Secondarybox({ hideSecondaryBox }) { function MainBox() { const [showBox, setShowBox] = useState(false); + const [selectedData, setSelectedData] = useState(null); + const [dealers, setDealers] = useState([]); + + useEffect(() => { + const fetchDealers = async () => { + const dealersCollection = collection(db, ''); // enter ur collection name inside the quotes' + const dealersSnapshot = await getDocs(farmerdataCollection);//here too + const dealersList = dealersSnapshot.docs.map(doc => doc.data()); + setDealers(dealersList); + }; + + fetchDealers(); + }, []); - const showSecondaryBox = () => setShowBox(true); + const showSecondaryBox = (data) => { + setSelectedData(data); + setShowBox(true); + }; + + const hideSecondaryBox = () => setShowBox(false); return (

DEALERS

- - - - - + {dealers.map((dealer, index) => ( + + ))}
- {showBox &&
- -
} + {showBox && selectedData && ( +
+ +
+ )}
) } diff --git a/client/src/components/Farmer/FELogin.jsx b/client/src/components/Farmer/FELogin.jsx new file mode 100644 index 0000000..b7c8946 --- /dev/null +++ b/client/src/components/Farmer/FELogin.jsx @@ -0,0 +1,77 @@ +import { useState } from 'react'; +import { getAuth, signInWithEmailAndPassword } from 'firebase/auth'; +import { app } from '../../../firebase'; +import { useNavigate } from 'react-router-dom'; +import styles from '../Buyer/signup.module.css'; // Import the CSS Module +import Navi from '../Buyer/Navi' +import { toast, ToastContainer } from 'react-toastify'; +import img from '../../assets/bgimg.jpeg'; + +const auth = getAuth(app); + +const FELogin = () => { + const [email, setemail] = useState(''); + const [password, setpass] = useState(''); + const navigate = useNavigate(); + + const signinUser = async (e) => { + e.preventDefault(); + try { + await signInWithEmailAndPassword(auth, email, password).then(() => { + toast.success('Welcome'); + navigate('/farmerdashboard'); + }); + } catch (error) { + // Handle errors here + toast.error('Error Loging in:', error); + } + }; + + + + return ( + <> +
+
+ +
+
+
+
+
+

Login

+
+
+ setemail(e.target.value)} + value={email} + className={styles.i1} + /> + setpass(e.target.value)} + value={password} + className={styles.i1} + /> +
+ +
+

+ Don't have an account?{' '} + navigate('/farmersignup')} className={styles.a1}>Register +

+
+
+
+
+
+ +
+ + ); +}; + +export default FELogin; diff --git a/client/src/components/Farmer/FESignup.jsx b/client/src/components/Farmer/FESignup.jsx new file mode 100644 index 0000000..39c958e --- /dev/null +++ b/client/src/components/Farmer/FESignup.jsx @@ -0,0 +1,96 @@ +import { useState } from 'react'; +import { auth } from '../../../firebase'; +import { Navigate, useNavigate } from 'react-router-dom'; +import Navi from '../Buyer/Navi' +import styles from '../Buyer/signup.module.css'; // Import the CSS Module +import { FcGoogle } from "react-icons/fc"; +import { toast, ToastContainer } from 'react-toastify'; +import img from '../../assets/bgimg.jpeg'; +import { + createUserWithEmailAndPassword, + GoogleAuthProvider, + signInWithPopup, +} from 'firebase/auth'; + + +const googleProvider = new GoogleAuthProvider(); + +export default function FESignup() { + const [email, setemail] = useState(''); + const [password, setpass] = useState(''); + const navigate = useNavigate(); + + const signupWithGoogle = () => { + signInWithPopup(auth, googleProvider).then((e) => { + toast.success('Welcome') + navigate('/profilesetup'); + }); + }; + + const create = async (e) => { + e.preventDefault(); + try { + await createUserWithEmailAndPassword(auth, email, password).then(() => { + toast.success('Welcome'); + navigate('/buyer'); + const user = auth.currentUser; + console.log(user); + }); + } catch (error) { + toast.error('Error signing in:', error); + } + }; + + + return ( +
+
+ +
+
+ +
+
+
+
+

Create Account

+
+
+ setemail(e.target.value)} + value={email} + className={styles.i1} + /> + setpass(e.target.value)} + value={password} + className={styles.i1} + /> +
+ +
+
+ +
+

+ Already have an account?{' '} + navigate('/farmerlogin')} className={styles.a1}>Login

+ Signup With Phone Number{' '} + navigate('/fsignup')} className={styles.a1}>Click Here +

+
+
+
+
+
+ +
+ ); +} diff --git a/client/src/components/Farmer/FSignup.jsx b/client/src/components/Farmer/FSignup.jsx index 4e9cbbe..56cd8d6 100644 --- a/client/src/components/Farmer/FSignup.jsx +++ b/client/src/components/Farmer/FSignup.jsx @@ -2,6 +2,7 @@ import { useState } from 'react'; import 'react-phone-number-input/style.css'; import PhoneInput from 'react-phone-number-input'; import { toast, ToastContainer } from 'react-toastify'; +import { SiGmail } from "react-icons/si"; import { getAuth, signInWithPhoneNumber, @@ -101,10 +102,18 @@ const FSignup = () => {
+
+
+ +
+

Already have an account?{' '} navigate('/FLogin')} className={styles.a1}>Login

- Are you a Buyer?{' '} + Login as a Buyer{' '} navigate('/signup')} className={styles.a1}>Click Here

diff --git a/client/src/components/LandingPage/AgriConnect.jsx b/client/src/components/LandingPage/AgriConnect.jsx deleted file mode 100644 index fa028d7..0000000 --- a/client/src/components/LandingPage/AgriConnect.jsx +++ /dev/null @@ -1,163 +0,0 @@ -// import 'bootstrap/dist/css/bootstrap.min.css'; -import './Landing.css' -import img from '../../assets/buyerPic2.jpeg' -import img1 from '../../assets/farmerPic.jpeg' -import img2 from '../../assets/handshake3.svg' -import img3 from '../../assets/reshot-icon-laptop.svg' -import img4 from '../../assets/reshot-icon-envelope.svg' -import img5 from '../../assets/reshot-icon-calendar.svg' -import img6 from '../../assets/etoe.svg' -import { useNavigate } from 'react-router-dom'; - - - -const AgriConnect = () => { - const navigate = useNavigate(); - const handleNavigation = () => { - // navigate(`/login/${userType}`); - // if(userType === 'farmer') - // toast.error('Processing...') - // else - // { - navigate(`/signup`) - // } - }; - - - return ( - <> - - -
-
- - -
-
-
-
-
-
-
-
Secure Income, Grow with Confidence
-

Connect directly with reliable buyers, negotiate contracts, and ensure timely payments.

-

Signup|Login as farmer

-
-
-
-
- -
-
-
-
-
-
-
-
-
-
-
Source Quality Produce, Hassle-Free
-

Find trusted farmers, negotiate prices, and secure your supply chain with ease.

-

Signup|Login as buyer

-
-
-
-
- -
-
-
-
-
-
- - -
- -
-

Why Choose AgriConnect?

-
-
- Guaranteed Market Access -

Guaranteed Market Access

-

Connect with verified buyers and secure a steady market for your produce.

-
-
- Transparent Negotiation -

Transparent Negotiation

-

Discuss terms in real-time and reach agreements with ease.

-
-
- Secure Contracts -

Secure Contracts

-

Legal assurance with securely stored contracts.

-
-
- Timely Payments -

Timely Payments

-

Get paid on time, every time with our integrated payment system.

-
-
- End-to-End Support -

End-to-End Support

-

From initial contact to final delivery, we ensure smooth transactions.

-
-
-
- -
-

How AgriConnect Works: A Simple 3-Step Process

-
    -
  1. Sign Up & Create Your Profile: Farmers and buyers can easily sign up and create a profile tailored to their needs.
  2. -
  3. Connect & Negotiate: Use our platform to discover potential partners and establish secure contracts.
  4. -
  5. Deliver & Get Paid: Farmers deliver the produce as per the contract and receive timely payments.
  6. -
-
- -
-

Join a Growing Community of Successful Farmers and Buyers

-
- - - - ); -}; - -export default AgriConnect; diff --git a/client/src/components/LandingPage/Footer.jsx b/client/src/components/LandingPage/Footer.jsx index 2708ebf..db8ddae 100644 --- a/client/src/components/LandingPage/Footer.jsx +++ b/client/src/components/LandingPage/Footer.jsx @@ -1,4 +1,5 @@ -// import './Landing.css' +import React from 'react' +import '../App.css' export default function Footer() { return ( diff --git a/client/src/components/LandingPage/trail.css b/client/src/components/LandingPage/trail.css new file mode 100644 index 0000000..afa4a18 --- /dev/null +++ b/client/src/components/LandingPage/trail.css @@ -0,0 +1,613 @@ +body { + font-family: 'Teko', sans-serif; + margin: 0; + padding: 0; +} +.navbar { + display: flex; + justify-content: space-between; + align-items: center; + padding: 10px 20px; + height: 13vh; + background-color: rgb(228, 226, 226); + border-radius: 20px; +} +.navbar-logo { + display: flex; + align-items: center; + color: black; + font-size: x-large; + +} + +.navbar-menu { + position: relative; + display: inline-block; + +} +.navbar-menu button { + background-color: #f9f9f9; + color: black; + padding: 10px 20px; + border: none; + cursor: pointer; + border-radius: 17px; + +} + +.navbar-menu-content { + display: none; + position: absolute; + right: 0; + background-color: #f9f9f9; + box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); + z-index: 1; +} +.navbar-menu-content a { + color: black; + padding: 12px 16px; + text-decoration: none; + display: block; +} +.navbar-menu-content a:hover { + background-color: #ddd; +} +.navbar-menu:hover .navbar-menu-content { + display: block; +} + +.right img { + height: 330px; + width: 350px; + border-radius: 20%; + padding-left: 10px; + +} +.right{ + padding-top: 103px; + + height: 400px; + width: 50%; + +} +.left h5{ + font-size: 40px; + margin-bottom: 5%; +} +.left p{ + font-size: 35px; + margin: 0%; + padding: 0%; +} +.left{ + padding-top: 50px; + height: 400px; + width: 50%; + font-size: 35px; + text-transform: uppercase; + padding-left: 20px; + + color: #262626; + +} +.signup-button { + width: 100px; + padding: 10px; + background-color: #4CAF50; + color: white; + border: none; + border-radius: 5px; + text-align: center; + cursor: pointer; + font-size: 16px; +} +.signup-button:hover { + background-color: #45a049; +} +.section-1{ + + display: flex; + justify-content: flex-start; +} + + +.right img { + height: 330px; + width: 440px; + border-radius: 50px; + padding-left: 0px; + + +} +.right{ + padding-top: 61px; + height: 400px; + width: 50%; + padding-left:30px; +} +.left h5{ + font-size: 40px; + margin-bottom: 5%; +} +.section-2{ + padding-top:10%; + +} +.left p{ + font-size: 35px; + margin: 0%; + padding: 0%; +} +.left{ + padding-top: 50px; + height: 400px; + width: 65%; + font-size: 35px; + text-transform: uppercase; + padding-left: 20px; + + color: #262626; + +} +.signup-button { + width: 100px; + padding: 10px; + background-color: #4CAF50; + color: white; + border: none; + border-radius: 5px; + text-align: center; + cursor: pointer; + font-size: 16px; +} +.signup-button:hover { + background-color: #45a049; +} +.section-1{ + + display: flex; + justify-content: flex-start; + margin-left:110px; +} + + +.left2 img{ + border: 2px solid black; + border-radius:50px; + height: 330px; + width: 440px; + +} + +.right2{ + + height: 400px; + width: 50%; + font-size: 35px; + text-transform: uppercase; + padding-left: 150px; + + color: #262626; +} + +.right2 h5{ + font-size: 40px; + margin-bottom: 5%; +} +.right2 p{ + font-size: 35px; + margin: 0%; + padding: 0%; +} + +.section-2{ + display:flex; + justify-content: flex-start; +} + +.left2{ + padding-left: 130px; +} + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +body { + font-family: 'Teko', sans-serif; +} + +.navbar-nav a { + font-size: 15px; + text-transform: uppercase; + font-weight: 500; +} + +.navbar-light .navbar-brand { + color: #000; + font-size: 25px; + text-transform: uppercase; + font-weight: bold; + letter-spacing: 2px; +} + +.navbar-brand span { + color: green; +} + +.navbar-light .navbar-brand:focus, .navbar-light .navbar-brand:hover { + color: #000; +} + +.navbar-light .navbar-nav .nav-link { + color: #000; +} + +.navbar-light .navbar-nav .nav-link:focus, .navbar-light .navbar-nav .nav-link:hover { + color: #fff; +} + +.w-100 { + height: 100vh; +} + +.navbar-toggler { + padding: 1px 5px; + font-size: 18px; + line-height: 0.3; + background: #fff; +} + +.navbar-toggler-icon { + background: green; +} + +.navbar-light .navbar-toggler { + color: #FFF; + border-color: transparent; + background: green; +} + +.dropdown-menu { + background-color: #f9f9f9; + border: 1px solid #ddd; +} + +.dropdown-item { + color: #333; + font-family: "Poppins", sans-serif; +} + +.dropdown-item:hover, +.dropdown-item:focus { + background-color: #ff9900; + color: #fff; +} + +.carousel-item { + height: 100vh; + min-height: 300px; + background-color: #f7f5eb; +} + +.carousel-caption { + bottom: 0; + z-index: 2; + text-align: left; +} + +.carousel-caption h5 { + font-size: 45px; + text-transform: uppercase; + letter-spacing: 2px; + margin-top: 25px; + color: #262626; +} + +.carousel-caption p { + font-size: 18px; + line-height: 1.9; + color: #262626; +} + +.banner-info .btn { + padding: 10px 60px; + font-size: 30px; + text-transform: uppercase; + color: #ffff; + background: green; +} + +.banner-info { + padding-top: 25%; +} + +.imgBox img { + width: 650px; +} + +.carousel-control-prev-icon, .carousel-control-next-icon { + height: 80px; + width: 80px; + outline: black; + background-size: 100%, 100%; + border-radius: 50%; + background-image: none; + color: #fff; + background: green; +} + +.carousel-control-next-icon:after { + content: '->'; + font-size: 55px; + color: #fff; +} + +.carousel-control-prev-icon:after { + content: '<-'; + font-size: 55px; + color: #fff; +} + +.carousel-indicators [data-bs-target] { + background-color: green; +} + +@media only screen and (min-width: 768px) and (max-width: 991px) { + .navbar-nav { + text-align: center; + } + + .navbar-collapse { + background: green; + } + + .carousel-caption { + bottom: 370px; + } + + .carousel-caption p { + width: 100%; + } + + .navbar-collapse .nav-link { + color: #fff !important; + } + + .carousel-caption { + bottom: 0; + text-align: center; + } +} + +@media only screen and (max-width: 767px) { + .navbar-nav { + text-align: center; + } + + .navbar-collapse { + background: green; + } + + .navbar-collapse .nav-link { + color: #fff !important; + } + + .carousel-caption { + bottom: 0; + text-align: center; + } + + .carousel-caption h5 { + font-size: 17px; + } + + .carousel-caption p { + width: 100%; + line-height: 1.6; + font-size: 12px; + } + + .banner-info .btn { + padding: 0 15px; + font-size: 20px; + } + + .imgBox .img-fluid { + max-width: 80%; + height: auto; + } + + .carousel-control-prev-icon, .carousel-control-next-icon { + height: 50px; + width: 50px; + } + + .carousel-control-next-icon:after { + font-size: 30px; + } + + .carousel-control-prev-icon:after { + font-size: 30px; + } +} + +.imgBox { + position: relative; + top: 120px; + left: 35px; +} + +.imgBox1 { + position: relative; + top: 140px; + left: 35px; +} + +.central-section { + padding: 4rem 2rem; + background: rgb(238, 246, 215); + text-align: center; +} + +.central-section h2 { + font-size: 2rem; + margin-bottom: 2rem; +} + +.features { + display: flex; + justify-content: space-around; + flex-wrap: wrap; +} + +.feature { + flex: 1; + margin: 1rem; + padding: 1rem; + background: #fff; + border-radius: 5px; + box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); +} + +.feature h3 { + font-size: 1.5rem; + margin-bottom: 1rem; +} + +.how-it-works, .cta-section { + padding: 4rem 2rem; + text-align: center; +} + +.how-it-works h2, .cta-section h2 { + font-size: 2rem; + margin-bottom: 2rem; +} + +.how-it-works ol { + list-style: decimal inside; + text-align: left; + max-width: 800px; + margin: 0 auto; + font-size: x-large; +} + +.how-it-works li { + margin-bottom: 1rem; +} + +.how-it-works li strong { + color: #83ae83; +} + +.how-it-works { + background-color: #f7f5eb; +} + +footer { + background: #006400; + color: #fff; + padding: 1rem; + text-align: center; +} + +.logo { + font-family: "Poppins", sans-serif; + font-weight: 400; + font-size: x-large; + color: #44a544; + display: flex; + justify-content: space-between; + align-items: left; + width: 80%; +} + +.feature img { + height: 90px; + width: 90px; + object-fit: cover; +} +/* Ensure Flexbox for the buttons container */ +.nav-item.dropdown.d-flex { + display: flex; + gap: 10px; /* Adjust spacing between the buttons */ +} + +/* Ensure buttons look consistent */ +.navbar-nav .btn { + background-color: #f7f5eb; + border: none; + color: #000; +} + +/* Button hover effects */ +.navbar-nav .btn:hover { + color: #fff; + background-color: green; +} + +/* Dropdown menu styling */ +.dropdown-menu { + background-color: #f9f9f9; + border: 1px solid #ddd; +} + +.dropdown-item { + color: #333; +} + +.dropdown-item:hover, .dropdown-item:focus { + background-color: #ff9900; + color: #fff; +} diff --git a/client/src/components/LandingPage/trial.jsx b/client/src/components/LandingPage/trial.jsx new file mode 100644 index 0000000..dacc700 --- /dev/null +++ b/client/src/components/LandingPage/trial.jsx @@ -0,0 +1,113 @@ +import React from 'react'; +import './trail.css' +import img1 from '../../assets/farmerPic.jpeg' +import img2 from '../../assets/buyerPic2.jpeg' +import img3 from '../../assets/handshake3.svg' +import img4 from '../../assets/reshot-icon-laptop.svg' +import img5 from '../../assets/reshot-icon-envelope.svg' +import img6 from '../../assets/reshot-icon-calendar.svg' +import img7 from '../../assets/etoe.svg' +import { Navigate, useNavigate } from 'react-router-dom'; +function LandingPage() { + const navigate = useNavigate(); + return ( + <> + + +
+
+
+
Secure Income, Grow with Confidence
+

Connect directly with reliable buyers, negotiate contracts, and ensure timely payments.

+ +
+
+ Farmer +
+
+
+ +
+
+
+ Buyer +
+
+
Source Quality Produce, Hassle-Free
+

Find trusted farmers, negotiate prices, and secure your supply chain with ease.

+ +
+
+
+ +
+

Why Choose AgriConnect?

+
+
+ Guaranteed Market Access +

Guaranteed Market Access

+

Connect with verified buyers and secure a steady market for your produce.

+
+
+ Transparent Negotiation +

Transparent Negotiation

+

Discuss terms in real-time and reach agreements with ease.

+
+
+ Secure Contracts +

Secure Contracts

+

Legal assurance with securely stored contracts.

+
+
+ Timely Payments +

Timely Payments

+

Get paid on time, every time with our integrated payment system.

+
+
+ End-to-End Support +

End-to-End Support

+

From initial contact to final delivery, we ensure smooth transactions.

+
+
+
+ +
+

How AgriConnect Works: A Simple 3-Step Process

+
    +
  1. Sign Up & Create Your Profile: Farmers and buyers can easily sign up and create a profile tailored to their needs.
  2. +
  3. Connect & Negotiate: Use our platform to discover potential partners and establish secure contracts.
  4. +
  5. Deliver & Get Paid: Farmers deliver the produce as per the contract and receive timely payments.
  6. +
+
+ +
+

Join a Growing Community of Successful Farmers and Buyers

+
+ + + + + + ); +} + +export default LandingPage; diff --git a/client/src/components/Negotiate/Chat.jsx b/client/src/components/Negotiate/Chat.jsx index 5429e7c..5ed670f 100644 --- a/client/src/components/Negotiate/Chat.jsx +++ b/client/src/components/Negotiate/Chat.jsx @@ -1,41 +1,41 @@ import './chat.css'; -import io from 'socket.io-client' +import io from 'socket.io-client'; import { useState, useRef, useEffect, useContext } from 'react'; import { addDoc, collection, doc, getDoc } from 'firebase/firestore'; -import {db} from '../../../firebase' +import { db } from '../../../firebase'; import { AuthContext } from '../context/Authcontext'; export default function Chat() { //current user context - const { currentUser } = useContext(AuthContext); - const [userType, setUserType] = useState("buyers"); //change depending upon the type of user(buyer or farmer) + const { currentUser } = useContext(AuthContext); + const [userType, setUserType] = useState('buyers'); //change depending upon the type of user(buyer or farmer) const [contacts, setContacts] = useState({}); // console.log(currentUser); console.log(contacts); //testing values, to be removed later const roomID = 'room1'; const SERVER_PORT = import.meta.env.VITE_SERVER_PORT; - - const [socket, setSocket]= useState(null); - - useEffect(()=>{ + + const [socket, setSocket] = useState(null); + + useEffect(() => { //establish new socket connection const newSocket = io.connect(`http://localhost:${SERVER_PORT}`); setSocket(newSocket); //monitor messages - newSocket.on("recieve-message", (recieved_message)=>{ - setMessages(prevMessages => [...prevMessages, recieved_message]); - }) + newSocket.on('recieve-message', (recieved_message) => { + setMessages((prevMessages) => [...prevMessages, recieved_message]); + }); - //get all contacts when u load the page - getContacts(currentUser.uid, userType).then((result)=>{ + // get all contacts when u load the page + getContacts(currentUser.uid, userType).then((result) => { setContacts(result); }); return () => { newSocket.disconnect(); }; - },[]) + }, []); // State for the input text and messages const [text, setText] = useState(''); @@ -55,9 +55,9 @@ export default function Chat() { if (text.trim()) { if (socket) { - socket.emit("send-message", { message: text}); + socket.emit('send-message', { message: text }); } - + //add message to database try { await addDoc(collection(db, 'chats', roomID, 'messages'), { @@ -66,7 +66,7 @@ export default function Chat() { user: currentUser.uid, }); } catch (error) { - console.error("Error uploading message:", error); + console.error('Error uploading message:', error); } setMessages([...messages, text]); @@ -80,52 +80,57 @@ export default function Chat() { }; return ( -
- -
- {messages.map((msg, index) => ( -
- {msg} -
- ))} - {/* Empty div to scroll to */} -
-
-