student profile added

package.json

@@ -6,6 +6,7 @@
     "@testing-library/jest-dom": "^5.11.6",
     "@testing-library/react": "^11.2.0",
     "@testing-library/user-event": "^12.2.2",
+    "antd": "^4.8.4",
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
     "react-scripts": "4.0.0",

src/component/StudentProfile.js

@@ -0,0 +1,127 @@
+import React, { useState, useEffect } from "react";
+import {Table,Progress,Input } from 'antd'
+//import profiledata from "./profiledata"
+import ViewProfile from './ViewProfile'
+const StudentProfile=({id})=>{
+  const [studentProfile, setStudentProfile ] = useState(null)  
+id=2;
+  useEffect(() => {
+    console.log("Fetching data from heroku");
+
+    fetch(
+      `https://ontrack-team3.herokuapp.com/profile/student/${id}`
+    )
+      .then((res) => res.json())
+      .then((data) => {
+        setStudentProfile([data]);
+      });
+  }, []);
+//      useEffect(() => {
+//     fetch(`url/${profile}`)
+//       .then(res => res.json())
+//       .then(data => {
+//         setNewProfile(data);
+//         console.log(data);
+//       });
+//   }, [profile]);
+// console.log(newProfile.assignment.reduce((acc,curr) => acc+curr,0)/newProfile.assignment.reduce((acc,curr) => {if(curr>0) { return acc++}; console.log(acc);},0))
+// console.log(newProfile.assignment.reduce((acc,curr) =>{if(curr>0) { return acc++}})
+// console.log(newProfile.assignment.reduce((acc,curr) => acc+curr,0))
+//const reducer = (acc,curr)=>acc + curr;
+
+
+
+  const columns = [
+    {
+      title: "Student_id",
+      dataIndex: "student_id",
+      key: "student_id",
+     // render: (text) => <a href="http://google.co.uk">{text}</a>,
+    },
+    {
+      title: "Name",
+      dataIndex: "name",
+      key: "name",
+    },
+    // {
+    //   title: "assignment",
+    //   dataIndex: "assignment",
+    //   key: "assignment",
+    // },
+    {
+      title: "Attendance",
+      key: "attendance",
+      dataIndex: "attendance",
+      render: (attendance) => (
+        <>
+          {attendance.map((element) => {
+            return (          
+
+                <Progress type="circle" strokeColor={{
+        '0%': '#108ee9',
+        '100%': '#87d068',
+      }} percent={element} width={80} />
+
+            );
+          })}
+        </>
+      ),
+    },
+    {
+      title: "Assignment",
+      dataIndex: "assignment",
+      key: "assignment",
+
+      render: (assignment) => (
+        <>
+          {assignment.map((element) => {
+
+
+            return (          
+
+                <Progress type="circle" strokeColor={{
+        '0%': '#108ee9',
+        '50%': 'amber',
+        '100%': '#87d068',
+      }} percent={(element*10).toFixed(2)} width={80} />
+
+            );
+          })}
+        </>
+      ),
+    },
+    {
+      title: "email",
+      dataIndex: "email",
+      key: "email",
+    },
+
+  ];
+  return <Table columns={columns} dataSource={studentProfile} />;
+};
+
+//return <TextArea rows={4} />;
+
+
+
+ // };
+
+
+//     if (newProfile) {
+//     return (
+//       <div>
+//         Student Profile{" "}
+//         <ul>
+//           <li>Id {newProfile.student_id}</li><br />
+//           <li>Name {newProfile.name}</li><br />
+//           <li>Assignment {newProfile.assignment.reduce((acc,curr) => acc+curr,0)/newProfile.assignment.reduce((acc,curr) =>acc+!!curr,0)}</li><br />
+//           <li>Attendance {newProfile.attendance.reduce((acc,curr) => acc+(curr!=='No'?1:0),0)/newProfile.attendance.length*100}%</li><br />
+//           <li>Email {newProfile.email}</li><br />
+//         </ul>{" "}
+//       </div>
+//     );
+
+// }
+//  return null;
+ //};
+export default StudentProfile;

src/component/ViewProfile.js

@@ -0,0 +1,155 @@
+import React from 'react';
+//import ReactDOM from 'react-dom';
+import 'antd/dist/antd.css';
+import './viewprofile.css';
+import { Drawer, List, Avatar, Divider, Col, Row } from 'antd';
+
+const DescriptionItem = ({ title, content }) => (
+  <div className="site-description-item-profile-wrapper">
+    <p className="site-description-item-profile-p-label">{title}:</p>
+    {content}
+  </div>
+);
+
+class ViewProfile extends React.Component {
+  state = { visible: false };
+
+  showDrawer = () => {
+    this.setState({
+      visible: true,
+    });
+  };
+
+  onClose = () => {
+    this.setState({
+      visible: false,
+    });
+  };
+
+  render() {
+    return (
+      <>
+        <List
+          dataSource={[
+            {
+              name: 'Berhane',
+            }
+          ]}
+          bordered
+          renderItem={item => (
+            <List.Item
+              key={item.id}
+              actions={[
+                <a onClick={this.showDrawer} key={`a-${item.id}`}>
+                  View Profile
+                </a>,
+              ]}
+            >
+              <List.Item.Meta
+                avatar={
+                  <Avatar src="https://gw.alipayobjects.com/zos/rmsportal/BiazfanxmamNRoxxVxka.png" />
+                }
+                title={<a href="https://ant.design/index-cn">{item.name}</a>}
+                description="CodeYourFuture WM class-1"
+              />
+            </List.Item>
+          )}
+        />
+        <Drawer
+          width={640}
+          placement="right"
+          closable={false}
+          onClose={this.onClose}
+          visible={this.state.visible}
+        >
+          <p className="site-description-item-profile-p" style={{ marginBottom: 24 }}>
+            Student Profile
+          </p>
+          <p className="site-description-item-profile-p">Personal</p>
+          <Row>
+            <Col span={12}>
+              <DescriptionItem title="Full Name" content="Berhane" />
+            </Col>
+            <Col span={12}>
+              <DescriptionItem title="Account" content="mail2berhane@gmail.com" />
+            </Col>
+          </Row>
+          <Row>
+            <Col span={12}>
+              <DescriptionItem title="City" content="Birmingham" />
+            </Col>
+            <Col span={12}>
+              <DescriptionItem title="Country" content="United Kingdom" />
+            </Col>
+          </Row>
+          <Row>
+            <Col span={12}>
+              <DescriptionItem title="Birthday" content="February 2,1900" />
+            </Col>
+            <Col span={12}>
+              <DescriptionItem title="Website" content="-" />
+            </Col>
+          </Row>
+          <Row>
+            <Col span={24}>
+              <DescriptionItem
+                title="Message"
+                content="Make things as simple as possible but no simpler."
+              />
+            </Col>
+          </Row>
+          <Divider />
+          <p className="site-description-item-profile-p">Company</p>
+          <Row>
+            <Col span={12}>
+              <DescriptionItem title="Position" content="Student" />
+            </Col>
+            <Col span={12}>
+              <DescriptionItem title="Responsibilities" content="Full Stack Developer" />
+            </Col>
+          </Row>
+          <Row>
+            <Col span={12}>
+              <DescriptionItem title="Department" content="Technology" />
+            </Col>
+            {/* <Col span={12}>
+              <DescriptionItem title="Supervisor" content={<a>Lin</a>} />
+            </Col> */}
+          </Row>
+          <Row>
+            <Col span={24}>
+              <DescriptionItem
+                title="Skills"
+                content="HTML, CSS, JavaScript, React, Nodejs, SQL, Git"
+              />
+            </Col>
+          </Row>
+          <Divider />
+          <p className="site-description-item-profile-p">Contacts</p>
+          <Row>
+            <Col span={12}>
+              <DescriptionItem title="Email" content="mail2berhane@gmail.com" />
+            </Col>
+            <Col span={12}>
+              <DescriptionItem title="Phone Number" content="+44 12345678" />
+            </Col>
+          </Row>
+          <Row>
+            <Col span={24}>
+              <DescriptionItem
+                title="Github"
+                content={
+                  <a href="https://github.com/bireworld">
+                    https://github.com/bireworld
+                  </a>
+                }
+              />
+            </Col>
+          </Row>
+        </Drawer>
+      </>
+    );
+  }
+}
+
+export default ViewProfile;

src/component/profiledata.json

@@ -0,0 +1,30 @@
+[
+  {
+	"student_id": 1,
+	"name": "student 1",
+	"assignment":  5,
+	"attendance": 98,
+	"email": "Student1@gmail.com"
+  },
+  {
+	"student_id": 2,
+	"name": "Student 2",
+	"assignment": 8, 
+	"attendance": 99,
+	"email": "Student2@gmail.com"
+  },
+  {
+	"student_id": 3,
+	"name": "Student 3",
+	"assignment": 7,
+	"attendance": 89,
+	"email": "Student3@gmail.com"
+  },
+  {
+	"student_id": 4,
+	"name": "student 4",
+	"assignment": 10,
+	"attendance": 100,
+	"email": "Student4@gmail.com"
+  }
+]

src/component/viewprofile.css

@@ -0,0 +1,39 @@
+
+.site-description-item-profile-wrapper {
+    margin-bottom: 7px;
+    color: rgba(0, 0, 0, 0.65);
+    font-size: 14px;
+    line-height: 1.5715;
+}
+
+[data-theme='compact'] .site-description-item-profile-wrapper {
+    font-size: 12px;
+    line-height: 1.66667;
+}
+
+.ant-drawer-body p.site-description-item-profile-p {
+    display: block;
+    margin-bottom: 16px;
+    color: rgba(0, 0, 0, 0.85);
+    font-size: 16px;
+    line-height: 1.5715;
+}
+
+[data-theme='compact'] .ant-drawer-body p.site-description-item-profile-p {
+    font-size: 14px;
+    line-height: 1.66667;
+}
+
+.site-description-item-profile-p-label {
+    display: inline-block;
+    margin-right: 8px;
+    color: rgba(0, 0, 0, 0.85);
+}
+
+[data-theme="dark"] .site-description-item-profile-p {
+    color: rgba(255, 255, 255, 0.85);
+}
+
+[data-theme="dark"] .site-description-item-profile-wrapper {
+    color: rgba(255, 255, 255, 0.65);
+}

src/index.css

@@ -11,3 +11,6 @@ code {
   font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
     monospace;
 }
+.site-layout-background {
+  background: #fff;
+}

src/main.jsx

@@ -1,12 +1,20 @@
 import React from 'react'
 import Data from './Data.json'
 import './main.css'
+import StudentProfile from './component/StudentProfile'
+import "antd/dist/antd.css";
+import "./index.css";
+import ViewProfile from './component/ViewProfile';
 function main(){
     return(
         <div id="container">
         <Header />
         <hr></hr>
-        <Main />
+        {/* <Main /> */}
+        <StudentProfile />
+         <ViewProfile />
+
+
         <hr></hr>
         <Footer />
         </div>