Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Completed Mine Task #89

Merged
merged 13 commits into from Apr 10, 2021
Merged

Completed Mine Task #89

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
13 commits
Select commit Hold shift + click to select a range
74cb1b3
Adding mine
saxenaaman628 Mar 17, 2021
ae3c57e
Completed Mine Task
saxenaaman628 Mar 19, 2021
aa1f377
Adding mine
saxenaaman628 Mar 17, 2021
6570ddc
Completed Mine Task
saxenaaman628 Mar 19, 2021
e84e22b
Changes Done
saxenaaman628 Mar 31, 2021
5445555
Test
saxenaaman628 Apr 1, 2021
a7dfa4b
Handled error
saxenaaman628 Apr 7, 2021
4844faa
Handled error
saxenaaman628 Apr 7, 2021
4e30f27
Handled error
saxenaaman628 Apr 7, 2021
cd87580
Removed mine_card
saxenaaman628 Apr 8, 2021
cd351f1
Remove Mine_card
saxenaaman628 Apr 8, 2021
6418e06
Remove Mine_card
saxenaaman628 Apr 8, 2021
44a2aac
Update mine.tsx
saxenaaman628 Apr 8, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
36 changes: 36 additions & 0 deletions src/components/tasks/mine_card/card.module.scss
View file
Open in desktop
@@ -0,0 +1,36 @@
.card {
border: 0.2em solid black;
border-radius: 0.5em;
padding: 1em;
display: flex;
flex-direction: column;
flex-wrap: wrap;
margin-bottom: 2em;
cursor: pointer;
}

.prTitle {
color: #041484;
font-size: 1.5rem;
font-weight: bold;

width: 100%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}

.cardFooter {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-between;
align-items: right;
width: 100%;
}


.statusLable {
color: grey;
font-weight: bold;
}
33 changes: 33 additions & 0 deletions src/components/tasks/mine_card/index.tsx
View file
Open in desktop
@@ -0,0 +1,33 @@
import { FC } from 'react';
import classNames from '@/components/tasks/mine_card/card.module.scss';
import { task } from '@/components/constants/types';

type Props = {
content: task,
};

const informationElement = (title: string, value: string) => (
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

You could convert this into a component instead of a function

<span className={classNames.statusElement}>
<span className={classNames.statusLable}>{`${title}: `}</span>
<strong>{value}</strong>
</span>
);

const Card: FC<Props> = ({ content }) => {
const {
title,
startedOn,
status,
} = content;

return (
<div className={classNames.card}>
<span className={classNames.prTitle}>{title}</span>
{informationElement('Started', startedOn)}
{informationElement('Status', status)}

</div>
);
};

export default Card;
53 changes: 50 additions & 3 deletions src/pages/mine.tsx
View file
Open in desktop
@@ -1,11 +1,58 @@
import { FC } from 'react';
import { FC,useState, useEffect } from 'react';
import Head from '@/components/head';
import Layout from '@/components/Layout';
import Card from '@/components/tasks/mine_card';
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Seems like we don't need the mine_card component as described in previous comment
import Card from '@/components/tasks/card';

import useFetch from '@/hooks/useFetch';
import classNames from '@/styles/tasks.module.scss';
import { task } from '@/components/constants/types';

const Mine: FC = () => (
const TASKS_URL = `${process.env.NEXT_PUBLIC_BASE_URL}/tasks/self`;


const CardList = (tasks: task[]) => tasks.map(
(item: task) => <Card content={item} key={item.id} />);
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

we could shift the arrow fn body to the next line OR
put the closing paranthesis on the next line


const Mine: FC = () => {
let [tasks, setTasks] = useState<task[]>([]);
const {
response,
error,
isLoading,
} = useFetch(TASKS_URL);

useEffect(() => {
if ('tasks' in response) {
setTasks(response.tasks);

}
}, [isLoading, response]);
return(
<Layout>
<Head title="Mine" />
<div className={classNames.container}>
{!!error && <p>Something went wrong, please contact admin!</p>}
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

both the lines are shown...

Something went wrong, please contact admin!
No Tasks Found

Please show only error in case of error

{
isLoading
? (
<p>Loading...</p>
) : (

<>
{
Object.keys(tasks).length > 0
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I guess just tasks.length should suffice

? (
<div>
{CardList(tasks)}
</div>
) : 'No Tasks Found'
}
</>
)
}
</div>
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

There is an extreme amount of white spaces
You could reduce them to something like...

<div className={classNames.container}>
  {!!error && <p>Something went wrong, please contact admin!</p>}
  
  {isLoading ? (
    <p>Loading...</p>
  ) : (
    tasks.length > 0 ? <div>{CardList(tasks)}</div> : "No Tasks Found"
  )}
</div>

</Layout>
);
);
};

export default Mine;