From 1cafcdc3f7815549eb7d20dc36bca5a8fdaa8fa7 Mon Sep 17 00:00:00 2001
From: German Urrustarazu <germanurrus@gmail.com>
Date: Fri, 1 Jul 2022 15:46:58 -0300
Subject: [PATCH 1/3] update field validation

---
 .../client/src/components/CommunityCreate/StepOne.js     | 9 ++++++---
 1 file changed, 6 insertions(+), 3 deletions(-)

diff --git a/frontend/packages/client/src/components/CommunityCreate/StepOne.js b/frontend/packages/client/src/components/CommunityCreate/StepOne.js
index 18f3ed62c..e7d856e4f 100644
--- a/frontend/packages/client/src/components/CommunityCreate/StepOne.js
+++ b/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])

From 853e705b02df34fa10c761a63a5dfa66c4f3d533 Mon Sep 17 00:00:00 2001
From: German Urrustarazu <germanurrus@gmail.com>
Date: Fri, 1 Jul 2022 15:54:54 -0300
Subject: [PATCH 2/3] update logo upload

---
 frontend/packages/client/src/hooks/useCommunity.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/frontend/packages/client/src/hooks/useCommunity.js b/frontend/packages/client/src/hooks/useCommunity.js
index da927ca90..69e58bbbf 100644
--- a/frontend/packages/client/src/hooks/useCommunity.js
+++ b/frontend/packages/client/src/hooks/useCommunity.js
@@ -83,9 +83,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) {

From bad961f7149d29588bf24d7138dbcf5184494dd2 Mon Sep 17 00:00:00 2001
From: German Urrustarazu <germanurrus@gmail.com>
Date: Fri, 1 Jul 2022 17:59:24 -0300
Subject: [PATCH 3/3] rem default flow logo and use blockies for community logo

---
 .../Community/CommunitiesPresenter.js         |  3 +-
 .../src/components/Community/CommunityCard.js | 31 ++++++----
 .../Community/CommunityEditorProfile.js       |  6 +-
 .../client/src/hooks/useCommunityDetails.js   |  8 +--
 .../packages/client/src/pages/Community.js    | 62 +++++++++++++------
 frontend/packages/client/src/pages/Home.js    |  1 -
 6 files changed, 71 insertions(+), 40 deletions(-)

diff --git a/frontend/packages/client/src/components/Community/CommunitiesPresenter.js b/frontend/packages/client/src/components/Community/CommunitiesPresenter.js
index 7f7c3aaf9..bf993a9e9 100644
--- a/frontend/packages/client/src/components/Community/CommunitiesPresenter.js
+++ b/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>
           );
diff --git a/frontend/packages/client/src/components/Community/CommunityCard.js b/frontend/packages/client/src/components/Community/CommunityCard.js
index 1293c29ef..2f93855bd 100644
--- a/frontend/packages/client/src/components/Community/CommunityCard.js
+++ b/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
diff --git a/frontend/packages/client/src/components/Community/CommunityEditorProfile.js b/frontend/packages/client/src/components/Community/CommunityEditorProfile.js
index 3432d4768..2e3abde54 100644
--- a/frontend/packages/client/src/components/Community/CommunityEditorProfile.js
+++ b/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={{
diff --git a/frontend/packages/client/src/hooks/useCommunityDetails.js b/frontend/packages/client/src/hooks/useCommunityDetails.js
index ac20d06c7..84750d79b 100644
--- a/frontend/packages/client/src/hooks/useCommunityDetails.js
+++ b/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 } });
diff --git a/frontend/packages/client/src/pages/Community.js b/frontend/packages/client/src/pages/Community.js
index 046a15cae..41876050e 100644
--- a/frontend/packages/client/src/pages/Community.js
+++ b/frontend/packages/client/src/pages/Community.js
@@ -217,8 +217,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',
@@ -234,29 +242,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>
diff --git a/frontend/packages/client/src/pages/Home.js b/frontend/packages/client/src/pages/Home.js
index d2cda7bf4..45cda8dab 100644
--- a/frontend/packages/client/src/pages/Home.js
+++ b/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,
       }));