Changeset fc8421e

Timestamp:

01/10/21 21:57:22 (3 years ago)

Author:

i-ina <76742075+i-ina@…>

Branches:

master

Children:

5f9d25a

Parents:

6f9b7b0

Message:

initial jobs interface

Location:

client_app/src/components

Files:

• data/components/user_jobs.js (added)
• data/components/user_profile.js (modified) (1 diff)
• main/App.js (modified) (3 diffs)

client_app/src/components/data/components/user_profile.js

@@ -1 +1 @@
 import React from 'react';
-import { Container, Header, List } from 'semantic-ui-react'
+import { Container, Header, Table, Item } from 'semantic-ui-react'
 
 const UserDetails = (props) =>{
     return(
-        <Container>
+        <Container textAlign="left">
             <Header>Welcome</Header>
-            <br />
-            <h3>User: {props.data.name}</h3>
-            <table>
-                <tr>
-                    <td>
-                        <h3>Retained skills</h3>
-                        <ul>
-                        {props.data.retained.map((value, index) => {
-                            return <li key={index}>{value.name}</li>
-                        })}
-                        </ul>
-                    </td>
-                    <td>
-                        <h3>Skills you want to learn</h3>
-                        <ul>
+            <h3>{props.data.name} {props.data.surname}</h3>
+            <h2>E-mail: {props.data.email}</h2>
+            <Table celled>
+                <Table.Header>
+                    <Table.Row>
+                        <Table.HeaderCell>Retained Skills:</Table.HeaderCell>
+                        <Table.HeaderCell>Skills to Learn:</Table.HeaderCell>
+                    </Table.Row>
+                </Table.Header>
+                <Table.Body>
+                    <Table.Row>
+                        <Table.Cell active>
+                            {props.data.retained.map((value, index) => {
+                                return <Item key={index}>{value.name}</Item>
+                            })}
+                        </Table.Cell>
+                        <Table.Cell active>
                             {props.data.toLearn.map((value, index) => {
-                                return <li key={index}>{value.name}</li>
+                                return <Item key={index}>{value.name}</Item>
                             })}
-                        </ul>
-                    </td>
-                </tr>
-            </table>
+                        </Table.Cell>
+                    </Table.Row>
+                </Table.Body>
+            </Table>
         </Container>
     );

client_app/src/components/main/App.js

@@ -7 +7 @@
 import './App.css';
 import UserLogin from "../../repository/login_repo";
+import UserJobs from "../data/components/user_jobs";
 
 class App extends Component{
@@ -14 +15 @@
         logged: false,
         error: null,
-        currentUser: {}
+        currentUser: {
+        }
     }
   }
@@ -25 +27 @@
                       <Route path={"/login"} render={() => <Login error={this.state.error} onCompleteForm={this.attemptLogin} loggedIn={this.state.logged}/>}/>
                       <Route path={"/profile"} render={() => <Profile userProfile={this.state.currentUser}/>}/>
+                      <Route path={"/jobs"} render={() => <UserJobs userProfile={this.state.currentUser}/>}/>
                       <Route path={"/"} render={() => <Redirect to={"/login"}/>}/>
                   </main>