Skip to content

Commit

Permalink
💄 Fix UI of Dynamic integrations Catalog
Browse files Browse the repository at this point in the history
  • Loading branch information
@mit-27
mit-27 committed May 21, 2024
1 parent e41ac61 commit 6390536
Show file tree
Hide file tree
Showing 2 changed files with 148 additions and 77 deletions.
189 changes: 112 additions & 77 deletions apps/embedded-catalog/react/src/components/PanoraDynamicCatalog.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import React,{useState,useEffect} from 'react'
import {findProviderByName, providersArray,categoriesVerticals,getLogoURL} from '@panora/shared';
import useOAuth from '@/hooks/useOAuth';
import config from '@/helpers/config';

interface DynamicCardProp {
projectId: string;
Expand All @@ -12,11 +13,12 @@ interface DynamicCardProp {

type DataState = { [key: string]: string[] };

const MainCatalog = ({projectId,returnUrl,linkedUserId,optionalApiUrl} : DynamicCardProp) => {
const DynamicCatalog = ({projectId,returnUrl,linkedUserId,optionalApiUrl} : DynamicCardProp) => {

const [selectedVertical, setselectedVertical] = useState(''); // Default to the first category
const [selectedVertical, setSelectedVertical] = useState(''); // Default to the first category
const [selectedProvider, setSelectedProvider] = useState('');
const [data,setData] = useState<DataState>({})
const [data,setData] = useState<DataState>({});
const [isLoading,setLoading] = useState(true);
const [error,setError] = useState(false)

const { open, isReady } = useOAuth({
Expand All @@ -33,7 +35,7 @@ const MainCatalog = ({projectId,returnUrl,linkedUserId,optionalApiUrl} : Dynamic

const FetchData = async () => {
try{
const res = await fetch(`http://localhost:3000/catalog-options/single?projectID=${projectId}`,{
const res = await fetch(`${optionalApiUrl? optionalApiUrl : config.API_URL!}/catalog-options/single?projectID=${projectId}`,{
method:'GET',
headers: {
'Content-Type': 'application/json',
Expand All @@ -43,20 +45,31 @@ const MainCatalog = ({projectId,returnUrl,linkedUserId,optionalApiUrl} : Dynamic
{
throw new Error("Not found")
}
const data = await res.json();
console.log(data)
setData(JSON.parse(data.selected_catalog))
setError(false)
} catch(error)
let data = await res.json();

data = JSON.parse(data.selected_catalog)
// console.log(data)
setData(data);
if(Object.keys(data).length >0)
{
setSelectedVertical(Object.keys(data)[0])
}
setError(false);
setLoading(false);

}
catch(error)
{
setError(true)
setError(true);
setLoading(false);
console.log(error)
}
}

if(projectId===undefined || !projectId.match('[0-9a-f]{8}-[0-9a-f]{4}-[1-5][0-9a-f]{3}-[89ab][0-9a-f]{3}-[0-9a-f]{12}'))
{
setError(true)
setError(true);
setLoading(false);
return;
}

Expand All @@ -71,86 +84,108 @@ const MainCatalog = ({projectId,returnUrl,linkedUserId,optionalApiUrl} : Dynamic
};

const handleCategoryClick = (category: string) => {
setselectedVertical(category);
setSelectedVertical(category);
};

const onConnect = () => {
open(() => {
console.log("Auth completed!")
});
}


if(isLoading)
{
return (
<>
</>
)
}


return (
<div className='h-screen flex items-center justify-center'>
<div className="w-[26rem] rounded-3xl bg-[#1d1d1d] text-white">
{error ? (
<>
<div>Error</div>
</>
)
:
(
<>
<div className=" flex items-center justify-center">
{/* <img src={img} width={"30px"} className="mx-3 mb-4 w-12 h-12 rounded-xl"/> */}
{/* <h5 className="mb-2 text-2xl font-semibold tracking-tight text-gray-900 dark:text-white">Select your Integration</h5> */}
</div>
<div className="p-4 max-h-[32rem] overflow-auto scrollbar-hide">
<div className="flex mb-4 outline-none flex-wrap">
{data && Object.keys(data).map((vertical) => (
<button
key={vertical}
className={`px-3 py-1 mb-2 mr-1 rounded-full text-white text-xs font-medium transition duration-150 ${selectedVertical === vertical ? 'bg-indigo-600 hover:bg-indigo-500 ' : 'bg-neutral-700 hover:bg-neutral-600'}`}
onClick={() => handleCategoryClick(vertical)}
<>
{error ?
(
<div className='w-[21rem] h-[10rem]'>
<div
className=" bg-red-500 text-white font-bold rounded-t px-4 py-2 shadow p-4"
>
Incorrect Attributes!
</div>
<div className='border border-t-0 border-red-400 rounded-b bg-red-100 px-4 py-3 text-red-700'>
<p>Please enter valid attributes for the Component.</p>
</div>
</div>
)
:
(
<>
<div
className="w-[26rem] h-[26rem] p-2 bg-[#1d1d1d] border-[0.007em] border-gray-200 rounded-lg shadow dark:bg-[#1d1d1d] hover:border-gray-200 transition-colors duration-200"
>
<div className="flex items-center justify-center">
{/* <img src={img} width={"30px"} className="mx-3 mb-4 w-12 h-12 rounded-xl"/> */}
<h5 className="mb-2 text-2xl font-semibold tracking-tight text-gray-900 text-white">Select your Integration</h5>

</div>

<div className="p-4 h-[19rem]">
{data && Object.keys(data).length==0 && (
<>
<h4 className='text-white'>Please select providers from dashboard to display in Catalog.</h4>
</>
)}
<div className="flex mb-4 outline-none flex-wrap">
{data && Object.keys(data).length>0 && Object.keys(data).map((vertical) => (
<button
key={vertical}
className={`px-3 py-1 mb-2 mr-1 rounded-full text-white text-xs font-medium transition duration-150 ${selectedVertical === vertical ? 'bg-indigo-600 hover:bg-indigo-500 ' : 'bg-neutral-700 hover:bg-neutral-600'}`}
onClick={() => handleCategoryClick(vertical)}
>
{vertical}
</button>
))}
</div>
{(
<>
<div className='h-2/3 no-scrollbar overflow-y-auto px-2'>
{selectedVertical!=='' && data && data[selectedVertical].map((provider)=> (
<div
key={provider}
className={`flex items-center justify-between px-4 py-2 my-2 ${selectedProvider === provider.toLowerCase() ? 'bg-indigo-600 hover:bg-indigo-500' : 'bg-neutral-900 hover:bg-neutral-800'} border-black hover:border-indigo-800 rounded-xl transition duration-150 cursor-pointer`}
onClick={() => handleWalletClick(provider)}
>
{vertical}
</button>
))}
</div>
{(
<>
{selectedVertical!=='' && data && data[selectedVertical].map((provider) => (

// <button
// key={provider}
// className={`px-3 py-1 mb-2 mr-1 rounded-full text-white text-xs font-medium transition duration-150 ${selectedProvider === provider ? 'bg-indigo-600 hover:bg-indigo-500 ' : 'bg-neutral-700 hover:bg-neutral-600'}`}
// onClick={() => handleWalletClick(provider)}
// >
// {provider.substring(0,1).toUpperCase().concat(provider.substring(1,provider.length))}
// </button>

<div
key={provider}
className={`flex items-center justify-between px-4 py-2 my-2 ${selectedProvider === provider.toLowerCase() ? 'bg-indigo-600 hover:bg-indigo-500' : 'bg-neutral-900 hover:bg-neutral-800'} border-black hover:border-indigo-800 rounded-xl transition duration-150 cursor-pointer`}
onClick={() => handleWalletClick(provider)}
>
<div className="flex items-center">
<img className="w-8 h-8 rounded-lg mr-3" src={getLogoURL(provider)} alt={provider} />
<span>{provider.substring(0,1).toUpperCase().concat(provider.substring(1,provider.length))}</span>
</div>

</div>
))}
<div className="flex items-center">
<img className="w-8 h-8 rounded-lg mr-3" src={getLogoURL(provider.toLowerCase())} alt={provider} />
<span className='text-white'>{provider.substring(0,1).toUpperCase().concat(provider.substring(1,provider.length))}</span>
</div>

</>
)}
</div>

<div className='flex justify-center items-center m-2'>
<button
</div>
))}
</div>
</>
)}
</div>

<div className='flex m-2'>
<button
onClick={() => onConnect()}
disabled={selectedProvider==='' || selectedVertical===''}
className={`text-white ${(selectedProvider==='' || selectedVertical==='') ? "opacity-50 cursor-not-allowed" : "hover:bg-neutral-800"} bg-neutral-700 focus:outline-none focus:ring-4 focus:ring-gray-300 font-medium rounded text-sm px-5 py-2.5 me-2 mb-2 dark:bg-gray-800 dark:hover:bg-gray-700 dark:focus:ring-gray-700 dark:border-gray-700`}>
Click to Connect
</button>
</div>
</>
)
}
</div>
</div>

className={`text-white ${(selectedProvider==='' || selectedVertical==='') ? "opacity-50 cursor-not-allowed" : ""} focus:outline-none focus:ring-4 focus:ring-gray-300 font-medium rounded text-sm px-5 py-2.5 me-2 mb-2 bg-indigo-600 hover:bg-indigo-700 focus:ring-gray-700 border-gray-700 w-full`}
>
Connect
</button>

</div>

</div>
</>
)
}
</>
)
}

export default MainCatalog
export default DynamicCatalog
36 changes: 36 additions & 0 deletions apps/embedded-catalog/react/src/global.css
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,39 @@
@tailwind base;
@tailwind components;
@tailwind utilities;

@layer utilities {
/* Chrome, Safari and Opera */
.no-scrollbar::-webkit-scrollbar {
scrollbar-face-color: #646464;
scrollbar-base-color: #646464;
scrollbar-3dlight-color: #646464;
scrollbar-highlight-color: #646464;
scrollbar-track-color: #000;
scrollbar-arrow-color: #000;
scrollbar-shadow-color: #646464;
scrollbar-dark-shadow-color: #646464;
}

.no-scrollbar {
/* -ms-overflow-style: none; IE and Edge */
/* scrollbar-width: 1; Firefox */
scrollbar-face-color: #646464;
scrollbar-base-color: #646464;
scrollbar-3dlight-color: #646464;
scrollbar-highlight-color: #646464;
scrollbar-track-color: #000;
scrollbar-arrow-color: #000;
scrollbar-shadow-color: #646464;
scrollbar-dark-shadow-color: #646464;

}

::-webkit-scrollbar { width: 8px; height: 3px;}
::-webkit-scrollbar-button { background-color: #666; }
::-webkit-scrollbar-track { background-color: #646464;}
::-webkit-scrollbar-track-piece { background-color: #000;}
::-webkit-scrollbar-thumb { height: 50px; background-color: #666; border-radius: 3px;}
::-webkit-scrollbar-corner { background-color: #646464;}
::-webkit-resizer { background-color: #666;}
}

0 comments on commit 6390536

Please sign in to comment.