feat: initial jurors page setup, jurors explore navlink, small styling tweak, dashboard to profile

Author: kemuru

web/src/app.tsx

@@ -14,8 +14,9 @@ import QueryClientProvider from "context/QueryClientProvider";
 import StyledComponentsProvider from "context/StyledComponentsProvider";
 const Home = lazy(() => import("./pages/Home"));
 const Cases = lazy(() => import("./pages/Cases"));
-const Dashboard = lazy(() => import("./pages/Dashboard"));
+const Profile = lazy(() => import("./pages/Profile"));
 const Courts = lazy(() => import("./pages/Courts"));
+const Jurors = lazy(() => import("./pages/Jurors"));
 const DisputeResolver = lazy(() => import("./pages/Resolver"));
 const GetPnk = lazy(() => import("./pages/GetPnk"));
 const Settings = lazy(() => import("./pages/Settings"));
@@ -64,10 +65,18 @@ const App: React.FC = () => {
                           }
                         />
                         <Route
-                          path="dashboard/:page/:order/:filter"
+                          path="jurors/*"
                           element={
                             <Suspense fallback={<Loader width={"48px"} height={"48px"} />}>
-                              <Dashboard />
+                              <Jurors />
+                            </Suspense>
+                          }
+                        />
+                        <Route
+                          path="profile/:page/:order/:filter"
+                          element={
+                            <Suspense fallback={<Loader width={"48px"} height={"48px"} />}>
+                              <Profile />
                             </Suspense>
                           }
                         />

web/src/components/EvidenceCard.tsx

@@ -8,7 +8,6 @@ import { Card } from "@kleros/ui-components-library";
 
 import AttachmentIcon from "svgs/icons/attachment.svg";
 
-import { DEFAULT_CHAIN, getChain } from "consts/chains";
 import { formatDate } from "utils/date";
 import { getIpfsUrl } from "utils/getIpfsUrl";
 import { shortenAddress } from "utils/shortenAddress";
@@ -224,7 +223,7 @@ const EvidenceCard: React.FC<IEvidenceCard> = ({
   description,
   fileURI,
 }) => {
-  const dashboardLink = `/dashboard/1/desc/all?address=${sender}`;
+  const profileLink = `/profile/1/desc/all?address=${sender}`;
 
   const transactionExplorerLink = useMemo(() => {
     return getTxnExplorerLink(transactionHash ?? "");
@@ -249,7 +248,7 @@ const EvidenceCard: React.FC<IEvidenceCard> = ({
         <BottomLeftContent>
           <AccountContainer>
             <Identicon size="24" string={sender} />
-            <InternalLink to={dashboardLink}>
+            <InternalLink to={profileLink}>
               <Address>{shortenAddress(sender)}</Address>
             </InternalLink>
           </AccountContainer>

web/src/components/Popup/MiniGuides/JurorLevels.tsx

@@ -5,8 +5,8 @@ import { Card as _Card } from "@kleros/ui-components-library";
 
 import { landscapeStyle } from "styles/landscapeStyle";
 
-import Coherence from "pages/Dashboard/JurorInfo/Coherence";
-import PixelArt from "pages/Dashboard/JurorInfo/PixelArt";
+import Coherence from "pages/Profile/JurorInfo/Coherence";
+import PixelArt from "pages/Profile/JurorInfo/PixelArt";
 
 import Template from "./MainStructureTemplate";
 import { Title, ParagraphsContainer, LeftContentContainer } from "./PageContentsTemplate";

web/src/layout/Header/navbar/Explore.tsx

@@ -54,7 +54,7 @@ const links = [
   { to: "/", text: "Home" },
   { to: "/cases/display/1/desc/all", text: "Cases" },
   { to: "/courts", text: "Courts" },
-  { to: "/dashboard/1/desc/all", text: "Dashboard" },
+  { to: "/jurors", text: "Jurors" },
   { to: "/get-pnk", text: "Get PNK" },
 ];
 

web/src/pages/Cases/CaseDetails/Voting/VotesDetails/AccordionTitle.tsx

@@ -88,13 +88,13 @@ const AccordionTitle: React.FC<{
   commited: boolean;
   hiddenVotes: boolean;
 }> = ({ juror, choice, voteCount, period, answers, isActiveRound, commited, hiddenVotes }) => {
-  const dashboardLink = `/dashboard/1/desc/all?address=${juror}`;
+  const profileLink = `/profile/1/desc/all?address=${juror}`;
 
   return (
     <TitleContainer>
       <AddressContainer>
         <Identicon size="20" string={juror} />
-        <StyledInternalLink to={dashboardLink}>
+        <StyledInternalLink to={profileLink}>
           <StyledLabel variant="secondaryText">{shortenAddress(juror)}</StyledLabel>
         </StyledInternalLink>
       </AddressContainer>

web/src/pages/Courts/CourtDetails/TopSearch.tsx

@@ -68,6 +68,8 @@ const SearchResultsContainer = styled(OverlayScrollbarsComponent)`
   overflow-y: auto;
   z-index: 1;
   background-color: ${({ theme }) => theme.whiteBackground};
+  border-top-left-radius: 0;
+  border-top-right-radius: 0;
 `;
 
 const StyledCard = styled(Card)<{ selected: boolean }>`
@@ -79,6 +81,7 @@ const StyledCard = styled(Card)<{ selected: boolean }>`
   border: none;
   border-left: ${({ selected, theme }) => (selected ? `3px solid ${theme.primaryBlue}` : "none")};
   background-color: ${({ selected, theme }) => (selected ? theme.mediumBlue : "transparent")};
+  border-radius: 0;
 
   :hover {
     background-color: ${({ theme }) => theme.mediumBlue};

web/src/pages/Home/TopJurors/JurorCard/JurorLevel.tsx

@@ -5,7 +5,7 @@ import { getUserLevelData } from "utils/userLevelCalculation";
 
 import { landscapeStyle } from "styles/landscapeStyle";
 
-import PixelArt from "pages/Dashboard/JurorInfo/PixelArt";
+import PixelArt from "pages/Profile/JurorInfo/PixelArt";
 
 const Container = styled.div`
   display: flex;

web/src/pages/Home/TopJurors/JurorCard/JurorTitle.tsx

@@ -34,12 +34,12 @@ interface IJurorTitle {
 }
 
 const JurorTitle: React.FC<IJurorTitle> = ({ address }) => {
-  const dashboardLink = `/dashboard/1/desc/all?address=${address}`;
+  const profileLink = `/profile/1/desc/all?address=${address}`;
 
   return (
     <Container>
       <IdenticonOrAvatar address={address} />
-      <StyledInternalLink to={dashboardLink}>
+      <StyledInternalLink to={profileLink}>
         <AddressOrName address={address} />
       </StyledInternalLink>
     </Container>

web/src/pages/Home/TopJurors/index.tsx

@@ -22,7 +22,7 @@ const Title = styled.h1`
   font-size: ${responsiveSize(20, 24)};
 `;
 
-const ListContainer = styled.div`
+export const ListContainer = styled.div`
   display: flex;
   flex-direction: column;
   justify-content: center;
@@ -35,7 +35,7 @@ const ListContainer = styled.div`
   )}
 `;
 
-const StyledLabel = styled.label`
+export const StyledLabel = styled.label`
   font-size: 16px;
 `;
 

web/src/pages/Jurors/Search.tsx

@@ -0,0 +1,76 @@
+import React, { useRef, useState } from "react";
+import styled, { css } from "styled-components";
+
+import { useNavigate, useParams, useSearchParams } from "react-router-dom";
+import { useDebounce } from "react-use";
+import { Searchbar } from "@kleros/ui-components-library";
+
+import { isEmpty } from "utils/index";
+import { decodeURIFilter, encodeURIFilter, useRootPath } from "utils/uri";
+
+import { landscapeStyle } from "styles/landscapeStyle";
+import { responsiveSize } from "styles/responsiveSize";
+
+const Container = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: ${responsiveSize(8, 16)};
+
+  ${landscapeStyle(
+    () => css`
+      flex-direction: row;
+    `
+  )}
+`;
+
+const StyledSearchbar = styled(Searchbar)`
+  flex: 1;
+  flex-basis: 310px;
+
+  input {
+    font-size: 16px;
+    height: 45px;
+    padding-top: 0px;
+    padding-bottom: 0px;
+  }
+`;
+
+const Search: React.FC = () => {
+  const { page, order, filter } = useParams();
+  const location = useRootPath();
+  const decodedFilter = decodeURIFilter(filter ?? "all");
+  const { id: searchValue, ...filterObject } = decodedFilter;
+  const [search, setSearch] = useState(searchValue ?? "");
+  const initialRenderRef = useRef(true);
+  const navigate = useNavigate();
+  const [searchParams] = useSearchParams();
+
+  useDebounce(
+    () => {
+      if (initialRenderRef.current && isEmpty(search)) {
+        initialRenderRef.current = false;
+        return;
+      }
+      initialRenderRef.current = false;
+      const newFilters = isEmpty(search) ? { ...filterObject } : { ...filterObject, id: search };
+      const encodedFilter = encodeURIFilter(newFilters);
+      navigate(`${location}/${page}/${order}/${encodedFilter}?${searchParams.toString()}`);
+    },
+    500,
+    [search]
+  );
+
+  return (
+    <Container>
+      <StyledSearchbar
+        dir="auto"
+        type="text"
+        placeholder="Search"
+        value={search}
+        onChange={(e) => setSearch(e.target.value)}
+      />
+    </Container>
+  );
+};
+
+export default Search;