Reading additionnal user infos in front-end

fs-dapp_2.0/package.json

@@ -30,7 +30,7 @@
     "react": "^18.2.0",
     "react-chartjs-2": "^5.0.0",
     "react-dom": "^18.2.0",
-    "react-hook-form": "^7.45.2",
+    "react-hook-form": "^7.51.2",
     "react-hot-toast": "^2.4.1",
     "react-icons": "^4.10.1",
     "react-infinite-scroll-component": "^6.1.0",
@@ -69,7 +69,7 @@
   },
   "devDependencies": {
     "@babel/plugin-proposal-private-property-in-object": "",
-    "@tailwindcss/forms": "^0.5.4",
+    "@tailwindcss/forms": "^0.5.7",
     "autoprefixer": "^10.4.14",
     "postcss": "^8.4.26",
     "tailwindcss": "^3.3.3"

fs-dapp_2.0/src/components/pages/Council.tsx

@@ -20,7 +20,7 @@ export default function Council() {
   const { role, balance, dispatch0 } = useAccountContext();
   const { session_closed,approved,role_in_session,nay,ayes,council_members,selectedProposal,proposals, datas,dispatch1 } = useConcilSessionContext();
 
-  const[infos,setInfos]=useState('')
+    
   const getproposal= (item:MouseEvent)=>{
 
     let txt=item.currentTarget.textContent
@@ -41,6 +41,7 @@ export default function Council() {
       console.log(council_members);
     }   
   }
+
 
    function getDatas(){
     let tdata:DataType[]=[];
@@ -61,7 +62,8 @@ export default function Council() {
       let status = Prop.approved.toString();
       let referendum = Prop.sessionClosed.toString();
       let hash = Prop.proposalHash.toString();
-      let infos='Nothing yet';
+      let infos = Prop.infos.toString();      
+      console.log(Prop.infos.split(`:`)[1])
 
       api.query.backgroundCouncil.voting(hash,(data:any)=>{
         let data1 = data.toHuman();
@@ -72,8 +74,9 @@ export default function Council() {
             dispatch1({ type: 'SET_NAY', payload: no });
           }
       })
+
       let dtype:DataType={name:acc1.meta.name,role:r_session,address: Prop.accountId,status,referendum,hash,infos};      
-      let prop0:Proposal={voter_id:selectedAccount,Referendum_account:acc1,session_closed:referendum,approved:status,ayes,nay,hash}
+      let prop0:Proposal={voter_id:selectedAccount,Referendum_account:acc1,session_closed:referendum,approved:status,ayes,nay,hash,infos}
       props.push(prop0);
       tdata.push(dtype);      
               }
@@ -112,14 +115,14 @@ dispatch1({type:`SET_PROPOSALS`,payload:props});
   }, [selectedAccount,blocks]);
 
 
-const style1= { width: 410, height:150, background:`white`};
-const style2= { width: 410, height:150, background:`red`};
-const style3= { width: 410, height:150, background:`green`};
+const style1= { width: 410, height:400, background:`white`};
+const style2= { width: 410, height:400, background:`red`};
+const style3= { width: 410, height:400, background:`green`};
   return((selectedAccount && council_members.includes(selectedAccount))?
 
   <div id="scrollableDiv"
   style={{
-    height: 400,
+    height: 600,
     overflow: 'auto',
     padding: '0 16px',
     border: '1px solid rgba(140, 140, 140, 0.35)',
@@ -132,6 +135,7 @@ const style3= { width: 410, height:150, background:`green`};
             <Card 
             onClick={getproposal}
             hoverable
+            cover={<img alt="example" style={{height:"50%", width:"50%"}} src={item.infos.split(`:`)[1]}/>}
       style={(item.status==="AWAITING" && item.referendum==="false")?style1:
              ((item.status==="AWAITING" && item.referendum==="true")?style2:style3)}>
             <List.Item key={item.address}>

fs-dapp_2.0/src/components/pages/Roles.tsx

@@ -31,7 +31,7 @@ export default function Roles() {
       }
 
     });
-    console.log(`role in session:${role_in_session}`)
+    //console.log(`role in session:${role_in_session}`)
   }, [role_in_session,selectedAccount, blocks, dispatch1, api]);
 
   useEffect(() => {

fs-dapp_2.0/src/components/shared/InfosForm.tsx

@@ -0,0 +1,83 @@
+import {useForm,FieldError} from 'react-hook-form';
+import { useAccountContext } from '../../contexts/Account_Context';
+import { useAppContext } from '../../contexts/AppContext';
+import { Button } from 'flowbite-react';
+
+
+type Details = {
+    picture: string;
+    fullname: string;
+    email: string;
+    website: string;
+    reason: string;
+    notes: string;
+}
+
+
+
+export function DetailsPage(){
+    const {register,handleSubmit,formState:{errors}}= useForm<Details>();
+    const { api, selectedAccount } = useAppContext();
+    const { role,infos,dispatch0 } = useAccountContext();
+
+
+
+    function onSubmit(details:Details){
+        let pic="";
+        if (!details.picture||details.picture===""){
+            pic=`../../../johndoe.png`
+
+        }else{pic=details.picture}
+        let all_infos:string = `${details.fullname}:${pic}:${details.email}:${details.website}:${details.reason}:${details.notes}`;
+        dispatch0({type:`SET_INFOS`,payload:all_infos});
+        //console.log(infos.split(`:`)[1]);
+
+    }
+
+    function getEditorStyle(fieldError: FieldError|undefined){
+        return fieldError?'border-red-500':``;
+    }
+
+    const fieldstyle = "flex flex-col mb-2"
+    return(
+        <div>
+            <form noValidate onSubmit={handleSubmit(onSubmit)}>
+                <div className={fieldstyle}>
+                    <label htmlFor='picture'>Link to Avatar Picture</label>
+                    <input type='text' id="picture" {...register('picture')}/>
+                </div>
+                <div className={fieldstyle}>
+                    <label htmlFor='fullname' >Full Name</label>
+                    <input type='text' id="fullname" className={getEditorStyle(errors.fullname)}{...register('fullname',{
+                        required:`You must enter your full name`
+                    })}/>
+                </div>
+                <div className={fieldstyle}>
+                    <label htmlFor='email'>e-mail address</label>
+                    <input type='text' id ="email" className={getEditorStyle(errors.email)}{...register('email',{
+                        required:`You must enter your e-mail address`
+                    })}/>
+                </div>
+                <div className={fieldstyle}>
+                    <label htmlFor='website'>One of your social website(Linkedin, Facebook, etc...)</label>
+                    <input type='text' id="website" {...register('website')}/>
+                </div>
+                <div className={fieldstyle}>
+                    <label htmlFor='reason'>Subscription Motivation</label>
+                    <input type='text' id="reason" {...register('reason')}/>
+                </div>
+                <div className={fieldstyle}>
+                    <label htmlFor='notes'>Additional Informations</label>
+                    <input type='text' id="notes" {...register('notes')}/>
+                </div>
+                <div>
+                    <Button 
+                    type="submit"
+                    className="bg-blue-600 text-white font-bold   text-xl">
+                        Submit
+                    </Button>
+                </div>
+            </form>
+        </div>
+    )
+}

fs-dapp_2.0/src/components/shared/modal.tsx

@@ -6,14 +6,16 @@ import { ROLES } from '../../contexts/types';
 import { web3FromAddress } from '@polkadot/extension-dapp';
 import { Toast } from 'flowbite-react';
 import { NotificationTwoTone, WarningTwoTone } from '@ant-design/icons';
+import { DetailsPage } from './InfosForm';
 
 const RolesApp: React.FC = () => {
   const [open, setOpen] = useState(false);
   const [event, setEvents] = useState('No Roles');
   const [showToast, setShowToast] = useState(false);
   const [warning, setWarning] = useState(false);
   const { api, selectedAccount } = useAppContext();
-  const { role,infos } = useAccountContext();
+  const { role,infos,dispatch0 } = useAccountContext();
+  const [acbutton,setAcbutton] = useState<boolean>(true);
 
   const showDrawer = () => {
     setOpen(true);
@@ -28,6 +30,8 @@ const RolesApp: React.FC = () => {
       console.log('No Roles possible!');
     } else {
       let who = selectedAccount.address;
+      console.log(`User infos: ${infos}`)
+      let enc= new TextEncoder()
       const tx = await api.tx.rolesModule.setRole(who, ROLES[num].toString(),infos);
       const fees = await tx.paymentInfo(who);
       const injector = await web3FromAddress(who);
@@ -65,17 +69,25 @@ const RolesApp: React.FC = () => {
 
   useEffect(() => {
     if (event !== 'No Roles') console.log(event);
-  }, [event]);
+    if (infos!=="No Information Provided"){
+      let all= infos.split(`:`)
+      console.log(all[1]);
+      setAcbutton(false)
+      console.log(infos)
+    }
+  }, [event,infos,dispatch0]);
 
   return (
     <p className="flex-col space-y-2">
-      <Button
+      <Button 
+        disabled={acbutton}
         type="primary"
         className="bg-blue-600 text-white font-bold py-2 pb-10 text-xl"
         onClick={showDrawer}
       >
         Select a Role
       </Button>
+      <DetailsPage/>
       {!(showToast === false) ? (
         <Toast>
           <div

fs-dapp_2.0/src/contexts/types.ts

@@ -49,6 +49,7 @@ export interface Proposal{
   ayes: number;
   nay: number;
   hash:string;
+  infos:string;
 }
 export interface DataType {
   name: string|undefined;

fs-dapp_2.0/yarn.lock

@@ -2578,10 +2578,10 @@
     "@svgr/plugin-svgo" "^5.5.0"
     loader-utils "^2.0.0"
 
-"@tailwindcss/forms@^0.5.4":
-  version "0.5.4"
-  resolved "https://registry.npmjs.org/@tailwindcss/forms/-/forms-0.5.4.tgz"
-  integrity sha512-YAm12D3R7/9Mh4jFbYSMnsd6jG++8KxogWgqs7hbdo/86aWjjlIEvL7+QYdVELmAI0InXTpZqFIg5e7aDVWI2Q==
+"@tailwindcss/forms@^0.5.7":
+  version "0.5.7"
+  resolved "https://registry.npmjs.org/@tailwindcss/forms/-/forms-0.5.7.tgz"
+  integrity sha512-QE7X69iQI+ZXwldE+rzasvbJiyV/ju1FGHH0Qn2W3FKbuYtqp8LKcy6iSw79fVUT5/Vvf+0XgLCeYVG+UV6hOw==
   dependencies:
     mini-svg-data-uri "^1.2.3"
 
@@ -9102,10 +9102,10 @@ react-error-overlay@^6.0.11:
   resolved "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-6.0.11.tgz"
   integrity sha512-/6UZ2qgEyH2aqzYZgQPxEnz33NJ2gNsnHA2o5+o4wW9bLM/JYQitNP9xPhsXwC08hMMovfGe/8retsdDsczPRg==
 
-react-hook-form@^7.45.2:
-  version "7.45.2"
-  resolved "https://registry.npmjs.org/react-hook-form/-/react-hook-form-7.45.2.tgz"
-  integrity sha512-9s45OdTaKN+4NSTbXVqeDITd/nwIg++nxJGL8+OD5uf1DxvhsXQ641kaYHk5K28cpIOTYm71O/fYk7rFaygb3A==
+react-hook-form@^7.51.2:
+  version "7.51.2"
+  resolved "https://registry.npmjs.org/react-hook-form/-/react-hook-form-7.51.2.tgz"
+  integrity sha512-y++lwaWjtzDt/XNnyGDQy6goHskFualmDlf+jzEZvjvz6KWDf7EboL7pUvRCzPTJd0EOPpdekYaQLEvvG6m6HA==
 
 react-hot-toast@^2.4.1:
   version "2.4.1"

runtime/src/lib.rs

@@ -689,7 +689,7 @@ impl pallet_democracy::Config for Runtime {
 parameter_types! {
 	pub const AssetDeposit: Balance = 100 * DOLLARS;
 	pub const ApprovalDeposit: Balance = 1 * DOLLARS;
-	pub const StringLimit: u32 = 50;
+	pub const StringLimit: u32 = 256;
 	pub const MetadataDepositBase: Balance = 10 * DOLLARS;
 	pub const MetadataDepositPerByte: Balance = 1 * DOLLARS;
 }