Skip to content

Commit c295469

Browse files
ancy0ancy0
authored
Merge pull request #200 from AgainIoT/feature/166
review page UI Changed!! #166
2 parents a281e52 + 78c6876 commit c295469

File tree

9 files changed

+533
-312
lines changed

9 files changed

+533
-312
lines changed

‎src/components/review/Notification.js‎

Lines changed: 124 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,124 @@
1+
import styled from "styled-components";
2+
import { COLOR } from "../../styles/color";
3+
import { useRecoilValue } from "recoil";
4+
import {
5+
reivewAlertListState,
6+
reivewReportState,
7+
} from "../../recoil/reviewState";
8+
import { Alert, AlertTitle } from "@mui/material";
9+
import { PropTypes } from "prop-types";
10+
11+
const AlertNotificationItem = (props) => {
12+
return (
13+
<StNotificationItem>
14+
<NotificationItemWrapper severity="warning">
15+
<NotificationItemTitle>
16+
Unable to confirm about <strong>{props.item}</strong>
17+
</NotificationItemTitle>
18+
Authority above the owner are required for accurately evaluated.
19+
</NotificationItemWrapper>
20+
</StNotificationItem>
21+
);
22+
};
23+
AlertNotificationItem.propTypes = {
24+
item: PropTypes.string.isRequired,
25+
};
26+
27+
const NoneNotificationItem = (props) => {
28+
return (
29+
<StNotificationItem>
30+
<NotificationItemWrapper severity="error">
31+
<NotificationItemTitle>Fail </NotificationItemTitle>
32+
Your repository failed to verify — <strong>{props.item}</strong>
33+
</NotificationItemWrapper>
34+
</StNotificationItem>
35+
);
36+
};
37+
38+
NoneNotificationItem.propTypes = {
39+
item: PropTypes.string.isRequired,
40+
};
41+
42+
// props => data, type
43+
const NotificationList = (props) => {
44+
return (
45+
<StNotificationList>
46+
{props.type === "alert" ? (
47+
<>
48+
{props.data.map((it, index) => {
49+
return <AlertNotificationItem key={it} item={it} />;
50+
})}
51+
</>
52+
) : (
53+
<>
54+
{props.data.map((it, index) => {
55+
return <NoneNotificationItem key={it} item={it} />;
56+
})}
57+
</>
58+
)}
59+
</StNotificationList>
60+
);
61+
};
62+
NotificationList.propTypes = {
63+
data: PropTypes.array.isRequired,
64+
type: PropTypes.string.isRequired,
65+
};
66+
67+
export const Notification = () => {
68+
const hasNotified = useRecoilValue(reivewReportState("hasNotified"));
69+
const alertList = useRecoilValue(reivewAlertListState);
70+
const noneList = useRecoilValue(reivewReportState("none"));
71+
72+
return (
73+
<StNotification>
74+
{hasNotified ? (
75+
<>
76+
{alertList.length > 0 && (
77+
<NotificationList data={alertList} type={"alert"} />
78+
)}
79+
{noneList.length > 0 && (
80+
<NotificationList data={noneList} type={"none"} />
81+
)}
82+
</>
83+
) : (
84+
<></>
85+
)}
86+
</StNotification>
87+
);
88+
};
89+
90+
const StNotification = styled.div`
91+
display: flex;
92+
flex-direction: column;
93+
width: 100%;
94+
height: 15rem;
95+
overflow-y: auto;
96+
`;
97+
98+
// notificationItem
99+
const StNotificationItem = styled.div`
100+
display: flex;
101+
width: 100%;
102+
`;
103+
104+
const NotificationItemWrapper = styled(Alert)`
105+
display: flex;
106+
width: 100%;
107+
background-color: ${COLOR.MAIN_WHITE};
108+
font-size: 1.2rem;
109+
strong {
110+
font-weight: bolder;
111+
}
112+
`;
113+
const NotificationItemTitle = styled(AlertTitle)`
114+
font-size: 1.5rem;
115+
`;
116+
117+
// notificationList
118+
const StNotificationList = styled.div`
119+
display: flex;
120+
flex-direction: column;
121+
width: 100%;
122+
height: 100%;
123+
gap: 1rem;
124+
`;

‎src/components/review/ReviewItems.js‎

Lines changed: 204 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,204 @@
1+
import styled from "styled-components";
2+
import { COLOR } from "../../styles/color";
3+
import { useNavigate } from "react-router-dom";
4+
import { Box, CircularProgress, SvgIcon, Typography } from "@mui/material";
5+
import CheckRoundedIcon from "@mui/icons-material/CheckRounded";
6+
import { ReactComponent as Arrow } from "../../assets/icons/arrowLongRight.svg";
7+
import propTypes from "prop-types";
8+
9+
const ReviewTemplateItem = (props) => {
10+
const data = props.data;
11+
const navigate = new useNavigate();
12+
13+
const ItemIcon = {
14+
default: (
15+
<>
16+
<TemplateIconWrapper />
17+
<ItemProgress progresscolor={COLOR.MAIN_SKYBLUE} />
18+
</>
19+
),
20+
true: (
21+
<>
22+
<TemplateIconWrapper
23+
component={CheckRoundedIcon}
24+
iconcolor={COLOR.MAIN_NAVY}
25+
/>
26+
<ItemProgress
27+
variant="determinate"
28+
value={100}
29+
progresscolor={COLOR.MAIN_SKYBLUE}
30+
/>
31+
</>
32+
),
33+
false: (
34+
<>
35+
<TemplateIconWrapper
36+
component={data.icon}
37+
iconcolor={COLOR.MAIN_NAVY}
38+
/>
39+
<ItemProgress
40+
variant="determinate"
41+
value={100}
42+
progresscolor={COLOR.MAIN_ROSE}
43+
/>
44+
</>
45+
),
46+
};
47+
48+
return (
49+
<StTemplateItemBox
50+
onClick={() => {
51+
navigate(data.path);
52+
}}
53+
>
54+
<TemplateItemIconBox>
55+
{props.isLoadingTemplate
56+
? ItemIcon["default"]
57+
: ItemIcon[props.reviewData[data.item]]}
58+
</TemplateItemIconBox>
59+
<TextContainer>
60+
<TemplateItemTitle variant="h4">{data.title}</TemplateItemTitle>
61+
<TemplateDecsText variant="subtitle1">{data.desc}</TemplateDecsText>
62+
</TextContainer>
63+
<ArrowIcon component={Arrow} inheritViewBox />
64+
</StTemplateItemBox>
65+
);
66+
};
67+
68+
ReviewTemplateItem.propTypes = {
69+
data: propTypes.object,
70+
isLoadingTemplate: propTypes.bool,
71+
reviewData: propTypes.object,
72+
};
73+
74+
export const ReviewTemplateList = (props) => {
75+
return (
76+
<StReviewList>
77+
{props.data.map((it) => {
78+
return (
79+
<ReviewTemplateItem
80+
key={it.item}
81+
data={it}
82+
isLoadingTemplate={props.isLoadingTemplate}
83+
reviewData={props.reviewData}
84+
/>
85+
);
86+
})}
87+
</StReviewList>
88+
);
89+
};
90+
91+
ReviewTemplateList.propTypes = {
92+
data: propTypes.array,
93+
isLoadingTemplate: propTypes.bool,
94+
reviewData: propTypes.object,
95+
};
96+
97+
const StReviewList = styled.div`
98+
display: flex;
99+
justify-content: space-between;
100+
flex-direction: row;
101+
`;
102+
103+
//default
104+
const StItemBox = styled.div`
105+
display: flex;
106+
justify-content: space-evenly;
107+
flex-direction: column;
108+
width: 23rem;
109+
height: 22rem;
110+
padding: 1.5rem;
111+
/* gap: 1rem; */
112+
/* border: 0.1rem solid lightgrey; */
113+
border-radius: 2rem;
114+
background-color: ${COLOR.MAIN_WHITE};
115+
box-shadow: 0rem 0.1rem 2rem lightgrey;
116+
`;
117+
118+
const ItemIconBox = styled(Box)`
119+
display: flex;
120+
align-items: center;
121+
justify-content: center;
122+
position: relative;
123+
top: 0;
124+
width: 5rem;
125+
height: 5rem;
126+
margin: 0.1rem;
127+
`;
128+
129+
const IconWrapper = styled(SvgIcon)`
130+
position: absolute;
131+
color: ${(props) => props.iconcolor};
132+
font-size: 2.7rem;
133+
`;
134+
135+
const TextContainer = styled.div`
136+
display: flex;
137+
flex-direction: column;
138+
gap: 0.5rem;
139+
`;
140+
141+
const ItemTitle = styled(Typography)`
142+
font-weight: bolder;
143+
text-align: left;
144+
`;
145+
const DecsText = styled(Typography)`
146+
color: ${COLOR.FONT_GRAY};
147+
font-size: 1.2rem;
148+
text-align: justify;
149+
`;
150+
151+
// for template
152+
const StTemplateItemBox = styled(StItemBox)`
153+
&:hover {
154+
padding: 2rem 1.5rem;
155+
background-color: ${COLOR.MAIN_PURPLE};
156+
transition: all 0.3s ease-in;
157+
}
158+
`;
159+
160+
const TemplateItemIconBox = styled(ItemIconBox)`
161+
transition: all 1s ease-in-out;
162+
${StTemplateItemBox}:hover & {
163+
display: none;
164+
transition: all 0.5s ease-in-out;
165+
}
166+
`;
167+
168+
const TemplateIconWrapper = styled(IconWrapper)``;
169+
170+
const TemplateItemTitle = styled(ItemTitle)`
171+
${StTemplateItemBox}:hover & {
172+
color: ${COLOR.MAIN_WHITE};
173+
transition: all 0.2s ease-in-out;
174+
}
175+
`;
176+
const TemplateDecsText = styled(DecsText)`
177+
${StTemplateItemBox}:hover & {
178+
color: ${COLOR.MAIN_WHITE};
179+
transition: all 0.2s ease-in-out;
180+
}
181+
`;
182+
183+
const ArrowIcon = styled(SvgIcon)`
184+
display: none;
185+
color: ${COLOR.MAIN_WHITE};
186+
font-size: 5rem;
187+
${StTemplateItemBox}:hover & {
188+
display: block;
189+
color: ${COLOR.MAIN_WHITE};
190+
transition: all 0.2s ease-in-out;
191+
}
192+
`;
193+
194+
const ItemProgress = styled(CircularProgress)`
195+
display: flex;
196+
justify-content: center;
197+
align-items: center;
198+
color: ${(props) => props.progresscolor};
199+
200+
.MuiCircularProgress-svg {
201+
width: 5rem;
202+
height: 5rem;
203+
}
204+
`;

0 commit comments

Comments
 (0)