Create the discussion board and the option to add a new discussion #44
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,24 @@ | ||
| import { useTheme } from '@mui/material/styles'; | ||
| import { Button } from '@mui/material'; | ||
|
|
||
| export const ActiveControl = ({ props, onOpen}) => { | ||
| const theme = useTheme(); | ||
|
|
||
| return ( | ||
| <Button | ||
| onClick={onOpen} | ||
| sx={{ | ||
| fontFamily: 'Open Sans', | ||
| backgroundColor: theme.palette.text.link, | ||
| borderRadius: '182.5px', | ||
| paddingTop:0.2, | ||
| paddingBottom:0.2, | ||
| color:'white', | ||
| paddingRight:2.4, | ||
| paddingLeft:2.4 | ||
|
Member
There was a problem hiding this comment. It seems that you've defined the padding properties in multiple lines. To improve readability and make the code more concise, combine them into a single line. |
||
| }} | ||
| > | ||
| {props.title} | ||
| </Button> | ||
| ); | ||
| }; | ||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,56 @@ | ||
| import React from 'react'; | ||
| import { Button, Typography, useTheme } from '@mui/material'; | ||
| import { useNavigate } from 'react-router'; | ||
|
|
||
| const typographyStyle = { | ||
|
Member
There was a problem hiding this comment. Great job using global reusable code! This aligns with the DRY principle and enhances code readability and maintainability. Keep it up! |
||
| fontFamily: 'Open Sans', | ||
| marginLeft: 4, | ||
| marginRight: 4, | ||
| fontWeight: 700, | ||
| letterSpacing: 1.3, | ||
| fontSize: '1.42em', | ||
|
|
||
|
Member
There was a problem hiding this comment. Please remove unnecessary line. |
||
| }; | ||
|
|
||
| export const Discussion = ({ props }) => { | ||
|
|
||
| const theme = useTheme(); | ||
|
|
||
|
Member
There was a problem hiding this comment. Please remove unnecessary line. |
||
| const navigate = useNavigate(); | ||
|
|
||
| const hundleOnClick = () => { | ||
| navigate(`?id=${props.id}`); | ||
| }; | ||
|
|
||
|
|
||
| return ( | ||
|
|
||
| <Button variant="contained" color="primary" onClick={hundleOnClick} | ||
|
Member
There was a problem hiding this comment. The color definition is set later in the code, so it should be removed from here. |
||
| sx={{ | ||
| display: 'flex', | ||
| justifyContent: 'space-between', | ||
| width: 947, | ||
| height: 74, | ||
| marginTop: 3, | ||
| padding: 1.5, | ||
| color: theme.palette.text.primary, | ||
| background: `linear-gradient( | ||
| to right top, | ||
| ${theme.palette.background.default} 50%, | ||
| ${theme.palette.primary.dark})`, | ||
| borderRadius: '23px', | ||
| border: `solid 1.5px ${theme.palette.grey[100]}` | ||
| }}> | ||
| <Typography sx={typographyStyle}> | ||
| {props.comments[props.comments.length - 1].date.toLocaleDateString()} :תגובה אחרונה | ||
| </Typography> | ||
| <Typography sx={{ ...typographyStyle, marginLeft: -25, direction: 'rtl' }}> | ||
|
Member
There was a problem hiding this comment. Each property should be written on a separate line for better readability. |
||
| {props.comments.length} תגובות | ||
| </Typography> | ||
| <Typography sx= | ||
| {{ ...typographyStyle, fontSize: '2.3em' }}> | ||
|
Member
There was a problem hiding this comment. Each property should be written on a separate line for better readability. |
||
| {props.name} | ||
| </Typography> | ||
| </Button> | ||
| ); | ||
| }; | ||
|
Member
There was a problem hiding this comment. Delete the array and uncomment the code that retrieves data from the API |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,136 @@ | ||
| import { useState, useRef } from 'react'; | ||
| // import sendRequest from '../utils/api/api'; | ||
| import { Box, useTheme } from '@mui/material'; | ||
| import { PageTitle } from './PageTitle.jsx'; | ||
| import { Discussion } from './Discussion.jsx'; | ||
| import { ActiveControl } from './ActiveControl.jsx'; | ||
| import { NewDiscussion } from './NewDiscussion.jsx'; | ||
|
|
||
| export const DiscussionBoard = () => { | ||
| const theme = useTheme(); | ||
|
|
||
| const [openDialog, setOpenDialog] = useState(false); | ||
| const newDiscussionRef = useRef(null); | ||
|
|
||
| const Open = () => { | ||
| setOpenDialog(true); | ||
| if (newDiscussionRef.current) { | ||
| newDiscussionRef.current.scrollIntoView({ behavior: 'smooth' }); | ||
| } | ||
| }; | ||
| const onclose = ()=>{ | ||
| setOpenDialog(false); | ||
| }; | ||
|
|
||
| // const allDiscussions = await sendRequest('/subject' , 'GET'); | ||
| // setSubjects(allDiscussions); | ||
| const allDiscussions = [ | ||
| { id: '123', name: 'ressume', comments: [{ date: new Date() }] }, | ||
| { id: '123', name: 'salary', comments: [{ date: new Date() }] }, | ||
| { id: '123', name: 'activity', comments: [{ date: new Date() }] }, | ||
| { id: '123', name: 'ressume', comments: [{ date: new Date() }] }, | ||
| { id: '123', name: 'salary', comments: [{ date: new Date() }] }, | ||
| { id: '123', name: 'activity', comments: [{ date: new Date() }] }, | ||
| { id: '123', name: 'salary', comments: [{ date: new Date() }] }, | ||
| { id: '123', name: 'activity', comments: [{ date: new Date() }] }, | ||
| ]; | ||
|
|
||
| // return ( | ||
| // <> | ||
| // <Container | ||
| // sx={{ | ||
| // // position: 'relative', | ||
| // // display:'flex', | ||
| // // flexDirection:'column', | ||
| // backgroundColor: theme.palette.background.default | ||
| // }} | ||
| // > | ||
| // <Box sx={{ | ||
| // width:'5%', | ||
| // position: 'absolute', | ||
| // top: 0, | ||
| // height:1, | ||
| // left: 300, | ||
| // }}> | ||
| // <PageTitle props={{ title: 'יצירת דיון חדש'} } | ||
| // sx={{ | ||
| // textAlign: 'center', | ||
| // width:'100%', | ||
| // }}></PageTitle> | ||
| // </Box> | ||
| // <ActiveControl props={{ title: 'יצירת דיון חדש' }} onOpen={Open}></ActiveControl> | ||
| // <Box sx={{ | ||
| // display: 'flex', | ||
| // flexDirection: 'column', | ||
| // justifyContent: 'space-evenly', | ||
| // }}> | ||
| // {allDiscussions.map((discussion) => ( | ||
| // <Discussion key={discussion.id} props={discussion}></Discussion> | ||
| // ))} | ||
| // </Box> | ||
|
|
||
| // <ActiveControl props={{ title: 'יצירת דיון חדש' }} onOpen={Open}></ActiveControl> | ||
| // </Container > | ||
| // </> | ||
| // ); | ||
| return ( | ||
| <Box | ||
| sx={{ | ||
| backgroundColor: theme.palette.background.default, // Set the background color to dark | ||
| minHeight: '88.9vh', | ||
| padding: '20px', | ||
| overflow: 'hidden', | ||
| position: 'relative', | ||
| }} | ||
| > | ||
| <Box sx={{ | ||
| height: '20%', | ||
| background: `radial-gradient(circle, | ||
| ${theme.palette.primary.light} 0%, ${theme.palette.background.default} 100%)`, | ||
| backgroundPosition: 'center', | ||
| }}> | ||
| <Box | ||
| sx={{ | ||
| margin: '0 auto', | ||
| padding: '10px', | ||
| position: 'absolute', | ||
| top: 0, | ||
| // left: '50%', | ||
| transform: 'translateX(-50%)', | ||
| // zIndex: -1, | ||
| width: '100%', | ||
| position: 'absolute', | ||
| // top: '-32%', | ||
| left: '50%', | ||
| // width: '40%', | ||
| height: '30%', | ||
| display: 'flex', | ||
| alignItems: 'center', | ||
| justifyContent: 'center', | ||
| textShadow: ` | ||
| 0 0 50px #49ACEF, | ||
| 0 0 100px #49ACEF, | ||
| 0 0 200px #49ACEF, | ||
| 0 0 300px #49ACEF`, | ||
| }} | ||
| > | ||
|
Member
There was a problem hiding this comment. Please update the textShadow property to ensure proper indentation and readability |
||
| <PageTitle props={{ title: 'דיונים' }} /> | ||
| </Box> | ||
| </Box> | ||
|
|
||
|
|
||
| <ActiveControl props={{ title: 'יצירת דיון חדש' }} onOpen={Open} sx={{ | ||
| // position: 'absolute', top: '10%' | ||
| }}></ActiveControl> | ||
|
Member
There was a problem hiding this comment. Each property should be written on a separate line for better readability. |
||
| <Box sx={{ marginTop: 3 }}> | ||
| {allDiscussions.map((discussion, index) => ( | ||
| <Discussion key={index} props={discussion} /> | ||
| ))} | ||
| </Box> | ||
| <Box ref={newDiscussionRef}> | ||
| <NewDiscussion open={openDialog} onClose={() => setOpenDialog(false) || onclose} /> | ||
| </Box> | ||
| </Box> | ||
| ); | ||
|
|
||
| }; | ||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,89 @@ | ||
| import { Box, TextField, Typography, useTheme } from '@mui/material'; | ||
| import { IconButton } from '@mui/material'; | ||
| import CloseIcon from '@mui/icons-material/Close'; | ||
| import { ActiveControl } from './ActiveControl'; | ||
|
|
||
| export const NewDiscussion = ({ onClose }) => { | ||
| const theme = useTheme(); | ||
|
|
||
| const typhographyStyle = { | ||
| color: theme.palette.text.primary, | ||
| fontFamily: 'Open Sans', | ||
| fontSize: '1.67vw', | ||
| m: 2, | ||
| }; | ||
|
|
||
| const textFieldStyle = { | ||
| width: '80%', | ||
| border: `1px solid ${theme.palette.grey[100]}`, | ||
| borderRadius: 1.5 | ||
| }; | ||
|
|
||
| return ( | ||
| <Box | ||
| sx={{ | ||
| border: `0.2vw solid ${theme.palette.primary.light}`, | ||
| borderRadius: '39px', | ||
| // height:663, | ||
|
Member
There was a problem hiding this comment. To maintain clean and maintainable code, could you please check if this code is still needed? If it's required, please uncomment it. If not, it would be best to remove it entirely. |
||
| width: '49.89%', | ||
| mt: 15, | ||
| boxShadow: 2, | ||
| textAlign: 'center', | ||
|
|
||
| }} | ||
| > | ||
| <IconButton | ||
| onClick={onClose} | ||
| sx={{ | ||
| width: '100%', | ||
| display: 'flex', | ||
| justifyContent: 'flex-end', | ||
| mt:'1%', | ||
| color: theme.palette.text.primary, | ||
| }} | ||
| > | ||
| <CloseIcon /> | ||
| </IconButton> | ||
| <Typography variant="h6" | ||
| sx={{ | ||
| color: theme.palette.primary.light, | ||
| fontFamily: 'Open Sans', | ||
| fontWeight: 700, | ||
| fontSize: '2.08vw', | ||
| mt: 7.5 | ||
| }}> | ||
| יצירת דיון חדש | ||
| </Typography> | ||
| <Typography | ||
| sx={{ | ||
| ...typhographyStyle, ml: '36.4vw' | ||
|
Member
There was a problem hiding this comment. Each property should be written on a separate line for better readability. |
||
| }}> | ||
| כותרת | ||
| </Typography> | ||
| <TextField | ||
| size='small' | ||
| sx={{ | ||
| ...textFieldStyle | ||
| }} | ||
| /> | ||
| <Typography | ||
| sx={{ | ||
| ...typhographyStyle, ml: '32vw' | ||
|
Member
There was a problem hiding this comment. Each property should be written on a separate line for better readability. |
||
| }}> | ||
| תוכן ההודעה | ||
| </Typography> | ||
| <TextField | ||
| multiline | ||
| rows={7} | ||
| className="css-16wblaj-MuiInputBase-input-MuiOutlinedInput" | ||
| sx={{ | ||
| ...textFieldStyle, mb: 3 | ||
|
Member
There was a problem hiding this comment. Each property should be written on a separate line for better readability. |
||
| }} | ||
| /> | ||
| <Box sx={{ mb: 5, mr: 87.5 }}> | ||
| <ActiveControl props={{ title: 'צור' }}></ActiveControl> | ||
| </Box> | ||
| </Box> | ||
| ); | ||
| }; | ||
|
|
||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Use the ThemeColor Object.