feat(kleros-app): add-restrictions-check-in-upload-file

Author: tractorss

kleros-app/src/lib/atlas/hooks/useSessionStorage.ts

@@ -7,6 +7,9 @@ export function useSessionStorage<T>(keyName: string, defaultValue: T) {
 
  return value ? JSON.parse(value) : defaultValue;
  } catch (err) {
+ // eslint-disable-next-line no-console
+ console.log("useSessionStorage:", { err });
+
  return defaultValue;
  }
  });

kleros-app/src/lib/atlas/providers/AtlasProvider.tsx

@@ -25,6 +25,7 @@ import {
 import { GraphQLError } from "graphql";
 import { isUndefined } from "../../../utils";
 import { useSessionStorage } from "../hooks/useSessionStorage";
+import { fetchRestrictions, Role } from "../utils/fetchRestrictions";
 
 interface IAtlasProvider {
  isVerified: boolean;
@@ -44,6 +45,7 @@ interface IAtlasProvider {
  isError: boolean;
  }
  >;
+ roleRestrictions: Role[] | undefined;
 }
 
 const Context = createContext<IAtlasProvider | undefined>(undefined);
@@ -73,7 +75,7 @@ export const AtlasProvider: React.FC<{ config: AtlasConfig; children?: React.Rea
  }
  : undefined;
  return new GraphQLClient(`${config.uri}/graphql`, { headers });
- }, [authToken]);
+ }, [authToken, config.uri]);
 
  /**
  * @description verifies user authorisation
@@ -142,6 +144,22 @@ export const AtlasProvider: React.FC<{ config: AtlasConfig; children?: React.Rea
  queryClient
  );
 
+ const { data: roleRestrictions } = useQuery(
+ {
+ queryKey: [`RoleRestrictions`],
+ enabled: Boolean(config.product),
+ staleTime: Infinity,
+ queryFn: async () => {
+ try {
+ return await fetchRestrictions(atlasGqlClient, config.product);
+ } catch {
+ return undefined;
+ }
+ },
+ },
+ queryClient
+ );
+
  useEffect(() => {
  if (!isVerified) return;
  refetchUser();
@@ -255,6 +273,17 @@ export const AtlasProvider: React.FC<{ config: AtlasConfig; children?: React.Rea
  async (file: File, role: Roles) => {
  try {
  if (!address || !isVerified || !config.uri || !authToken) return null;
+
+ if (roleRestrictions) {
+ const restrictions = roleRestrictions.find((supportedRoles) => Roles[supportedRoles.name] === role);
+
+ if (!restrictions) throw new Error("Unsupported role.");
+ if (!restrictions.restriction.allowedMimeTypes.includes(file.type)) throw new Error("Unsupported file type.");
+ if (file.size > restrictions.restriction.maxSize)
+ throw new Error(
+ `File too big. Max allowed size : ${((restrictions.restriction.maxSize / 1024) * 1024).toFixed(2)} mb.`
+ );
+ }
  setIsUploadingFile(true);
 
  const hash = await fetchWithAuthErrorHandling(() =>
@@ -267,7 +296,7 @@ export const AtlasProvider: React.FC<{ config: AtlasConfig; children?: React.Rea
  setIsUploadingFile(false);
  }
  },
- [address, isVerified, setIsUploadingFile, authToken, config.uri, config.product]
+ [address, isVerified, setIsUploadingFile, authToken, config.uri, config.product, roleRestrictions]
  );
 
  /**
@@ -309,6 +338,7 @@ export const AtlasProvider: React.FC<{ config: AtlasConfig; children?: React.Rea
  isUploadingFile,
  uploadFile,
  confirmEmail,
+ roleRestrictions,
  }),
  [
  isVerified,
@@ -324,6 +354,7 @@ export const AtlasProvider: React.FC<{ config: AtlasConfig; children?: React.Rea
  isUploadingFile,
  uploadFile,
  confirmEmail,
+ roleRestrictions,
  ]
  )}
  >

kleros-app/src/lib/atlas/utils/fetchRestrictions.ts

@@ -0,0 +1,40 @@
+import { gql, type GraphQLClient } from "graphql-request";
+import { Products } from ".";
+
+export type Role = {
+ name: string;
+ restriction: {
+ maxSize: number;
+ allowedMimeTypes: string[];
+ };
+};
+
+type FetchRolesResponse = {
+ roles: Role[];
+};
+
+const query = gql`
+ query Roles($product: Products!) {
+ roles(product: $product) {
+ name
+ restriction {
+ maxSize
+ allowedMimeTypes
+ }
+ }
+ }
+`;
+
+export async function fetchRestrictions(client: GraphQLClient, product: Products): Promise<Role[]> {
+ return client
+ .request<FetchRolesResponse>(query, { product })
+ .then((response) => response.roles)
+ .catch((errors) => {
+ // eslint-disable-next-line no-console
+ console.log("Error fetching roles :", { errors });
+ const errorMessage = Array.isArray(errors?.response?.errors)
+ ? errors.response.errors[0]?.message
+ : "Error fetching roles";
+ throw Error(errorMessage);
+ });
+}

package.json

@@ -25,7 +25,8 @@
  "web-devtools",
  "eslint-config",
  "prettier-config",
- "tsconfig"
+ "tsconfig",
+ "kleros-app"
  ],
  "packageManager": "yarn@4.5.1",
  "volta": {

web/src/pages/Home/CourtOverview/Header.tsx

@@ -1,14 +1,14 @@
 import React from "react";
 import styled from "styled-components";
 
-import { responsiveSize } from "styles/responsiveSize";
-
 import { Link } from "react-router-dom";
 
 import { Button } from "@kleros/ui-components-library";
 
 import Bookmark from "svgs/icons/bookmark.svg";
 
+import { responsiveSize } from "styles/responsiveSize";
+
 const StyledHeader = styled.div`
  display: flex;
  flex-wrap: wrap;