|
4 | 4 | * |
5 | 5 | */ |
6 | 6 |
|
7 | | -import { useTheme } from '@mui/material'; |
| 7 | +import { Icon, useTheme } from '@mui/material'; |
8 | 8 | import Typography from '@mui/material/Typography'; |
9 | | -import { ShoppingCart, Settings, Receipt, CurrencyExchange, AttachMoney, CalendarMonth, Info } from '@mui/icons-material'; |
10 | 9 | import Link from '@mui/material/Link'; |
11 | 10 | import { Grid } from '@mui/material'; |
12 | 11 | import PageBlock from '../../layouts/PageBlock'; |
13 | 12 | import React from 'react'; |
| 13 | +import { useAllUsefulLinks } from '../../hooks/projects.hooks'; |
| 14 | +import LoadingIndicator from '../../components/LoadingIndicator'; |
| 15 | +import ErrorPage from '../ErrorPage'; |
14 | 16 |
|
15 | 17 | const UsefulLinks: React.FC = () => { |
16 | 18 | const theme = useTheme(); |
17 | | - const links = [ |
18 | | - <> |
19 | | - <ShoppingCart sx={{ fontSize: 17, color: theme.palette.text.primary }} /> |
20 | | - <Link |
21 | | - href="https://docs.google.com/document/d/1M5Ldy9L1BifBo18tdKpv3CH-frRneyEK26hUXbtMg7Q/edit" |
22 | | - target="_blank" |
23 | | - underline="hover" |
24 | | - fontSize={19} |
25 | | - sx={{ pl: 1 }} |
26 | | - > |
27 | | - Purchasing Guidelines |
28 | | - </Link> |
29 | | - </>, |
30 | | - <> |
31 | | - <CurrencyExchange sx={{ fontSize: 17, color: theme.palette.text.primary }} /> |
32 | | - <Link |
33 | | - href="https://docs.google.com/document/d/1DbT_--TrrQqhUQFA0ReyBydVLSojGW0QPWussvfOxNA/edit" |
34 | | - target="_blank" |
35 | | - underline="hover" |
36 | | - fontSize={19} |
37 | | - sx={{ pl: 1 }} |
38 | | - > |
39 | | - Reimbursement Guidelines |
40 | | - </Link> |
41 | | - </>, |
42 | | - <> |
43 | | - <Receipt sx={{ fontSize: 17, color: theme.palette.text.primary }} /> |
44 | | - <Link |
45 | | - href="https://docs.google.com/spreadsheets/d/1kqpnw8jZDx2GO5NFUtqefRXqT1XX46iMx5ZI4euPJgY/edit" |
46 | | - target="_blank" |
47 | | - underline="hover" |
48 | | - fontSize={19} |
49 | | - sx={{ pl: 1 }} |
50 | | - > |
51 | | - McMaster Order Sheet |
52 | | - </Link> |
53 | | - </>, |
54 | | - <> |
55 | | - <Settings sx={{ fontSize: 17, color: theme.palette.text.primary }} /> |
56 | | - <Link |
57 | | - href="https://nerdocs.atlassian.net/wiki/spaces/NER/pages/4554841/Hardware+Guidelines" |
58 | | - target="_blank" |
59 | | - underline="hover" |
60 | | - fontSize={19} |
61 | | - sx={{ pl: 1 }} |
62 | | - > |
63 | | - Hardware Guidelines |
64 | | - </Link> |
65 | | - </>, |
66 | | - <> |
67 | | - <CalendarMonth sx={{ fontSize: 17, color: theme.palette.text.primary }} /> |
68 | | - <Link |
69 | | - href="https://nerdocs.atlassian.net/wiki/spaces/NER/pages/6619279/Calendars" |
70 | | - target="_blank" |
71 | | - underline="hover" |
72 | | - fontSize={19} |
73 | | - sx={{ pl: 1 }} |
74 | | - > |
75 | | - Calendars |
76 | | - </Link> |
77 | | - </>, |
78 | | - <> |
79 | | - <Info sx={{ fontSize: 17, color: theme.palette.text.primary }} /> |
80 | | - <Link |
81 | | - href="https://nerdocs.atlassian.net/wiki/spaces/NER/overview" |
82 | | - target="_blank" |
83 | | - underline="hover" |
84 | | - fontSize={19} |
85 | | - sx={{ pl: 1 }} |
86 | | - > |
87 | | - Confluence |
88 | | - </Link> |
89 | | - </>, |
90 | | - <> |
91 | | - <AttachMoney sx={{ fontSize: 17, color: theme.palette.text.primary }} /> |
92 | | - <Link |
93 | | - href="https://docs.google.com/forms/d/e/1FAIpQLSfLu2tRjlolDEYbVtClJspnSjbHcQt59f3bUZIRnky_uOL9HA/viewform" |
94 | | - target="_blank" |
95 | | - underline="hover" |
96 | | - fontSize={19} |
97 | | - sx={{ pl: 1 }} |
98 | | - > |
99 | | - Sponsorship Form |
100 | | - </Link> |
101 | | - </> |
102 | | - ]; |
| 19 | + const { |
| 20 | + data: usefulLinks, |
| 21 | + isLoading: usefulLinksIsLoading, |
| 22 | + error: usefulLinksError, |
| 23 | + isError: usefulLinksIsError |
| 24 | + } = useAllUsefulLinks(); |
| 25 | + |
| 26 | + if (!usefulLinks || usefulLinksIsLoading) return <LoadingIndicator />; |
| 27 | + if (usefulLinksIsError) return <ErrorPage message={usefulLinksError.message} />; |
| 28 | + |
| 29 | + const links = usefulLinks.map((link) => { |
| 30 | + return ( |
| 31 | + <> |
| 32 | + <Icon |
| 33 | + sx={{ |
| 34 | + fontSize: 22, |
| 35 | + marginRight: 1, |
| 36 | + position: 'relative', |
| 37 | + top: 3, |
| 38 | + color: theme.palette.text.primary |
| 39 | + }} |
| 40 | + > |
| 41 | + {link.linkType.iconName} |
| 42 | + </Icon> |
| 43 | + <Link href={link.url} target="_blank" underline="hover" fontSize={19}> |
| 44 | + {link.linkType.name} |
| 45 | + </Link> |
| 46 | + </> |
| 47 | + ); |
| 48 | + }); |
103 | 49 |
|
104 | 50 | // gets the text wrapped in the React element, used here to generate keys |
105 | 51 | const rawText = (component: React.ReactElement | string): string => { |
|
0 commit comments