Skip to content

Commit

Permalink
reformatted code and spacing
Browse files Browse the repository at this point in the history
  • Loading branch information
Max Handke committed Jan 16, 2024
1 parent 549e889 commit 964dcaa
Show file tree
Hide file tree
Showing 25 changed files with 251 additions and 996 deletions.
8 changes: 1 addition & 7 deletions src/App.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,23 +5,17 @@ import refreshApi from "./services/refreshApi";
import "./css/App.scss"
import Footer from "./components/Footer";
import {ConfigProvider, theme} from "antd";

function App() {
const {darkAlgorithm} = theme;
return (

<ConfigProvider theme={{algorithm: darkAlgorithm, hashed: false}}>
<AuthProvider
authName={"_auth"} authType={"cookie"}
refresh={refreshApi}
>
refresh={refreshApi}>
<RoutesComponent/>

<Footer/>

</AuthProvider>
</ConfigProvider>

);
}

Expand Down
23 changes: 4 additions & 19 deletions src/components/AdminPanel.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,38 +8,23 @@ import {useQuery} from "@tanstack/react-query";
const AdminPanel = () => {

const authHeader = useAuthHeader()




const usersQuery = useQuery({
queryKey: ["users"],
queryFn: async () => {
const res = await axios.get(import.meta.env.VITE_BACKEND_URL + "/user",{
const res = await axios.get(import.meta.env.VITE_BACKEND_URL + "/user", {
headers: {
"Authorization": authHeader()
}
})


return await res.data
},
keepPreviousData:true
keepPreviousData: true
})



return (
<div>
<h2 className="font-heading">Adminpanel</h2>


{usersQuery.isLoading ? <Loading></Loading>: <AdminPanelTabel user={usersQuery.data} ></AdminPanelTabel>
}


<h2 className="font-heading">Adminpanel</h2>
{usersQuery.isLoading ? <Loading></Loading> : <AdminPanelTabel user={usersQuery.data}></AdminPanelTabel>}
</div>
);
};

export default AdminPanel;
79 changes: 28 additions & 51 deletions src/components/AdminPanelTabel.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,6 @@ import {Button, Space, Table, Tag, Tooltip, Form, Input, Alert, Spin} from "antd
import {DeleteOutlined, EditOutlined, SaveOutlined} from "@ant-design/icons";
import {useQueryClient} from "@tanstack/react-query";


const AdminPanelTabel = (props) => {
const authHeader = useAuthHeader()
const authUser = useAuthUser()
Expand All @@ -15,8 +14,8 @@ const AdminPanelTabel = (props) => {
const [response, setResponse] = useState(false)
const [error, setError] = useState("")
const queryClient = useQueryClient()
const [loading,setLoading] = useState(false)
const [loadingId,setLoadingId] =useState(0)
const [loading, setLoading] = useState(false)
const [loadingId, setLoadingId] = useState(0)
const enumRoles = ["ADMIN", "USER", "ADMIN,USER", "USER,ADMIN"]
const columns = [
{
Expand Down Expand Up @@ -55,8 +54,7 @@ const AdminPanelTabel = (props) => {
message: "Please enter correct user roles",
type: "enum",
enum: enumRoles
}]}
>
}]}>
<Input/>
</Form.Item>
} else {
Expand All @@ -65,8 +63,6 @@ const AdminPanelTabel = (props) => {
{role.name}
</Tag>
))}</>


}
}
},
Expand All @@ -76,40 +72,36 @@ const AdminPanelTabel = (props) => {
render: (_, user) => (
<Space size="small">
{editState && user.id === editingRow ? <Tooltip title="save">
<Button htmlType="submit" type="primary" shape="circle" icon={loading ?<Spin/>:<SaveOutlined/>}
onClick={onFinish}/>
</Tooltip>

: <Tooltip title="edit">
<Button type="primary" shape="circle" disabled={(user.userName === authUser().userName)} icon={<EditOutlined/>}
onClick={() => {
setResponse(false)
setError("")
setEditingRow(user.id);
setEditState(true)
form.setFieldsValue({
userName: user.userName,
roles: user.roles.map((role) => role.name).toString()
});
}}
/>
</Tooltip>}

<Button htmlType="submit" type="primary" shape="circle"
icon={loading ? <Spin/> : <SaveOutlined/>}
onClick={onFinish}/>
</Tooltip> : <Tooltip title="edit">
<Button type="primary" shape="circle" disabled={(user.userName === authUser().userName)}
icon={<EditOutlined/>}
onClick={() => {
setResponse(false)
setError("")
setEditingRow(user.id);
setEditState(true)
form.setFieldsValue({
userName: user.userName,
roles: user.roles.map((role) => role.name).toString()
});
}}/>
</Tooltip>}
<Tooltip title="delete">
<Button danger type="primary" shape="circle" icon={loading && loadingId===user.id.toString() ? <Spin/> :<DeleteOutlined/>}
<Button danger type="primary" shape="circle"
icon={loading && loadingId === user.id.toString() ? <Spin/> : <DeleteOutlined/>}
disabled={(user.userName === authUser().userName)}
onClick={(e) => deleteUser(user,e)}
id={user.id.toString()}
/>
onClick={(e) => deleteUser(user, e)}
id={user.id.toString()}/>
</Tooltip>

</Space>
)
}
]


function deleteUser(user,event) {
function deleteUser(user, event) {
setLoading(true)
setLoadingId(event.target.id)
setResponse(false)
Expand All @@ -120,20 +112,15 @@ const AdminPanelTabel = (props) => {
}
}).then((res) => {
setLoading(false)
queryClient.invalidateQueries({queryKey:["users"]})
//queryClient.setQueryData(["users"],(users)=>{return users.filter((oldUser)=>{
// return oldUser.id !== user.id
// })})
queryClient.invalidateQueries({queryKey: ["users"]})
}, (err) => {
setLoading(false)
setError(err)
})
}


function onFinish() {
setLoading(true)

form.validateFields().then((values) => {
console.log(values)
let roles;
Expand All @@ -144,7 +131,6 @@ const AdminPanelTabel = (props) => {
return {"name": role, "id": role === "USER" ? "2" : "1"}
})
}

axios.put(import.meta.env.VITE_BACKEND_URL + "/user/" + editingRow, {
roles: roles,
userName: values.userName
Expand All @@ -153,38 +139,29 @@ const AdminPanelTabel = (props) => {
"Authorization": authHeader()
}
}).then((res) => {
//Todo Validate Inputs Form
console.log(res)
setResponse(true)
setEditingRow(null);
setEditState(false)
setLoading(false)
queryClient.invalidateQueries({queryKey:["users"]})
queryClient.invalidateQueries({queryKey: ["users"]})
}, (err) => {
console.log(err)
setLoading(false)
setError(err.response.data)
setEditingRow(null);
setEditState(false)

}).catch((errorInfo) => {
console.log('errorInfo ...', errorInfo);
});
})

}


return (<>
<div className="mb-3">
{response && <Alert message="Success" type="success" showIcon/>}
{error !== "" && <Alert message={error.toString()} type="error" showIcon/>}</div>
<Form form={form}>


<Table dataSource={props.user} columns={columns}>

</Table>
<Table dataSource={props.user} columns={columns}></Table>
</Form></>
);
};
Expand Down
60 changes: 12 additions & 48 deletions src/components/CommentCard.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,15 +7,11 @@ import {Card, Spin} from "antd";
import {DeleteOutlined, EditOutlined} from "@ant-design/icons";
import {useMutation, useQueryClient} from "@tanstack/react-query";


function EventCard(props) {


const sanitizedData = () => (
{
__html: DOMPurify.sanitize(props.comment.content)
})

const date = new Date(props.comment.created).toLocaleDateString("de-DE")
const time = new Date(props.comment.created).toLocaleTimeString()
const authUser = useAuthUser()
Expand All @@ -28,72 +24,42 @@ function EventCard(props) {
owner = props.comment.owner.userName === authUser().userName
admin = authUser().roles.some((e) => e.name === "ADMIN")
}
const [loading,setLoading] = useState(false)

const [loading, setLoading] = useState(false)
const query = useQueryClient()


const mutation = useMutation(({
mutationFn: ()=>deleteComment(),
onSuccess: ()=>query.setQueryData(["comments",props.comment.event.id.toString()],(oldComments)=>{
return oldComments.filter((oldComment)=>{
mutationFn: () => deleteComment(),
onSuccess: () => query.setQueryData(["comments", props.comment.event.id.toString()], (oldComments) => {
return oldComments.filter((oldComment) => {
return oldComment.id !== props.comment.id
})
}),
onSettled:()=> {
onSettled: () => {
setLoading(false)
},
onError:(err)=> {
onError: (err) => {
setLoading(false)
console.log(err)
}
}))

const openEditFunction = () => {
setEditState(true)
}
const deleteComment = async () => {
setLoading(true)
setLoading(true)
return axios.delete(import.meta.env.VITE_BACKEND_URL + "/api/comment/" + props.comment.id, {
headers: {
"Authorization": authHeader()
}
}).then((res) => res.data)
}

return (

<>
{/* <div className="card rounded-5">
<div className="card-body">
{!editState && <div className="card-text" dangerouslySetInnerHTML={sanitizedData()}/>}
{editState &&
<CommentEdit commentId={props.comment.id} html={DOMPurify.sanitize(props.comment.content)}
setToggleRefresh={props.setToggleRefresh}
setEditState={setEditState}></CommentEdit>
}
</div>
</div>
<div className="d-flex justify-content-between">
<div>
geschrieben von {props.comment.owner.userName} am {date} um {time}</div>
<div>
{(owner|| admin) && !editState &&
<button onClick={openEditFunction}><i className="bi bi-pencil-square"></i></button>}
{(owner||admin) && <button onClick={deleteComment}><i className="bi bi-trash"></i></button>}
</div>
</div>
<br/>*/}
return (<>
<Card className="mb-1 bg-background-800 cursor-default" hoverable>
{!editState && <div className="text-text font-body" dangerouslySetInnerHTML={sanitizedData()}/>}
{editState &&
<CommentEdit commentId={props.comment.id} html={DOMPurify.sanitize(props.comment.content)}
setToggleRefresh={props.setToggleRefresh}
setEditState={setEditState}> eventId={props.comment.event.id}</CommentEdit>
}
setEditState={setEditState}> eventId={props.comment.event.id}</CommentEdit>}
</Card>
<div className="text-text font-body pb-2">
<div className="md:flex md:flex-row md:justify-between grid-cols-2 grid">
Expand All @@ -103,10 +69,8 @@ setLoading(true)
{(owner || admin) && !editState &&
<button className="bg-none bg-inherit border-none p-0 outline-inherit"
onClick={openEditFunction}>
<div
className="select-none cursor-pointer relative rounded px-5 py-2.5 overflow-hidden group bg-secondary-500 hover:bg-gradient-to-r hover:from-secondary-500 hover:to-secondary-500 text-text hover:ring-2 hover:ring-offset-2 hover:ring-secondary-400 transition-all ease-out duration-300 ml-1">
<div
className="absolute right-0 w-8 h-32 -mt-12 transition-all duration-1000 transform translate-x-12 bg-white opacity-10 rotate-12 group-hover:-translate-x-40 ease"></div>
<div className="select-none cursor-pointer relative rounded px-5 py-2.5 overflow-hidden group bg-secondary-500 hover:bg-gradient-to-r hover:from-secondary-500 hover:to-secondary-500 text-text hover:ring-2 hover:ring-offset-2 hover:ring-secondary-400 transition-all ease-out duration-300 ml-1">
<div className="absolute right-0 w-8 h-32 -mt-12 transition-all duration-1000 transform translate-x-12 bg-white opacity-10 rotate-12 group-hover:-translate-x-40 ease"></div>
<div className="relative font-body"><EditOutlined/></div>
</div>
</button>}
Expand All @@ -117,7 +81,7 @@ setLoading(true)
className="select-none cursor-pointer relative rounded px-5 py-2.5 overflow-hidden group bg-red-500 hover:bg-gradient-to-r hover:from-white-500 hover:to-white-500 text-text hover:ring-2 hover:ring-offset-2 hover:ring-white-400 transition-all ease-out duration-300 ml-1">
<div
className="absolute right-0 w-8 h-32 -mt-12 transition-all duration-1000 transform translate-x-12 bg-white opacity-10 rotate-12 group-hover:-translate-x-40 ease"></div>
<div className="relative font-body">{loading ? <Spin></Spin> :<DeleteOutlined/>}
<div className="relative font-body">{loading ? <Spin></Spin> : <DeleteOutlined/>}

</div>
</div>
Expand Down
Loading

0 comments on commit 964dcaa

Please sign in to comment.