From d7511f88ac77cce3d9a6433d4eb17eeec7744aa9 Mon Sep 17 00:00:00 2001
From: moonrailgun <moonrailgun@gmail.com>
Date: Sat, 7 Aug 2021 15:33:08 +0800
Subject: [PATCH] refactor: style problem and async request

---
 web/src/routes/Main/Content/Group/Sidebar.tsx  |  2 +-
 .../Content/Personal/Friends/FriendList.tsx    | 18 +++++++++++-------
 web/tailwind.config.js                         |  1 +
 3 files changed, 13 insertions(+), 8 deletions(-)

diff --git a/web/src/routes/Main/Content/Group/Sidebar.tsx b/web/src/routes/Main/Content/Group/Sidebar.tsx
index 00e29d11..07690321 100644
--- a/web/src/routes/Main/Content/Group/Sidebar.tsx
+++ b/web/src/routes/Main/Content/Group/Sidebar.tsx
@@ -61,7 +61,7 @@ const GroupPanelItem: React.FC<{
         className={clsx(
           'w-full hover:bg-white hover:bg-opacity-20 cursor-pointer text-white rounded px-1 h-8 flex items-center text-base group',
           {
-            'bg-opacity-20': isActive,
+            'bg-white bg-opacity-20': isActive,
           }
         )}
       >
diff --git a/web/src/routes/Main/Content/Personal/Friends/FriendList.tsx b/web/src/routes/Main/Content/Personal/Friends/FriendList.tsx
index 7dd7b996..a20c1691 100644
--- a/web/src/routes/Main/Content/Personal/Friends/FriendList.tsx
+++ b/web/src/routes/Main/Content/Personal/Friends/FriendList.tsx
@@ -1,5 +1,10 @@
-import React, { useCallback } from 'react';
-import { createDMConverse, t, useAppSelector } from 'tailchat-shared';
+import React from 'react';
+import {
+  createDMConverse,
+  t,
+  useAppSelector,
+  useAsyncRequest,
+} from 'tailchat-shared';
 import { UserListItem } from '@/components/UserListItem';
 import { IconBtn } from '@/components/IconBtn';
 import { Tooltip } from 'antd';
@@ -12,11 +17,10 @@ export const FriendList: React.FC = React.memo(() => {
   const friends = useAppSelector((state) => state.user.friends);
   const history = useHistory();
 
-  const handleCreateConverse = useCallback(
-    (targetId: string) => {
-      createDMConverse(targetId).then((converse) => {
-        history.push(`/main/personal/converse/${converse._id}`);
-      });
+  const [, handleCreateConverse] = useAsyncRequest(
+    async (targetId: string) => {
+      const converse = await createDMConverse(targetId);
+      history.push(`/main/personal/converse/${converse._id}`);
     },
     [history]
   );
diff --git a/web/tailwind.config.js b/web/tailwind.config.js
index c49c0599..54572d91 100644
--- a/web/tailwind.config.js
+++ b/web/tailwind.config.js
@@ -49,6 +49,7 @@ module.exports = {
       lg: { min: '1024px' },
       md: { max: '767px' },
       sm: { max: '639px' },
+      mobile: { max: '639px' }, // alias
     },
     extend: {
       borderRadius: {