Skip to content

Commit 8cbd512

Browse files
error-driven-deverror-driven-dev
committed
add detail components; styling
1 parent f001822 commit 8cbd512

16 files changed

+440
-105
lines changed

‎API/reactivities.db

0 Bytes
Binary file not shown.

‎client-app/package-lock.json

Lines changed: 42 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎client-app/package.json

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,11 +9,13 @@
99
"@types/jest": "^26.0.23",
1010
"@types/node": "^12.20.15",
1111
"@types/react": "^17.0.11",
12+
"@types/react-calendar": "^3.4.0",
1213
"@types/react-dom": "^17.0.7",
1314
"axios": "^0.21.1",
1415
"mobx": "^6.3.2",
1516
"mobx-react-lite": "^3.2.0",
1617
"react": "^17.0.2",
18+
"react-calendar": "^3.4.0",
1719
"react-dom": "^17.0.2",
1820
"react-router-dom": "^5.2.0",
1921
"react-scripts": "4.0.3",

‎client-app/src/app/layout/styles.css

Lines changed: 36 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,4 +6,39 @@ body{
66

77

88
background-image: linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(9,9,121,1) 20%, #6eb1ac 100%) !important;
9-
}
9+
}
10+
11+
.react-calendar{
12+
width: 100%;
13+
border: none !important;
14+
box-shadow: 0 1px 2px 0 rgb(34 36 38 / 15%);
15+
}
16+
17+
.masthead {
18+
display: flex;
19+
align-items: center;
20+
background-image: linear-gradient(
21+
135deg,
22+
rgb(24, 42, 115) 0%,
23+
rgb(33, 138, 174) 69%,
24+
rgb(32, 167, 172) 89%
25+
) !important;
26+
height: 100vh;
27+
}
28+
29+
.masthead .ui.menu .ui.button,
30+
.ui.menu a.ui.inverted.button {
31+
margin-left: 0.5em;
32+
}
33+
34+
.masthead h1.ui.header {
35+
font-size: 4em;
36+
font-weight: normal;
37+
}
38+
39+
.masthead h2 {
40+
font-size: 1.7em;
41+
font-weight: normal;
42+
}
43+
44+
/*end home page styles*/

‎client-app/src/app/stores/activityStore.ts

Lines changed: 16 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { action, makeAutoObservable, runInAction } from "mobx";
1+
import { makeAutoObservable, runInAction } from "mobx";
22

33
import agent from "../api/agent";
44
import { Activity } from "../models/activities";
@@ -36,6 +36,21 @@ export default class ActivityStore {
3636
get activitiesByDate(){
3737
return Array.from(this.activityRegistry.values()).sort((a,b)=> Date.parse(a.date) - Date.parse(b.date));
3838
}
39+
get groupedActivities(){
40+
//turns entire result object into array of arrays where value 1 is date and value 2 is array of activity objects
41+
return Object.entries(
42+
//returns activities object where activity is the key and activities are array
43+
this.activitiesByDate.reduce((activities, activity) =>{
44+
//gets date of current activity
45+
const date = activity.date;
46+
//gets activities key(date) exists copy all items into array and add new activity; if not create the key and add current activity array
47+
activities[date] = activities[date] ? [...activities[date],activity] : [activity];
48+
return activities;
49+
//as definition removes the implicit any error
50+
},{} as{[key:string]: Activity[]})
51+
)
52+
}
53+
3954
loadActivity = async(id:string) => {
4055
let activity = this.getActivity(id);
4156
console.log(id);

‎client-app/src/features/activities/dashboard/ActivityDashboard.tsx

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import ActivityList from "./ActivityList";
44
import { observer } from "mobx-react-lite";
55
import { useEffect } from "react";
66
import LoadingComponents from "../../../app/layout/LoadingComponents";
7+
import ActivityFilters from "./ActivityFilters";
78

89
export const ActivityDashboard = observer(() => {
910
const { activityStore } = useStore();
@@ -22,6 +23,7 @@ if(activityRegistry.size <= 1){ loadActivites();
2223
<ActivityList></ActivityList>
2324
</Grid.Column>
2425
<GridColumn width="6">
26+
<ActivityFilters></ActivityFilters>
2527
</GridColumn>
2628
</Grid>
2729
</>

‎client-app/src/features/activities/dashboard/ActivityFilters.tsx

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
import React from 'react'
2+
import Calendar from 'react-calendar'
3+
import { Header, Menu } from 'semantic-ui-react'
4+
5+
export default function ActivityFilters() {
6+
return (
7+
<>
8+
<Menu vertical size="large" style={{width:'100%', marginTop: '26px'}}>
9+
<Header icon='filter' attached color='teal' content="Filters"/>
10+
<Menu.Item content='All Activitied'></Menu.Item>
11+
<Menu.Item content='I am going'></Menu.Item>
12+
<Menu.Item content='I am hosting'></Menu.Item>
13+
14+
</Menu>
15+
<Header />
16+
<Calendar></Calendar>
17+
18+
</>
19+
)
20+
}

‎client-app/src/features/activities/dashboard/ActivityItem.tsx

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
import { Link } from "react-router-dom";
2+
import { Item, Button, Segment, Icon } from "semantic-ui-react";
3+
import { Activity } from "../../../app/models/activities";
4+
5+
interface Props {
6+
activity: Activity;
7+
}
8+
9+
export default function ActivityItem({ activity }: Props) {
10+
11+
return (
12+
<Segment.Group>
13+
<Segment>
14+
<Item.Group>
15+
<Item>
16+
<Item.Image size="tiny" circular src="/assets/user.png" />
17+
<Item.Content>
18+
<Item.Header as={Link} to={`/activities/${activity.id}`}>
19+
{activity.title}
20+
</Item.Header>
21+
<Item.Description>Hosted by:</Item.Description>
22+
</Item.Content>
23+
</Item>
24+
</Item.Group>
25+
</Segment>
26+
<Segment>
27+
<span><Icon name='clock'></Icon> {activity.date}
28+
<Icon name='marker' /> {activity.venue}
29+
</span>
30+
</Segment>
31+
<Segment secondary>
32+
Attendees List
33+
</Segment>
34+
<Segment clearing>
35+
<span>{activity.description}</span>
36+
<Button as={Link} to={`/activities/${activity.id}`} color="teal" floated="right" content='view'></Button>
37+
</Segment>
38+
</Segment.Group>
39+
);
40+
}

‎client-app/src/features/activities/dashboard/ActivityList.tsx

Lines changed: 18 additions & 53 deletions
Original file line numberDiff line numberDiff line change
@@ -1,60 +1,25 @@
11
import { observer } from "mobx-react-lite";
2-
import React, { useState } from "react";
3-
import { SyntheticEvent } from "react";
4-
import { Link } from "react-router-dom";
5-
import { Button, Item, Label, Segment } from "semantic-ui-react";
2+
import { Fragment } from "react";
3+
import { Header } from "semantic-ui-react";
64
import { useStore } from "../../../app/stores/store";
5+
import ActivityItem from "./ActivityItem";
76

87
export default observer(function ActivityList() {
98
const { activityStore } = useStore();
10-
const { activitiesByDate, deleteActivity, loading } = activityStore;
11-
const [target, setTarget] = useState("");
9+
const { groupedActivities} = activityStore;
1210

13-
const handleActivityDelete = (
14-
e: SyntheticEvent<HTMLButtonElement>,
15-
id: string
16-
) => {
17-
setTarget(e.currentTarget.name);
18-
deleteActivity(id);
19-
};
11+
2012
return (
21-
<Segment>
22-
<Item.Group divided>
23-
{activitiesByDate.map((activity) => (
24-
<Item key={activity.id}>
25-
<Item.Content>
26-
<Item.Header>{activity.title}</Item.Header>
27-
<Item.Meta>{activity.date}</Item.Meta>
28-
<Item.Description className="ui header tiny">
29-
{activity.description}
30-
<p>
31-
{activity.city}, {activity.venue}{" "}
32-
</p>
33-
</Item.Description>
34-
<Item.Extra>
35-
<Button
36-
name={activity.id}
37-
loading={loading && target === activity.id}
38-
onClick={(e) => {
39-
handleActivityDelete(e, activity.id);
40-
}}
41-
floated="right"
42-
content="delete"
43-
color="red"
44-
/>
45-
<Button
46-
as={Link}
47-
to={`/activities/${activity.id}`}
48-
floated="right"
49-
content="view"
50-
color="blue"
51-
/>
52-
<Label basic content={activity.category}></Label>
53-
</Item.Extra>
54-
</Item.Content>
55-
</Item>
56-
))}
57-
</Item.Group>
58-
</Segment>
59-
);
60-
});
13+
<>
14+
{groupedActivities.map(([group, activities]) => (
15+
<Fragment key={group}>
16+
<Header sub color='teal'>
17+
{group}
18+
</Header>
19+
{activities.map(activity => (
20+
<ActivityItem key={activity.id} activity={activity} />
21+
))}
22+
</Fragment>
23+
))}
24+
</> )
25+
})

0 commit comments

Comments
 (0)