refactor: rename contact with user

2022-07-04 16:12:23 +08:00
parent 6083040e2b
commit 101dbdb5ee
76 changed files with 319 additions and 286 deletions
@@ -0,0 +1,55 @@
+import { useEffect } from "react";
+import { NavLink, useParams, useLocation } from "react-router-dom";
+import { useDispatch, useSelector } from "react-redux";
+import { updateRemeberedNavs } from "../../app/slices/ui";
+import Search from "../../common/component/Search";
+import User from "../../common/component/User";
+import Profile from "../../common/component/Profile";
+
+import StyledWrapper from "./styled";
+import BlankPlaceholder from "../../common/component/BlankPlaceholder";
+
+export default function ContactsPage() {
+  const dispatch = useDispatch();
+  const { pathname } = useLocation();
+
+  const { user_id } = useParams();
+  const userIds = useSelector((store) => store.users.ids);
+  useEffect(() => {
+    dispatch(updateRemeberedNavs({ key: "user" }));
+    return () => {
+      dispatch(updateRemeberedNavs({ key: "user", path: pathname }));
+    };
+  }, [pathname]);
+
+  console.log({ userIds, user_id });
+  if (!userIds) return null;
+  return (
+    <StyledWrapper>
+      <div className="left">
+        <Search />
+        <div className="list">
+          <nav className="nav">
+            {userIds.map((uid) => {
+              return (
+                <NavLink key={uid} className="session" to={`/users/${uid}`}>
+                  <User uid={uid} enableContextMenu={true} />
+                </NavLink>
+              );
+            })}
+          </nav>
+        </div>
+        {/* <CurrentUser /> */}
+      </div>
+      {user_id ? (
+        <div className="right">
+          <Profile uid={user_id} />
+        </div>
+      ) : (
+        <div className="right placeholder">
+          <BlankPlaceholder type="user" />
+        </div>
+      )}
+    </StyledWrapper>
+  );
+}
@@ -0,0 +1,50 @@
+import styled from "styled-components";
+const StyledWrapper = styled.div`
+  display: flex;
+  height: 100%;
+  padding: 8px 48px 10px 0;
+  > .left {
+    border-radius: 16px 0 0 16px;
+    background-color: #fff;
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    min-width: 268px;
+    box-shadow: inset -1px 0px 0px rgba(0, 0, 0, 0.1);
+    .list {
+      padding: 12px 8px;
+      overflow: scroll;
+      padding-bottom: 50px;
+      > .nav {
+        display: flex;
+        flex-direction: column;
+        gap: 4px;
+        a {
+          border-radius: 6px;
+          text-decoration: none;
+        }
+        .session {
+          &:hover,
+          &.active {
+            background: rgba(116, 127, 141, 0.1);
+          }
+        }
+      }
+    }
+  }
+  .right {
+    border-radius: 0 16px 16px 0;
+    background-color: #fff;
+    /* height: 100vh; */
+    width: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: flex-start;
+    &.placeholder {
+      height: 100%;
+      align-items: center;
+    }
+  }
+`;
+
+export default StyledWrapper;