Convert logs page to TypeScript

package.json

@@ -8,7 +8,7 @@
   "dependencies": {
     "@babel/core": "^7.16.0",
     "@fontsource/inter": "^4.5.1",
-    "@free-draw/moderation-client": "^0.6.2",
+    "@free-draw/moderation-client": "^0.6.7",
     "@mdi/js": "^5.9.55",
     "@mdi/react": "^1.5.0",
     "@parcel/config-default": "^2.0.1",

src/components/Dropdown.tsx

@@ -102,15 +102,15 @@ function Dropdown({ options, currentOptionId, placeholder, index, onSelection }:
 	options: DropdownOption[],
 	currentOptionId: any,
 	placeholder: string,
-	index: number,
+	index?: number,
 	onSelection: (id: any) => void,
 }) {
 	const [ open, setOpen ] = React.useState<boolean>(false)
 
 	const currentOption = options.find(option => option.id === currentOptionId)
 
 	return (
-		<DropdownContainerElement zIndex={100 - index}>
+		<DropdownContainerElement zIndex={index ? 100 - index : 0}>
 			<DropdownElement>
 				{
 					open ? (

src/components/fields.tsx

@@ -24,12 +24,14 @@ const FieldValueElement = styled.span<{
 	opacity: ${props => props.isEmpty ? "50%" : "100%"};
 `
 
-export function Field({ name, value, isInline, isEmpty }: {
+type FieldOptions = {
 	name: string,
 	value: string,
 	isInline?: boolean,
 	isEmpty?: boolean,
-}) {
+}
+
+export function Field({ name, value, isInline, isEmpty }: FieldOptions) {
 	return (
 		<FieldElement isInline={isInline}>
 			<FieldNameElement>{name}</FieldNameElement>
@@ -59,6 +61,8 @@ export function FieldGroup(props: {
 }
 
 export {
+	FieldOptions,
+
 	FieldElement,
 	FieldNameElement,
 	FieldValueElement,

src/enum/SortMethod.ts

@@ -0,0 +1,6 @@
+enum SortMethod {
+	TIME_ASCENDING = "TIME_ASCENDING",
+	TIME_DESCENDING = "TIME_DESCENDING",
+}
+
+export default SortMethod

src/pages/Logs/Log.jsx → src/pages/Logs/Log.tsx

@@ -1,15 +1,13 @@
 import React from "react"
 import styled from "styled-components"
+import { Field, FieldGroup } from "../../components/fields"
+import TextButton from "../../components/TextButton"
+import colors from "../../presets/colors"
+import Arrow from "../../assets/arrow.svg"
+import logTypes, { LogButtonOptions, LogFieldOptions } from "./logTypes"
+import { Log, LogTypeData, Moderator } from "@free-draw/moderation-client"
 import day from "dayjs"
-
-import { Field, FieldGroup } from "/src/components/fields"
-import TextButton from "/src/components/TextButton"
-
-import colors from "/src/presets/colors"
-
-import Arrow from "/src/assets/arrow.svg"
-
-import * as logTypes from "./logTypes"
+import "dayjs/plugin/relativeTime"
 
 const LogExtendedDetailsElement = styled.div`
 	padding: 4px 20px 16px;
@@ -26,7 +24,10 @@ const LogExtendedDetailsButtonsElement = styled.div`
 	justify-content: flex-end;
 `
 
-function LogExtendedDetails({ fields, buttons }) {
+function LogExtendedDetails({ fields, buttons }: {
+	fields: LogFieldOptions[],
+	buttons: LogButtonOptions[],
+}) {
 	fields = fields.filter(fieldData => fieldData !== null)
 	buttons = buttons.filter(buttonData => buttonData !== null)
 
@@ -111,21 +112,25 @@ const LogArrowContainerElement = styled.div`
 	max-height: 12px;
 `
 
-const LogArrowElement = styled(Arrow)`
+const LogArrowElement = styled(Arrow)<{
+	isOpen: boolean,
+}>`
 	color: #828282;
 	max-height: 12px;
 
-	${props => props.open ? "transform: rotate(90deg)" : ""};
+	${props => props.isOpen ? "transform: rotate(90deg)" : ""};
 `
 
-function Log({ log, data, moderator }) {
+function LogsLog({ log, moderator, data }: {
+	log: Log,
+	moderator: Moderator,
+	data: LogTypeData[keyof LogTypeData],
+}) {
 	const logType = logTypes[log.type]
-
-	const { color, text, fields, buttons } = logType({
+	const { color, text, fields, buttons } = logType(
 		data,
-		moderator,
-		source: <LogTextSourceElement>{moderator.name}</LogTextSourceElement>,
-	})
+		<LogTextSourceElement>{moderator.name}</LogTextSourceElement>
+	)
 
 	const [ open, setOpen ] = React.useState(false)
 
@@ -143,7 +148,7 @@ function Log({ log, data, moderator }) {
 					{day().to(day(log.time))}
 				</LogTimeElement>
 				<LogArrowContainerElement>
-					<LogArrowElement open={open} />
+					<LogArrowElement isOpen={open} />
 				</LogArrowContainerElement>
 			</LogDetailsElement>
 			{
@@ -165,4 +170,4 @@ function Log({ log, data, moderator }) {
 	)
 }
 
-export default Log
+export default LogsLog

src/pages/Logs/Options.jsx → src/pages/Logs/Options.tsx

@@ -1,6 +1,8 @@
 import React from "react"
 import styled from "styled-components"
-import Dropdown from "/src/components/Dropdown"
+import Dropdown from "../../components/Dropdown"
+import { LogType } from "@free-draw/moderation-client"
+import SortMethod from "../../enum/SortMethod"
 
 const OptionsGroupElement = styled.div`
 	display: flex;
@@ -22,7 +24,10 @@ const OptionsGroupContentsElement = styled.div`
 	margin-top: 12px;
 `
 
-function OptionsGroup({ name, children }) {
+function OptionsGroup({ name, children }: {
+	name: React.ReactNode,
+	children?: React.ReactNode,
+}) {
 	return (
 		<OptionsGroupElement>
 			<OptionsGroupLabelElement>{name}</OptionsGroupLabelElement>
@@ -41,7 +46,12 @@ const OptionsElement = styled.div`
 	margin-right: 20px;
 `
 
-function Options({ sort, setSort, filter, setFilter }) {
+function Options({ sort, setSort, filter, setFilter }: {
+	sort: SortMethod,
+	setSort: (sort: SortMethod) => void,
+	filter: LogType | null,
+	setFilter: (filter: LogType) => void,
+}) {
 	return (
 		<OptionsElement>
 			<OptionsGroup name="Sort">
@@ -50,6 +60,7 @@ function Options({ sort, setSort, filter, setFilter }) {
 						{ id: "timeDescending", name: "Newest" },
 						{ id: "timeAscending", name: "Oldest" },
 					]}
+					placeholder="Sort"
 					currentOptionId={sort}
 					onSelection={setSort}
 				/>
@@ -60,18 +71,19 @@ function Options({ sort, setSort, filter, setFilter }) {
 						{ id: null, name: "All" },
 
 						{ id: "CREATE_ACTION", name: "Create Action" },
-						{ id: "DISCARD_ACTION_BY_ID", name: "Discard Action (by ID)" },
-						{ id: "DISCARD_ACTION_BY_TYPE", name: "Discard Action (by type)" },
+						{ id: "DELETE_ACTION", name: "Delete Action" },
+						{ id: "DELETE_ACTIONS_BULK", name: "Delete Actions Bulk" },
 
 						{ id: "CREATE_MODERATOR", name: "Create Moderator" },
 						{ id: "DELETE_MODERATOR", name: "Delete Moderator" },
-						{ id: "CREATE_MODERATOR_ACCOUNT", name: "Create Moderator Account" },
-						{ id: "DELETE_MODERATOR_ACCOUNT", name: "Delete Moderator Account" },
+						{ id: "LINK_MODERATOR_ACCOUNT", name: "Link Moderator Account" },
+						{ id: "UNLINK_MODERATOR_ACCOUNT", name: "Unlink Moderator Account" },
 						{ id: "UPDATE_MODERATOR", name: "Update Moderator" },
 
 						{ id: "ACCEPT_REPORT", name: "Accept Report" },
 						{ id: "DECLINE_REPORT", name: "Decline Report" },
 					]}
+					placeholder="Filter"
 					currentOptionId={filter}
 					onSelection={setFilter}
 				/>