CAS-169 - update fields validation on community creation

frontend/packages/client/src/components/Community/CommunitiesPresenter.js

@@ -32,7 +32,7 @@ const CommunitiesPresenter = ({
       <h1 className="is-uppercase small-text communities">{title}</h1>
       <div className="columns is-multiline">
         {communities.map((community, index) => {
-          const { logo, name, description, id, isComingSoon } = community;
+          const { logo, name, description, id, isComingSoon, slug } = community;
           return (
             <div
               className={`column ${columnSize} is-12-tablet`}
@@ -46,6 +46,7 @@ const CommunitiesPresenter = ({
                 id={id}
                 isComingSoon={isComingSoon}
                 key={index}
+                slug={slug}
               />
             </div>
           );

frontend/packages/client/src/components/Community/CommunityCard.js

@@ -3,12 +3,12 @@ import { Link } from 'react-router-dom';
 import JoinCommunityButton from './JoinCommunityButton';
 import WrapperResponsive from 'components/WrapperResponsive';
 import { useWindowDimensions } from 'hooks';
-
+import Blockies from 'react-blockies';
 /**
  * CommunityCard will group communities on a row bases,
  * will use elementsPerRow to determine how many communities to render per row
  */
-const CommunityCard = ({ logo, name, description, id }) => {
+const CommunityCard = ({ logo, name, description, id, slug }) => {
   const descriptionStyle = {
     lineHeight: '1.5em',
     height: '3em',
@@ -55,15 +55,24 @@ const CommunityCard = ({ logo, name, description, id }) => {
         <div className="is-flex is-flex-grow-1 rounded-sm border-light p-5 is-flex-direction-column transition-all community-card">
           <div className="columns is-multiline is-flex-grow-1 is-mobile">
             <div className="column is-narrow">
-              <div
-                className="border-light rounded-sm"
-                style={{
-                  width: 96,
-                  height: 96,
-                  backgroundImage: `url(${logo})`,
-                  backgroundSize: 'cover',
-                }}
-              />
+              {logo ? (
+                <div
+                  className="border-light rounded-sm"
+                  style={{
+                    width: 96,
+                    height: 96,
+                    backgroundImage: `url(${logo})`,
+                    backgroundSize: 'cover',
+                  }}
+                />
+              ) : (
+                <Blockies
+                  seed={slug}
+                  size={10}
+                  scale={9.6}
+                  className="rounded-sm"
+                />
+              )}
             </div>
             <div className="column">
               <WrapperResponsive

frontend/packages/client/src/components/Community/CommunityEditorProfile.js

@@ -139,7 +139,9 @@ function CommunityEditorProfile({
               width: '90px',
               overflow: 'hidden',
               position: 'relative',
-              ...(!image ? { border: '1px dashed #757575' } : undefined),
+              ...(!image?.imageUrl
+                ? { border: '1px dashed #757575' }
+                : undefined),
             }}
             {...getRootProps()}
           >
@@ -150,7 +152,7 @@ function CommunityEditorProfile({
                 <input {...getInputProps()} />
               </>
             )}
-            {image && (
+            {image?.imageUrl && (
               <div
                 className="is-flex flex-1 is-flex-direction-column is-align-items-center is-justify-content-center"
                 style={{

frontend/packages/client/src/components/CommunityCreate/StepOne.js

@@ -107,10 +107,13 @@ export default function StepOne({
   useEffect(() => {
     const requiredFields = {
       communityName: (name) => name?.trim().length > 0,
-      communityDescription: (desc) => desc?.trim().length > 0,
-      logo: (logo) => logo?.file && logo?.imageUrl,
+      communityDescription: (desc) =>
+        desc?.trim().length ? desc?.trim().length < 1000 : true,
+      logo: (logo) =>
+        logo !== undefined ? logo?.file && logo?.imageUrl : true,
       communityTerms: (termsUrl) =>
-        termsUrl?.length > 0 && urlPatternValidation(termsUrl),
+        termsUrl?.length > 0 ? urlPatternValidation(termsUrl) : true,
+      category: (cat) => cat?.length > 0,
     };
     const isValid = Object.keys(requiredFields).every(
       (field) => stepData && requiredFields[field](stepData[field])

frontend/packages/client/src/hooks/useCommunity.js

@@ -84,9 +84,9 @@ export default function useCommunity() {
         } = communityData;
 
         let communityLogo;
-        // not handling upload error: there's a default image
+        // check for logo upload
         // admins can edit later the image
-        if (logo.file) {
+        if (logo?.file) {
           try {
             communityLogo = await uploadFile(logo.file);
           } catch (err) {

frontend/packages/client/src/hooks/useCommunityDetails.js

@@ -18,18 +18,14 @@ export default function useCommunityDetails(id) {
       const response = await fetch(url);
       const details = await checkResponse(response);
       // merging with mock data
-      const detailsMocked = {
-        logo: 'https://i.imgur.com/RMKXPCw.png',
-        name: 'Flow',
-        description:
-          "Flow's decentralized governance and node operations community.",
+      const detailsUpdated = {
         about: {
           textAbout: details.body,
         },
         ...details,
       };
 
-      dispatch({ type: 'SUCCESS', payload: detailsMocked });
+      dispatch({ type: 'SUCCESS', payload: detailsUpdated });
     } catch (err) {
       notifyError(err, url);
       dispatch({ type: 'ERROR', payload: { errorData: err.message } });

frontend/packages/client/src/pages/Community.js

@@ -216,8 +216,16 @@ export default function Community() {
     return null;
   }
 
-  const { instagramUrl, twitterUrl, websiteUrl, discordUrl, githubUrl } =
-    community ?? {};
+  const {
+    instagramUrl,
+    twitterUrl,
+    websiteUrl,
+    discordUrl,
+    githubUrl,
+    logo,
+    slug,
+    id,
+  } = community ?? {};
 
   const titleClassNames = classnames(
     'is-size-5 has-text-weight-bold',
@@ -233,29 +241,45 @@ export default function Community() {
     'is-flex container community-header section',
     { 'is-justify-content-space-between': notMobile }
   );
+
+  const imageContainerClasses = classnames(
+    { '': notMobile },
+    {
+      'is-flex is-flex-direction-column is-justify-content-center m-0 community-logo-wrapper':
+        !notMobile,
+    }
+  );
+  const imageClases = classnames(
+    {
+      'rounded-full community-logo-mobile': !notMobile,
+    },
+    {
+      'rounded-full': notMobile,
+    }
+  );
   return (
     <section className="full-height pt-0">
       {community ? (
         <div className="is-flex community-header-wrapper">
           <div className={headerContainerClassNames}>
             <div className="is-flex community-specific">
-              <div className="is-hidden-tablet is-mobile is-flex is-flex-direction-column is-justify-content-center m-0 community-logo-wrapper">
-                <img
-                  className="rounded-full community-logo-mobile"
-                  alt="community banner"
-                  src={community.logo}
-                  height="85px"
-                  width="85px"
-                />
-              </div>
-              <div className="is-hidden-mobile">
-                <img
-                  alt="community banner"
-                  className="rounded-full"
-                  src={community.logo}
-                  height="149px"
-                  width="149px"
-                />
+              <div className={imageContainerClasses}>
+                {logo ? (
+                  <img
+                    className={imageClases}
+                    alt="community banner"
+                    src={logo}
+                    height="85px"
+                    width="85px"
+                  />
+                ) : (
+                  <Blockies
+                    seed={slug ?? id}
+                    size={10}
+                    scale={9.6}
+                    className="blockies"
+                  />
+                )}
               </div>
               <div className="column community-info is-justify-content-space-evenly">
                 <h2 className={titleClassNames}>{community.name}</h2>

frontend/packages/client/src/pages/Home.js

@@ -15,7 +15,6 @@ export default function HomePage() {
     : (data || []).map((datum) => ({
         ...datum,
         // missing fields
-        logo: datum.logo || 'https://i.imgur.com/RMKXPCw.png',
         isComingSoon: datum.isComingSoon || false,
       }));