134 lines
3.6 KiB
JavaScript
134 lines
3.6 KiB
JavaScript
import { Box, Button, Card, TextField, Typography } from "@mui/material";
|
||
import React, { useState } from "react";
|
||
import { useDispatch, useSelector } from "react-redux";
|
||
import {addPost} from "./posts.store"
|
||
import moment from "moment";
|
||
import("./index.scss");
|
||
|
||
export default function General(){
|
||
|
||
const posts = useSelector((state) => state.generalposts.posts)
|
||
|
||
return <>
|
||
<Box
|
||
width="100%"
|
||
height="100%"
|
||
display="flex"
|
||
flexDirection="column"
|
||
className="layout"
|
||
gap="10px"
|
||
>
|
||
<Box
|
||
display="flex"
|
||
flexDirection="row"
|
||
gap="10px"
|
||
className="header"
|
||
>
|
||
<Box className="maxcontent">
|
||
<Box>
|
||
<Typography fontSize="2em">
|
||
Assemble
|
||
</Typography>
|
||
</Box>
|
||
</Box>
|
||
</Box>
|
||
<Box
|
||
width="100%"
|
||
height="100%"
|
||
display="flex"
|
||
flexDirection="row"
|
||
className="master"
|
||
gap="10px"
|
||
flexGrow="1"
|
||
pb={1}
|
||
>
|
||
<Box className="rightpanel">
|
||
<Card
|
||
sx={{
|
||
width: "100%",
|
||
height: "100%"
|
||
}}
|
||
>
|
||
|
||
</Card>
|
||
</Box>
|
||
<Box className="middlepanel">
|
||
<CreateNewPost />
|
||
{posts.map(({id,date,context}) => {
|
||
return <PostTemplete
|
||
key={id}
|
||
id={id}
|
||
date={date}
|
||
context={context}
|
||
/>
|
||
})}
|
||
</Box>
|
||
<Box className="leftpanel">
|
||
<Card
|
||
sx={{
|
||
width: "100%",
|
||
height: "100%"
|
||
}}
|
||
>
|
||
|
||
</Card>
|
||
</Box>
|
||
</Box>
|
||
</Box>
|
||
</>
|
||
};
|
||
|
||
function CreateNewPost()
|
||
{
|
||
const dispatch = useDispatch()
|
||
const [text, setText] = useState("");
|
||
|
||
function clickEvent()
|
||
{
|
||
dispatch(addPost(text));
|
||
setText("");
|
||
}
|
||
|
||
return <Card sx={{p:1}}>
|
||
<Box>
|
||
<TextField
|
||
multiline
|
||
fullWidth
|
||
rows={2}
|
||
placeholder="Yeni bir gönderi yayımlayın...."
|
||
value={text}
|
||
onChange={(event) => setText(event.target.value) }
|
||
/>
|
||
</Box>
|
||
<Box mt={1}>
|
||
<Button
|
||
color="primary"
|
||
variant="contained"
|
||
onClick={clickEvent}
|
||
>
|
||
Yayınla
|
||
</Button>
|
||
</Box>
|
||
</Card>
|
||
}
|
||
|
||
function PostTemplete({id, date, context})
|
||
{
|
||
return <Card sx={{p:1}} title={id}>
|
||
<Box>
|
||
<Typography fontSize="0.7em">
|
||
Abdussamed ULUTAŞ
|
||
</Typography>
|
||
</Box>
|
||
<Box py={1}>
|
||
<Typography component="pre">
|
||
{context}
|
||
</Typography>
|
||
</Box>
|
||
<Box>
|
||
<Typography fontSize="0.7em" color="#9b9b9b" title={moment(date).format("HH:mm:ss DD/MM/YYYY")}>
|
||
{moment(date).locale("tr").fromNow(false)} yayımladı
|
||
</Typography>
|
||
</Box>
|
||
</Card>
|
||
} |