Skip to content

Commit

Permalink
Merge pull request #129 from Real-Dev-Squad/develop
Browse files Browse the repository at this point in the history
Merge Develop to Main
  • Loading branch information
whyDontI committed Apr 22, 2021
2 parents fbd6857 + 45c367a commit 3a4a7d1
Show file tree
Hide file tree
Showing 19 changed files with 323 additions and 460 deletions.
28 changes: 28 additions & 0 deletions CONTRIBUTING.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,28 @@
# Contributing to RDS Status-Site
- [How to Start](#1.-how-to-start)
- [Yarn Command Reference](#2.-yarn-command-reference)
- [API Contracts](#3.-api-contracts)
- [Setting Up Local System](#4.-setting-up-local-system)

## **1. How to Start**

Follow this [link](https://github.com/Real-Dev-Squad/website-welcome/blob/main/CONTRIBUTING.md) to understand how to clone,fork and do a PR.
## **2. Yarn Command Reference**
## Set-up
`yarn install`

## Development
To run the project `yarn run dev`.

## Production
To do a production build `yarn run start`.

## **3. API Contracts**
API contracts can be found [here](https://github.com/Real-Dev-Squad/website-api-contracts/tree/main/tasks).

## **4. Setting Up Local System**
1. **Get Authenticated cookie**
Click [this](https://github.com/login/oauth/authorize?client_id=c4a84431feaf604e89d1) link to redirect to authenticating page.
2. **To get the CORS error resolved follow this doc**
https://github.com/Real-Dev-Squad/website-code-docs/tree/main/docs/dev/https-dev-url-cors

Original file line number Diff line number Diff line change
@@ -1,54 +1,81 @@
.card {
padding: 1em;
box-shadow: 0 0 15px -7px rgba(0, 0, 0, 0.65);
border-radius: 10px;
padding: 1.5rem;
display: flex;
flex-direction: column;
flex-wrap: wrap;
margin-bottom: 2em;
margin-bottom: 2rem;
cursor: pointer;
box-shadow: 0 0 15px -7px rgba(0, 0, 0, 0.65);
border-radius: 10px;
}

.card:hover {
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.prTitle {
color: #041484;
font-size: 1.5rem;
font-size: 2rem;
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: center;
width: 100%;
}

}
.profilePicture {
display: flex;
justify-content: space-between;
align-items: center;
width: 6em;
}

.profilePicture > img {
width: 3em;
border-radius: 50%;
}

.statusLable {
color: grey;
font-weight: bold;
}
.participantsLists {
list-style: none;
display: flex;
vertical-align: top;
margin-top: 0;
}
.participantsList img {
border-radius: 50%;
width: 3rem;
height: 3rem;
margin-left: -20px;
}
.activeBtn{
display: flex;
align-items: center;
justify-content: center;
background: #4fb90d;
color: white;
border: 2px solid black;
border-radius: 5px;
padding: 0.5rem 1rem;
font: inherit;
cursor: pointer;
font-weight: bolder;
font-size: 1.5rem;
}
.activeBtn:hover,
.activeBtn:active {
background: darkgreen;
}
.Center {
display: flex;
align-items: center;
justify-content: center;
margin-top: 1rem;
}
.links{
text-decoration: none;
}

.datetime {
display: block;
Expand Down Expand Up @@ -87,4 +114,4 @@
visibility: hidden;
opacity: 0;
}
}
}
126 changes: 126 additions & 0 deletions src/components/Card/index.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,126 @@
import { FC } from 'react';
import classNames from '@/components/Card/card.module.scss';

type Props = {
title: {
text: string,
link?: string
},
data: {
key: string,
value: string
}[],
assignee?:
{
userName: string,
imgUrl: string,
onError:() => void
},
participants?:
{
firstName: string,
lastName: string,
userName: string,
imgUrl: string,
}[],
button?: {
text: string,
link?: string,
onClick?: () => void
};
};

const Card: FC<Props> = ({
title, data, assignee = undefined, participants = undefined, button = undefined,
}) => {
const { text: tileText } = title;

const informationElement = (key: string, value: string) => (
<span className={classNames.statusElement}>
<span className={classNames.statusLable}>{`${key}: `}</span>
<strong>{value}</strong>
</span>
);

return (
<div
className={classNames.card}
onClick={() => {
if (title.link) {
window.open(title.link, '_blank');
}
}}
onKeyDown={() => {
if (title.link) {
window.open(title.link, '_blank');
}
}}
role="button"
tabIndex={0}
>

<span className={classNames.prTitle}>{tileText}</span>

<div>
{data.map((pair) => (
<div key={pair.key}>
{informationElement(pair.key, pair.value)}
</div>
))}
</div>

{
(assignee) && (
<div className={classNames.cardFooter}>
<div className={classNames.profilePicture}>
<img
src={assignee.imgUrl}
alt={assignee.userName}
onError={assignee.onError}
/>
<strong>{assignee.userName || 'No contributor'}</strong>
</div>
</div>
)
}

{
(participants) && (
<div className={classNames.Center}>
<ul className={classNames.participantsLists}>
{
participants.map((participant) => (
<li key={participant.userName} className={classNames.participantsList}>
<img
src={participant.imgUrl}
alt={`${participant.firstName} ${participant.lastName}`}
/>
</li>
))
}
</ul>
</div>
)
}

{
(button) && (
<div className={classNames.Center}>
<a
href={button?.link}
className={classNames.links}
target="_blank"
rel="noreferrer"
>
<button type="button" onClick={button?.onClick} className={classNames.activeBtn}>
{button.text}
</button>
</a>
</div>
)
}
</div>
);
};

export default Card;
51 changes: 18 additions & 33 deletions src/components/challenges/active.tsx
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import { FC, useState } from 'react';
import classNames from '@/components/challenges/styles.module.scss';
import Details from '@/components/challenges/details';
import Participants from '@/components/challenges/participants';
import Card from '@/components/Card/index';
import details from '@/components/challenges/details';
import participantsDetails from '@/components/challenges/participants';

type ActiveProps = {
content: {
Expand Down Expand Up @@ -33,38 +33,23 @@ type ActiveProps = {
const Active: FC<ActiveProps> = ({ content }) => {
const [isUserSubscribed, setUserSubscribed] = useState(content.is_user_subscribed);

const subscribeEventHandler = async () => {
setUserSubscribed(1);
};

return (
<div className={classNames.boxContent}>
<p className={classNames.heading}>{content.title}</p>
<Details text="Level" value={content.level} />
<Details text="Challenge Started" value={content.start_date} />
<Details text="Challenge Ends" value={content.end_date} />
<div className={classNames.participants}>
<Details
text="Active Participants"
value={content.participants.length}
/>
<Participants participants={content.participants} />
</div>
{
!isUserSubscribed && (
<p className={classNames.activeBtn}>
<button
onClick={subscribeEventHandler}
onKeyDown={subscribeEventHandler}
tabIndex={0}
type="button"
>
I will do this
</button>
</p>
)
<Card
title={{ text: content.title }}
data={details(content)}
participants={participantsDetails(content)}
button={
{
text: 'I will do this',
onClick: () => {
if (!isUserSubscribed) {
(setUserSubscribed(1));
}
},
}
}
</div>
key={content.title}
/>
);
};

Expand Down
25 changes: 9 additions & 16 deletions src/components/challenges/complete.tsx
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import { FC } from 'react';
import classNames from '@/components/challenges/styles.module.scss';
import Details from '@/components/challenges/details';
import Participants from '@/components/challenges/participants';
import Card from '@/components/Card/index';
import details from '@/components/challenges/details';
import participantsDetails from '@/components/challenges/participants';

type CompleteProps = {
content: {
Expand Down Expand Up @@ -31,19 +31,12 @@ type CompleteProps = {
};

const Complete: FC<CompleteProps> = ({ content }) => (
<div className={classNames.boxContent}>
<p className={classNames.heading}>{content.title}</p>
<Details text="Level" value={content.level} />
<Details text="Challenge Started" value={content.start_date} />
<Details text="Challenge Ends" value={content.end_date} />
<div className={classNames.participants}>
<Details text="Participants" value={content.participants.length} />
<Participants participants={content.participants} />
</div>
<p className={classNames.viewStats}>
<a href="/">View Stats</a>
</p>
</div>
<Card
title={{ text: content.title }}
data={details(content)}
participants={participantsDetails(content)}
key={content.title}
/>
);

export default Complete;
9 changes: 0 additions & 9 deletions src/components/challenges/details/details.module.scss

This file was deleted.

0 comments on commit 3a4a7d1

Please sign in to comment.