Skip to content

Commit

Permalink
Merge pull request #66 from credebl/257-radio-selection-issue
Browse files Browse the repository at this point in the history 
fixed: radio selection after agent spinup: 257
  • Loading branch information
@tipusinghaw
tipusinghaw committed Aug 2, 2023
2 parents 98fa15a + cd150f7 commit 4a4ac78
Show file tree
Hide file tree
Showing 8 changed files with 204 additions and 87 deletions.
33 changes: 33 additions & 0 deletions src/api/organization.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -270,3 +270,36 @@ export const editOrganizationUserRole = async (userId: number, roles: number[])
}
}

//Create Connection


export const createConnection = async (orgName: string) => {

const url = apiRoutes.connection.create

const orgId = await getFromLocalStorage(storageKeys.ORG_ID)

const data = {
label: orgName,
multiUseInvitation: true,
autoAcceptConnection: true,
orgId: Number(orgId)
}
const payload = data

const axiosPayload = {
url,
payload,
config: await getHeaderConfigs()
}

try {
return await axiosPost(axiosPayload);
}
catch (error) {
const err = error as Error
return err?.message
}
}


5 changes: 3 additions & 2 deletions src/components/InputCopy/index.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { useRef, useState } from 'react';
import { ChangeEventHandler, MouseEvent, MouseEventHandler, useRef, useState } from 'react';

interface InputProps {
field: {
Expand All @@ -14,7 +14,8 @@ const InputCopy = ({ field, ...props }: InputProps) => {
const inputRef = useRef<HTMLInputElement>(null);
const [isCopied, setIsCopied] = useState(false);

function copyTextVal() {
function copyTextVal(event: React.MouseEvent<HTMLButtonElement>) {
event.preventDefault()
const copyText = inputRef?.current;

const copiedText: string = copyText?.value as string
Expand Down
31 changes: 27 additions & 4 deletions src/components/organization/DedicatedIllustrate.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,12 +1,35 @@
import DedicatedIcon from '../../assets/dedicated.svg';



const DedicatedIllustrate = () => {

return (
<div className='mt-4 ml-4'>
<img src={DedicatedIcon} alt="dedicated" width={270} />
<div className='mt-4 flex flex-row flex-wrap'>
<div>
<img src={DedicatedIcon} alt="dedicated" width={270} />
</div>
<div className='ml-8 max-w-xs'>
<h3 className="mb-2 text-xl font-bold text-gray-900 dark:text-white">
Complete Control and Maximum Privacy
</h3>
<ul className="list-disc">
<li>
<p className='mb-1 text-base font-normal text-gray-900 dark:text-white'>
Our dedicated agent is exclusively managed by your organization, giving you full control. Customize and configure it to meet your specific needs with ease.
</p>
</li>
<li>
<p className='mb-1 text-base font-normal text-gray-900 dark:text-white'>
Rest assured, all data and operations stay within your organization's infrastructure, guaranteeing maximum privacy and autonomy.
</p>
</li>
<li>
<p className='mb-1 text-base font-normal text-gray-900 dark:text-white'>
Experience the power of complete control and privacy with our dedicated agent.
</p>
</li>
</ul>

</div>
</div>
)

Expand Down
4 changes: 2 additions & 2 deletions src/components/organization/OrgDropDown.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -82,10 +82,10 @@ const OrgDropDown = () => {
) : (
<CustomAvatar size="20" name={activeOrg?.name} round />
)}
<text className="ml-2 dark: text-white">{activeOrg?.name}</text>
<text className="ml-2 text-white dark:text-white">{activeOrg?.name}</text>
</>
:
<text className='dark:text-white'>
<text className='text-white dark:text-white'>
Select organization
</text>
}
Expand Down
172 changes: 103 additions & 69 deletions src/components/organization/OrganizationDetails.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,88 +1,122 @@
import type { OrgAgent, Organisation } from './interfaces'
import { useEffect, useState } from 'react';

interface Values {
seed: string;
name: string,
password: string
}

import type { AxiosResponse } from 'axios';
import { Spinner } from 'flowbite-react';
import { apiStatusCodes } from '../../config/CommonConstant';
import { createConnection } from '../../api/organization';

const OrganizationDetails = ({ orgData }: { orgData: Organisation | null }) => {

const { org_agents } = orgData as Organisation
const agentData: OrgAgent | null = org_agents.length > 0 ? org_agents[0] : null
const [loading, setLoading] = useState<boolean>(true)

const createQrConnection = async () => {

setLoading(true)
const response = await createConnection(orgData?.name as string);
const { data } = response as AxiosResponse

if (data?.statusCode === apiStatusCodes.API_STATUS_SUCCESS) {
console.log(`COnnection::`, data);

} else {
console.log(`Connection ERR`, response as string);

}

setLoading(false)
}

useEffect(() => {
createQrConnection()
}, [])

return (
<div
className="mt-4 flex-col p-4 bg-white border border-gray-200 rounded-lg shadow-sm sm:flex dark:border-gray-700 sm:p-6 dark:bg-gray-800"
className="mt-4 w-full flex-wrap p-4 bg-white border border-gray-200 rounded-lg shadow-sm sm:flex dark:border-gray-700 sm:p-6 dark:bg-gray-800"
>
<h3 className="mb-1 mt-1 text-xl font-bold text-gray-900 dark:text-white">
Wallet Details
</h3>
<div
className="items-center sm:flex xl:block 2xl:flex sm:space-x-4 xl:space-x-0 2xl:space-x-4"
>
<div>
<ul className="divide-y divide-gray-200 dark:divide-gray-700">

<li className="py-4">
<div className="flex items-center space-x-4">

<div className="inline-flex min-w-0">
<p
className="text-base font-normal text-gray-500 truncate dark:text-gray-400"
>
Wallet Name:
</p>
<p
className="ml-4 text-base font-semibold text-gray-900 truncate dark:text-white"
>
{agentData?.walletName}
</p>

<div className='w-1/2'>
<h3 className="mb-1 mt-1 text-xl font-bold text-gray-900 dark:text-white">
Wallet Details
</h3>
<div
className="items-center sm:flex xl:block 2xl:flex sm:space-x-4 xl:space-x-0 2xl:space-x-4"
>
<div>
<ul className="divide-y divide-gray-200 dark:divide-gray-700">

<li className="py-4">
<div className="flex items-center space-x-4">

<div className="inline-flex min-w-0">
<p
className="text-base font-normal text-gray-500 truncate dark:text-gray-400"
>
Wallet Name:
</p>
<p
className="ml-4 text-base font-semibold text-gray-900 truncate dark:text-white"
>
{agentData?.walletName}
</p>

</div>
</div>
</div>
</li>
<li className="py-4">
<div className="flex items-center space-x-4">

<div className="inline-flex min-w-0">
<p
className="text-base font-normal text-gray-500 truncate dark:text-gray-400"
>
Org DID:
</p>
<p
className="ml-4 text-base font-semibold text-gray-900 truncate dark:text-white"
>
{agentData?.orgDid}
</p>

</li>
<li className="py-4">
<div className="flex items-center space-x-4">

<div className="inline-flex min-w-0">
<p
className="text-base font-normal text-gray-500 truncate dark:text-gray-400"
>
Org DID:
</p>
<p
className="ml-4 text-base font-semibold text-gray-900 truncate dark:text-white"
>
{agentData?.orgDid}
</p>

</div>
</div>
</div>
</li>
<li className="py-4">
<div className="flex items-center space-x-4">

<div className="inline-flex min-w-0">
<p
className="text-base font-normal text-gray-500 truncate dark:text-gray-400"
>
Created On:
</p>
<p
className="ml-4 text-base font-semibold text-gray-900 truncate dark:text-white"
>
{agentData?.agents_type.createDateTime.split("T")[0]}
</p>

</li>
<li className="py-4">
<div className="flex items-center space-x-4">

<div className="inline-flex min-w-0">
<p
className="text-base font-normal text-gray-500 truncate dark:text-gray-400"
>
Created On:
</p>
<p
className="ml-4 text-base font-semibold text-gray-900 truncate dark:text-white"
>
{agentData?.agents_type.createDateTime.split("T")[0]}
</p>

</div>
</div>
</div>
</li>
</ul>
</li>
</ul>

</div>
</div>

</div>
<div className='w-1/2 flex items-center'>
{
loading
? (
<Spinner
color="info"
/>
)
: <div></div>

}
</div>

</div>
Expand Down
28 changes: 26 additions & 2 deletions src/components/organization/SharedIllustrate.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,11 +1,35 @@
import SharedIcon from '../../assets/shared.svg';


const SharedIllustrate = () => {

return (
<div className='mt-4 ml-4'>
<div className='mt-4 flex flex-row flex-wrap'>
<div>
<img src={SharedIcon} alt="dedicated" width={270} />
</div>
<div className='ml-8 max-w-xs'>
<h3 className="mb-2 text-xl font-bold text-gray-900 dark:text-white">
Your Hassle-Free Multi-Tenant Solution
</h3>
<ul className="list-disc">
<li>
<p className='mb-1 text-base font-normal text-gray-900 dark:text-white'>
Our Shared Agent is here to simplify your operations! Managed by CREDEBL on your organization's behalf, this multi-tenant solution allows multiple organizations to share the same agent. You'll benefit from shared resources and reduced operational burdens.
</p>
</li>
<li>
<p className='mb-1 text-base font-normal text-gray-900 dark:text-white'>
Leave the agent maintenance, updates, and technical aspects to CREDEBL, so your team can focus on core tasks without worrying about the backend. Enjoy improved productivity and efficiency while we handle the nitty-gritty.
</p>
</li>
<li>
<p className='mb-1 text-base font-normal text-gray-900 dark:text-white'>
Experience a seamless and hassle-free future with the Shared Agent. Let CREDEBL take care of everything, while you concentrate on achieving your goals.
</p>
</li>
</ul>

</div>
</div>
)

Expand Down
15 changes: 7 additions & 8 deletions src/components/organization/WalletSpinup.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,11 +12,11 @@ import { spinupDedicatedAgent, spinupSharedAgent } from '../../api/organization'
import { useEffect, useState } from 'react';

import type { AxiosResponse } from 'axios';
import SOCKET from '../../config/SocketConfig';
import { nanoid } from 'nanoid'
import InputCopy from '../InputCopy';
import DedicatedIllustrate from './DedicatedIllustrate';
import InputCopy from '../InputCopy';
import SOCKET from '../../config/SocketConfig';
import SharedIllustrate from './SharedIllustrate';
import { nanoid } from 'nanoid'

interface Values {
seed: string;
Expand Down Expand Up @@ -96,14 +96,14 @@ const WalletSpinup = (

const submitSharedWallet = async (values: ValuesShared) => {

setLoading(true)
const orgId = await getFromLocalStorage(storageKeys.ORG_ID)

const payload = {
label: values.label,
seed: seeds,
orgId: Number(orgId)
}
setLoading(true)
const spinupRes = await spinupSharedAgent(payload)
const { data } = spinupRes as AxiosResponse

Expand Down Expand Up @@ -253,7 +253,7 @@ const WalletSpinup = (
<Button
isProcessing={loading}
type="submit"
className='text-base font-medium text-center text-white bg-primary-700 rounded-lg hover:bg-primary-800 focus:ring-4 focus:ring-primary-300 sm:w-auto dark:bg-primary-600 dark:hover:bg-primary-700 dark:focus:ring-primary-800"'
className='float-right text-base font-medium text-center text-white bg-primary-700 rounded-lg hover:bg-primary-800 focus:ring-4 focus:ring-primary-300 sm:w-auto dark:bg-primary-600 dark:hover:bg-primary-700 dark:focus:ring-primary-800"'
>
Setup Agent
</Button>
Expand Down Expand Up @@ -323,7 +323,7 @@ const WalletSpinup = (
<Button
isProcessing={loading}
type="submit"
className='text-base font-medium text-center text-white bg-primary-700 rounded-lg hover:bg-primary-800 focus:ring-4 focus:ring-primary-300 sm:w-auto dark:bg-primary-600 dark:hover:bg-primary-700 dark:focus:ring-primary-800"'
className='float-right text-base font-medium text-center text-white bg-primary-700 rounded-lg hover:bg-primary-800 focus:ring-4 focus:ring-primary-300 sm:w-auto dark:bg-primary-600 dark:hover:bg-primary-700 dark:focus:ring-primary-800"'
>
Setup Agent
</Button>
Expand Down Expand Up @@ -366,8 +366,7 @@ const WalletSpinup = (

<div>
{
!agentSpinupCall
&& <div className="mt-4 flex max-w-lg flex-col gap-4">
!agentSpinupCall && !loading && <div className="mt-4 flex max-w-lg flex-col gap-4">
<ul className="items-center w-full text-sm font-medium text-gray-900 bg-white border border-gray-200 rounded-lg sm:flex dark:bg-gray-700 dark:border-gray-600 dark:text-white">
<li className="w-full border-b border-gray-200 sm:border-b-0 sm:border-r dark:border-gray-600">
<div className="flex items-center pl-3">
Expand Down
Loading

0 comments on commit 4a4ac78

Please sign in to comment.