component classes v2

[lemmy-ui.git] / src / shared / components / modlog.tsx

diff --git a/src/shared/components/modlog.tsx b/src/shared/components/modlog.tsx
index 48be10b6245849c0b511bc9ba9137599eb364566..4527800f3f943cbf32d2840b03b76e16b967eac5 100644 (file)
--- a/src/shared/components/modlog.tsx
+++ b/src/shared/components/modlog.tsx
@@ -77,10 +77,10 @@ type View =
   | AdminPurgeCommentView;
 
 type ModlogData = RouteDataResponse<{
-  modlogResponse: GetModlogResponse;
-  communityResponse?: GetCommunityResponse;
-  modUserResponse?: GetPersonDetailsResponse;
-  userResponse?: GetPersonDetailsResponse;
+  res: GetModlogResponse;
+  communityRes: GetCommunityResponse;
+  modUserResponse: GetPersonDetailsResponse;
+  userResponse: GetPersonDetailsResponse;
 }>;
 
 interface ModlogType {
@@ -584,8 +584,8 @@ const Filter = ({
   options: Choice[];
   loading: boolean;
 }) => (
-  <div className="col-sm-6 form-group">
-    <label className="col-form-label" htmlFor={`filter-${filterType}`}>
+  <div className="col-sm-6 mb-3">
+    <label className="mb-2" htmlFor={`filter-${filterType}`}>
       {i18n.t(`filter_by_${filterType}` as NoOptionI18nKeys)}
     </label>
     <SearchableSelect
@@ -662,33 +662,23 @@ export class Modlog extends Component<
 
     // Only fetch the data if coming from another route
     if (FirstLoadService.isFirstLoad) {
-      const {
-        modlogResponse: res,
-        communityResponse: communityRes,
-        modUserResponse,
-        userResponse,
-      } = this.isoData.routeData;
+      const { res, communityRes, modUserResponse, userResponse } =
+        this.isoData.routeData;
 
       this.state = {
         ...this.state,
         res,
+        communityRes,
       };
 
-      if (communityRes?.state === "success") {
-        this.state = {
-          ...this.state,
-          communityRes,
-        };
-      }
-
-      if (modUserResponse?.state === "success") {
+      if (modUserResponse.state === "success") {
         this.state = {
           ...this.state,
           modSearchOptions: [personToChoice(modUserResponse.data.person_view)],
         };
       }
 
-      if (userResponse?.state === "success") {
+      if (userResponse.state === "success") {
         this.state = {
           ...this.state,
           userSearchOptions: [personToChoice(userResponse.data.person_view)],
@@ -752,7 +742,7 @@ export class Modlog extends Component<
     const { actionType, modId, userId } = getModlogQueryParams();
 
     return (
-      <div className="container-lg">
+      <div className="modlog container-lg">
         <HtmlTags
           title={this.documentTitle}
           path={this.context.router.route.match.url}
@@ -766,7 +756,7 @@ export class Modlog extends Component<
             <Icon
               icon="alert-triangle"
               inline
-              classes="mr-sm-2 mx-auto d-sm-inline d-block"
+              classes="me-sm-2 mx-auto d-sm-inline d-block"
             />
             <T i18nKey="modlog_content_warning" class="d-inline">
               #<strong>#</strong>#
@@ -783,34 +773,40 @@ export class Modlog extends Component<
               <span>{i18n.t("modlog")}</span>
             </h5>
           )}
-          <div className="form-row">
-            <select
-              value={actionType}
-              onChange={linkEvent(this, this.handleFilterActionChange)}
-              className="custom-select col-sm-6"
-              aria-label="action"
-            >
-              <option disabled aria-hidden="true">
-                {i18n.t("filter_by_action")}
-              </option>
-              <option value={"All"}>{i18n.t("all")}</option>
-              <option value={"ModRemovePost"}>Removing Posts</option>
-              <option value={"ModLockPost"}>Locking Posts</option>
-              <option value={"ModFeaturePost"}>Featuring Posts</option>
-              <option value={"ModRemoveComment"}>Removing Comments</option>
-              <option value={"ModRemoveCommunity"}>Removing Communities</option>
-              <option value={"ModBanFromCommunity"}>
-                Banning From Communities
-              </option>
-              <option value={"ModAddCommunity"}>Adding Mod to Community</option>
-              <option value={"ModTransferCommunity"}>
-                Transferring Communities
-              </option>
-              <option value={"ModAdd"}>Adding Mod to Site</option>
-              <option value={"ModBan"}>Banning From Site</option>
-            </select>
+          <div className="row mb-2">
+            <div className="col-sm-6">
+              <select
+                value={actionType}
+                onChange={linkEvent(this, this.handleFilterActionChange)}
+                className="form-select"
+                aria-label="action"
+              >
+                <option disabled aria-hidden="true">
+                  {i18n.t("filter_by_action")}
+                </option>
+                <option value={"All"}>{i18n.t("all")}</option>
+                <option value={"ModRemovePost"}>Removing Posts</option>
+                <option value={"ModLockPost"}>Locking Posts</option>
+                <option value={"ModFeaturePost"}>Featuring Posts</option>
+                <option value={"ModRemoveComment"}>Removing Comments</option>
+                <option value={"ModRemoveCommunity"}>
+                  Removing Communities
+                </option>
+                <option value={"ModBanFromCommunity"}>
+                  Banning From Communities
+                </option>
+                <option value={"ModAddCommunity"}>
+                  Adding Mod to Community
+                </option>
+                <option value={"ModTransferCommunity"}>
+                  Transferring Communities
+                </option>
+                <option value={"ModAdd"}>Adding Mod to Site</option>
+                <option value={"ModBan"}>Banning From Site</option>
+              </select>
+            </div>
           </div>
-          <div className="form-row mb-2">
+          <div className="row mb-2">
             <Filter
               filterType="user"
               onChange={this.handleUserChange}
@@ -1002,8 +998,9 @@ export class Modlog extends Component<
       auth,
     };
 
-    let communityResponse: RequestState<GetCommunityResponse> | undefined =
-      undefined;
+    let communityResponse: RequestState<GetCommunityResponse> = {
+      state: "empty",
+    };
 
     if (communityId) {
       const communityForm: GetCommunity = {
@@ -1014,8 +1011,9 @@ export class Modlog extends Component<
       communityResponse = await client.getCommunity(communityForm);
     }
 
-    let modUserResponse: RequestState<GetPersonDetailsResponse> | undefined =
-      undefined;
+    let modUserResponse: RequestState<GetPersonDetailsResponse> = {
+      state: "empty",
+    };
 
     if (modId) {
       const getPersonForm: GetPersonDetails = {
@@ -1026,8 +1024,9 @@ export class Modlog extends Component<
       modUserResponse = await client.getPersonDetails(getPersonForm);
     }
 
-    let userResponse: RequestState<GetPersonDetailsResponse> | undefined =
-      undefined;
+    let userResponse: RequestState<GetPersonDetailsResponse> = {
+      state: "empty",
+    };
 
     if (userId) {
       const getPersonForm: GetPersonDetails = {
@@ -1039,8 +1038,8 @@ export class Modlog extends Component<
     }
 
     return {
-      modlogResponse: await client.getModlog(modlogForm),
-      communityResponse,
+      res: await client.getModlog(modlogForm),
+      communityRes: communityResponse,
       modUserResponse,
       userResponse,
     };