Profile page

client/src/App.tsx

@@ -1,18 +1,16 @@
 import React from 'react';
 import './App.css';
-import { Routes, Route, Navigate } from "react-router-dom";
-import { Signup, Login, Home } from './pages';
-import { useAuthContext } from "./context/AuthContext";
+import { Routes, Route, Navigate } from 'react-router-dom';
+import { Signup, Login, Home, ProfilePage } from './pages';
+import { useAuthContext } from './context/AuthContext';
 import { Chat } from './pages';
+import EditProfile from './components/Profile/EditProfile';
 function App() {
   const { user } = useAuthContext();
 
   return (
     <Routes>
-      <Route
-        path="/"
-        element={<Home/>}
-      />
+      <Route path="/" element={<Home />} />
       <Route
         path="/signup"
         element={user.userId ? <Navigate to="/chat" /> : <Signup />}
@@ -25,6 +23,13 @@ function App() {
         path="/chat"
         element={user.userId ? <Chat /> : <Navigate to="/signup" />}
       />
+
+      <Route path="/profile/:profileId" element={<ProfilePage />} />
+
+      <Route
+        path="/edit"
+        element={user.userId ? <EditProfile /> : <Navigate to="/signup" />}
+      />
     </Routes>
   );
 }

client/src/components/Profile/EditProfile.tsx

@@ -0,0 +1,116 @@
+import React, { useEffect, useState } from 'react';
+import { Row, Col, Image, Input, Button, Select, Form, DatePicker } from 'antd';
+const { Option } = Select;
+const { TextArea } = Input;
+import tunisFlag from '../../assets/img/tunisFlag.png';
+import { SendOutlined, EditOutlined, SaveOutlined } from '@ant-design/icons';
+import ReactFlagsSelect from 'react-flags-select';
+import axios from 'axios';
+import { useAuthContext } from '../../context/AuthContext';
+
+
+const EditProfile = () => {
+  const [email, setEmail] = useState('[email protected]');
+  const [editMode, setEditMode] = useState(false); 
+
+  const[profile, setProfile] = useState<any>(null);
+  const [country, setCountry] = useState("")
+  const { user } = useAuthContext();
+
+
+
+
+  useEffect(() => {
+    const userData = async () => {
+      try {
+        const res = await axios.get(`/api/v1/profile/${user.userId}`);
+        const data = res.data;
+
+        setProfile(data.data[0]);
+
+      } catch (err) {
+        console.log(err);
+      }
+    };
+    userData();
+  }, []);
+
+
+  const handleEditClick = () => {
+    setEditMode(true);
+  };
+
+  const handleSaveClick = () => {
+    setEditMode(false);
+  };
+
+  return (
+    <div>
+      <Row>
+        <Col span={24}>
+          <div className="profile-container-bg">
+            <div className="profile-img-bg">
+              <div className="profile-img">
+                <Image
+                  width="65vh"
+                  src="https://s.abcnews.com/images/GMA/tom-holland-file-gty-jef-230614_1686763040439_hpMain_1x1_992.jpg"
+                />
+              </div>
+              <div className="profile-info-container">
+                <Image width="12vh" src={tunisFlag} />
+
+                <div className="user-info">
+                  <span>Name:</span>
+                  <Input placeholder={profile?.user.username} name="email"disabled={!editMode} />
+
+                  <span>Birthdate:</span>
+                  <Input
+                    placeholder="13 y.o"
+                    type="date"
+                    disabled={!editMode}
+                  />
+                  <span>Country:</span>
+                  <Form.Item >
+  <Form.Item name="country" noStyle>
+    <ReactFlagsSelect
+      selected={country}
+      onSelect={(code) => setCountry(code)}
+      disabled={!editMode}
+    />
+  </Form.Item>
+</Form.Item>
+
+
+                  <span>Bio:</span>
+                  <TextArea
+                    placeholder={profile?.bio}
+                    autoSize={{ minRows: 3, maxRows: 5 }}
+                    disabled={!editMode}
+                  />
+                </div>
+
+                <div className="msg-input-btn">
+                  {editMode ? (
+                    <Button
+                      type="text"
+                      onClick={handleSaveClick}
+                      icon={<SaveOutlined />}
+                    />
+                  ) : (
+                    <Button
+                      type="text"
+                      onClick={handleEditClick}
+                      icon={<EditOutlined />}
+                    />
+                  )}
+                </div>
+              </div>
+            </div>
+          </div>
+        </Col>
+      </Row>
+    </div>
+  );
+};
+
+export default EditProfile;

client/src/components/Profile/ProfileInfo.tsx

@@ -0,0 +1,100 @@
+import React, { useEffect, useState } from 'react';
+import { Row, Col, Image, Input, Button } from 'antd';
+import insta from '../../assets/img/insta.png';
+import facebook from '../../assets/img/facebook.png';
+import twitter from '../../assets/img/twitter.png';
+import tunisFlag from '../../assets/img/tunisFlag.png';
+import { SendOutlined } from '@ant-design/icons';
+import axios from 'axios';
+import { useParams } from 'react-router-dom';
+
+const ProfileInfo = () => {
+  const [loadings, setLoadings] = useState<boolean[]>([]);
+  const [profile, setProfile] = useState<any>(null);
+
+  const { profileId } = useParams();
+
+  useEffect(() => {
+    const userData = async () => {
+      try {
+        const res = await axios.get(`/api/v1/profile/${profileId}`);
+        const data = res.data;
+
+        setProfile(data.data[0]);
+
+      } catch (err) {
+        console.log(err);
+      }
+    };
+    userData();
+  }, []);
+
+  const enterLoading = (index: number) => {
+    setLoadings((prevLoadings) => {
+      const newLoadings = [...prevLoadings];
+      newLoadings[index] = true;
+      return newLoadings;
+    });
+
+    setTimeout(() => {
+      setLoadings((prevLoadings) => {
+        const newLoadings = [...prevLoadings];
+        newLoadings[index] = false;
+        return newLoadings;
+      });
+    }, 6000);
+  };
+
+  return (
+    <div>
+      <Row>
+        <Col span={24}>
+          {profile && (
+            <div className="profile-container-bg">
+              <div className="profile-img-bg">
+                <div className="profile-img">
+                  <Image
+                    width="65vh"
+                    // src={profile.avatar}
+
+                    src="https://s.abcnews.com/images/GMA/tom-holland-file-gty-jef-230614_1686763040439_hpMain_1x1_992.jpg"
+                  />
+                </div>
+                <div className="profile-info-container">
+                  <Image width="12vh" src={tunisFlag} />
+
+                  <div className="user-info">
+                    <span className="age">{2023 - profile.birthdate.slice(0,4)}y.o</span>
+
+                    <h1>{profile.user.username}</h1>
+                    <p>{profile.bio}</p>
+                  </div>
+
+                  <div className="soical-media">
+                    <Image width="6vh" src={facebook} />
+                    <Image width="6vh" src={insta} />
+                    <Image width="6vh" src={twitter} />
+                  </div>
+                  <div className="msg-input-btn">
+                    <Input placeholder="Send Message" />
+                    <Button
+                      type="primary"
+                      style={{ width: '100%' }}
+                      icon={<SendOutlined />}
+                      loading={loadings[1]}
+                      onClick={() => enterLoading(1)}
+                    >
+                      Send
+                    </Button>
+                  </div>
+                </div>
+              </div>
+            </div>
+          )}
+        </Col>
+      </Row>
+    </div>
+  );
+};
+
+export default ProfileInfo;

client/src/components/Profile/RatingAndReview.tsx

@@ -0,0 +1,64 @@
+import React, { useEffect, useState } from 'react';
+import { Progress, Row, Col, Rate, Button, Image } from 'antd';
+import axios from 'axios';
+import { useParams } from 'react-router-dom';
+
+const RatingAndReview = ({ isSuccess, setIsSuccess }:any) => {
+  const [feedback, setFeedback] = useState([]);
+  const { profileId } = useParams();
+
+  useEffect(() => {
+    const userFeedback = async () => {
+      try {
+        const res = await axios.get(`/api/v1/feedback/${profileId}`);
+        const data = res.data;
+        setFeedback(data.data);
+      } catch (err) {
+        console.log(err);
+      }
+    };
+    userFeedback();
+  }, [isSuccess]);
+
+  return (
+    <div className="reviewer">
+      <Row>
+        <Col span={24}>
+          <div className="all-comments">
+            {feedback.map((item, index) => (
+              <div className="comment-container">
+                <div className="commenter-info">
+                  <Image
+                    width="10vh"
+                    className="commenter-user"
+                    src="https://cdn.pixabay.com/photo/2015/10/05/22/37/blank-profile-picture-973460_1280.png"
+                  />
+                  <div className="commenter-name-star">
+                    <h3 key={index}>{item.user.username}</h3>
+                    <Rate
+                      className="stars"
+                      style={{ fontSize: '14px' }}
+                      allowHalf
+                      defaultValue={item.star}
+                      disabled={true}
+                    />
+                  </div>
+                </div>
+                <div className="comment-content">
+                  <p key={index}>{item.comment}</p>
+                </div>
+              </div>
+            ))}
+            <div>
+              <a href="#" className="see-more">
+                See More ...
+              </a>
+            </div>
+          </div>
+        </Col>
+      </Row>
+    </div>
+  );
+};
+
+export default RatingAndReview;