Skip to content
This repository was archived by the owner on Jun 1, 2022. It is now read-only.

Commit 34c572d

Browse files
mojo9492mojo9492
committed
Add App route to OrganizationSettings component
Add links in DrawerMenu to subscribed Orgs
1 parent 1824ae4 commit 34c572d

4 files changed

Lines changed: 107 additions & 74 deletions

File tree

‎client/src/App.tsx‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@ import { Footer } from "./Navigation/Footer";
1111
import { About } from "./About";
1212
import { UserSettings } from "./Users/UserSettings";
1313
import { UserContextProvider } from "./Users/UserContext";
14+
import OrganizationSettings from "./Organization/OrganizationSettings";
1415

1516
const App: React.FC = () => {
1617
return (
@@ -26,6 +27,10 @@ const App: React.FC = () => {
2627
<Route path="/editEvent/:eventId" component={CreateEvent} />
2728
<Route path="/event/:eventId" component={EventPage} />
2829
<Route path="/about" component={About} />
30+
<Route
31+
path="/organization/:organizationId"
32+
component={OrganizationSettings}
33+
/>
2934
<Route path="/settings" component={UserSettings} />
3035
<Route path="/" component={Home} />
3136
</Switch>

‎client/src/Event/EventDetails.tsx‎

Lines changed: 71 additions & 73 deletions
Original file line numberDiff line numberDiff line change
@@ -12,82 +12,80 @@ interface EventDetailsProps {
1212
tsrEvent: TsrEvent;
1313
}
1414

15-
export const EventDetails = React.memo(
16-
({ tsrEvent }: EventDetailsProps): ReactElement => {
17-
const startEndDate = (startDate: Moment, endDate: Moment): ReactElement => {
18-
if (startDate.isSame(endDate)) {
19-
return <DetailRow label="Date" description={longDateFormat(startDate)} />;
20-
} else {
21-
return (
22-
<>
23-
<DetailRow label="Start Date" description={longDateFormat(startDate)} />
24-
<DetailRow label="End Date" description={longDateFormat(endDate)} />
25-
</>
26-
);
27-
}
28-
};
15+
export const EventDetails = React.memo(({ tsrEvent }: EventDetailsProps): ReactElement => {
16+
const startEndDate = (startDate: Moment, endDate: Moment): ReactElement => {
17+
if (startDate.isSame(endDate)) {
18+
return <DetailRow label="Date" description={longDateFormat(startDate)} />;
19+
} else {
20+
return (
21+
<>
22+
<DetailRow label="Start Date" description={longDateFormat(startDate)} />
23+
<DetailRow label="End Date" description={longDateFormat(endDate)} />
24+
</>
25+
);
26+
}
27+
};
2928

30-
const longDateFormat = (date: Moment): string =>
31-
`${date.local().format(LONG_DATE_TIME_FORMAT)} (${userTimeZone()})`;
29+
const longDateFormat = (date: Moment): string =>
30+
`${date.local().format(LONG_DATE_TIME_FORMAT)} (${userTimeZone()})`;
3231

33-
const dateLastModifiedFormat = (dateLastModified: Moment): string => {
34-
const diffMoment = moment.duration(currentTimeUtc().diff(dateLastModified));
35-
let numOfTime = 0;
36-
let unitOfTime = "";
37-
if (diffMoment.days() >= 7) {
38-
return dateLastModified.format(SHORT_DATE_FORMAT);
39-
} else if (diffMoment.days() > 0) {
40-
numOfTime = diffMoment.days();
41-
unitOfTime = "day";
42-
} else if (diffMoment.hours() > 0) {
43-
numOfTime = diffMoment.hours();
44-
unitOfTime = "hour";
45-
} else if (diffMoment.minutes() > 5) {
46-
numOfTime = diffMoment.minutes();
47-
unitOfTime = "minute";
48-
} else {
49-
return "just now...";
50-
}
51-
if (numOfTime > 1) {
52-
unitOfTime = `${unitOfTime}s`;
53-
}
54-
return `${numOfTime} ${unitOfTime} ago`;
55-
};
32+
const dateLastModifiedFormat = (dateLastModified: Moment): string => {
33+
const diffMoment = moment.duration(currentTimeUtc().diff(dateLastModified));
34+
let numOfTime = 0;
35+
let unitOfTime = "";
36+
if (diffMoment.days() >= 7) {
37+
return dateLastModified.format(SHORT_DATE_FORMAT);
38+
} else if (diffMoment.days() > 0) {
39+
numOfTime = diffMoment.days();
40+
unitOfTime = "day";
41+
} else if (diffMoment.hours() > 0) {
42+
numOfTime = diffMoment.hours();
43+
unitOfTime = "hour";
44+
} else if (diffMoment.minutes() > 5) {
45+
numOfTime = diffMoment.minutes();
46+
unitOfTime = "minute";
47+
} else {
48+
return "just now...";
49+
}
50+
if (numOfTime > 1) {
51+
unitOfTime = `${unitOfTime}s`;
52+
}
53+
return `${numOfTime} ${unitOfTime} ago`;
54+
};
5655

57-
const mapOrganizations = () => {
58-
const orgArray = tsrEvent.organizations.map((org) => org.organizationDisplayName);
59-
return orgArray.join("; ");
60-
};
56+
const mapOrganizations = () => {
57+
const orgArray = tsrEvent.organizations.map((org) => org.organizationDisplayName);
58+
return orgArray.join("; ");
59+
};
6160

62-
return (
63-
<>
64-
<DetailRow
65-
label="Event Type"
66-
description={
67-
tsrEvent.eventType
68-
? tsrEvent.eventType.displayName.charAt(0).toUpperCase() +
69-
tsrEvent.eventType.displayName.slice(1)
70-
: "No Event Type"
71-
}
72-
/>
73-
{startEndDate(moment.utc(tsrEvent.startDate), moment.utc(tsrEvent.endDate))}
74-
<DetailRow label="Organization" description={mapOrganizations()} />
75-
<DetailRow
76-
label="Event Created By"
77-
description={`${tsrEvent.audit.createdByDisplayName}, (${moment
78-
.utc(tsrEvent.audit.createdDate)
79-
.local()
80-
.format(SHORT_DATE_FORMAT)})`}
81-
/>
82-
<DetailRow
83-
label="Last Modified By"
84-
description={`${
85-
tsrEvent.audit.lastModifiedByDisplayName
86-
}, ${dateLastModifiedFormat(moment(tsrEvent.audit.lastModifiedDate))}`}
87-
/>
88-
</>
89-
);
90-
},
91-
);
61+
return (
62+
<>
63+
<DetailRow
64+
label="Event Type"
65+
description={
66+
tsrEvent.eventType
67+
? tsrEvent.eventType.displayName.charAt(0).toUpperCase() +
68+
tsrEvent.eventType.displayName.slice(1)
69+
: "No Event Type"
70+
}
71+
/>
72+
{startEndDate(moment.utc(tsrEvent.startDate), moment.utc(tsrEvent.endDate))}
73+
<DetailRow label="Organization" description={mapOrganizations()} />
74+
<DetailRow
75+
label="Event Created By"
76+
description={`${tsrEvent.audit.createdByDisplayName}, (${moment
77+
.utc(tsrEvent.audit.createdDate)
78+
.local()
79+
.format(SHORT_DATE_FORMAT)})`}
80+
/>
81+
<DetailRow
82+
label="Last Modified By"
83+
description={`${tsrEvent.audit.lastModifiedByDisplayName}, ${dateLastModifiedFormat(
84+
moment(tsrEvent.audit.lastModifiedDate),
85+
)}`}
86+
/>
87+
</>
88+
);
89+
});
9290

9391
EventDetails.displayName = "EventDetails";

‎client/src/Navigation/DrawerMenu.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -53,7 +53,7 @@ export const DrawerMenu: React.FC = (): ReactElement => {
5353
return (
5454
<NavLink
5555
key={`${tsrUser.username}-${org.organizationDisplayName}`}
56-
to={`${org.organizationId}`}
56+
to={`organization/${org.organizationId}`}
5757
>
5858
{org.organizationDisplayName}
5959
</NavLink>

‎client/src/Organization/OrganizationSettings.tsx‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
import React, { useContext, useEffect } from "react";
2+
import UserContext from "../Users/UserContext";
3+
4+
const OrganizationSettings: React.FC = () => {
5+
const tsrUser = useContext(UserContext);
6+
7+
useEffect(() => {
8+
if (tsrUser === undefined) {
9+
return;
10+
}
11+
}, [tsrUser]);
12+
13+
if (tsrUser === undefined) {
14+
return <></>;
15+
}
16+
17+
if (tsrUser.settings.organizations === undefined) {
18+
console.log("no orgs");
19+
}
20+
21+
return (
22+
<>
23+
<h1 className="UserSettings-Header">{`${tsrUser.username} organization settings`}</h1>
24+
<p>Role: {tsrUser.role}</p>
25+
<p>{tsrUser.settings.organizations}</p>
26+
</>
27+
);
28+
};
29+
30+
export default OrganizationSettings;

0 commit comments

Comments
 (0)