Skip to content

Commit

Permalink
fix code format
Browse files Browse the repository at this point in the history
  • Loading branch information
@gkatrakazas
gkatrakazas committed Feb 28, 2024
1 parent 0879dbc commit 9aa658c
Show file tree
Hide file tree
Showing 3 changed files with 109 additions and 109 deletions.
6 changes: 3 additions & 3 deletions src/components/useCheckURL.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -61,10 +61,10 @@ function useCheckURL(urlToCheck: string): {

if (urlToCheck && isLoggedIn && window.location.pathname === "/cb") {
(async () => {
await communicationHandler(urlToCheck);
await communicationHandler(urlToCheck);
})();
}

}, [api, keystore, urlToCheck, isLoggedIn]);

useEffect(() => {
Expand All @@ -84,7 +84,7 @@ function useCheckURL(urlToCheck: string): {
}
}, [api, keystore, selectionMap]);

return {showSelectCredentialsPopup, setShowSelectCredentialsPopup, setSelectionMap, conformantCredentialsMap, showPinInputPopup, setShowPinInputPopup };
return { showSelectCredentialsPopup, setShowSelectCredentialsPopup, setSelectionMap, conformantCredentialsMap, showPinInputPopup, setShowPinInputPopup };
}

export default useCheckURL;
40 changes: 20 additions & 20 deletions src/pages/Home/CredentialDetail.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@ const CredentialDetail = () => {
const [credential, setCredentials] = useState(null);
const [showFullscreenImgPopup, setShowFullscreenImgPopup] = useState(false);
const [showDeletePopup, setShowDeletePopup] = useState(false);
const [loading, setLoading] = useState(false);
const [loading, setLoading] = useState(false);
const { t } = useTranslation();

useEffect(() => {
Expand Down Expand Up @@ -52,8 +52,8 @@ const CredentialDetail = () => {
<div className="flex flex-col sm:flex-row sm:items-center">
<div className="flex items-center">
<Link to="/">
<h1 className="text-2xl mb-2 font-bold text-gray-500">{t('common.navItemCredentials')}</h1>
</Link>
<h1 className="text-2xl mb-2 font-bold text-gray-500">{t('common.navItemCredentials')}</h1>
</Link>
<BiRightArrowAlt className="text-2xl mb-2 text-custom-blue" />
</div>
{credential && (
Expand All @@ -67,11 +67,11 @@ const CredentialDetail = () => {
{/* Block 1: credential */}
<div className='lg:w-1/2'>
{credential && credential.src ? (
// Open the modal when the credential is clicked
<div className="relative rounded-xl xl:w-4/5 pt-5 md:w-full sm:w-full overflow-hidden transition-shadow shadow-md hover:shadow-lg cursor-pointer w-full" onClick={() => setShowFullscreenImgPopup(true)}>
<img src={credential.src} alt={credential.alt} className="w-full object-cover rounded-xl" />
// Open the modal when the credential is clicked
<div className="relative rounded-xl xl:w-4/5 pt-5 md:w-full sm:w-full overflow-hidden transition-shadow shadow-md hover:shadow-lg cursor-pointer w-full" onClick={() => setShowFullscreenImgPopup(true)}>
<img src={credential.src} alt={credential.alt} className="w-full object-cover rounded-xl" />

</div>
</div>
) : (
<></>
)}
Expand All @@ -81,7 +81,7 @@ const CredentialDetail = () => {
{credential && <CredentialInfo credential={credential} />} {/* Use the CredentialInfo component */}
</div>

<CredentialDeleteButton onDelete={() => { setShowDeletePopup(true); }} />
<CredentialDeleteButton onDelete={() => { setShowDeletePopup(true); }} />

<div className="flex flex-col lg:flex-row mt-4">
<div className="lg:w-1/2">
Expand All @@ -105,18 +105,18 @@ const CredentialDetail = () => {
{showDeletePopup && credential && (

<DeletePopup
isOpen={showDeletePopup}
onConfirm={handleSureDelete}
onCancel={() => setShowDeletePopup(false)}
message={
<span>
{t('pageCredentials.deletePopup.messagePart1')}{' '} <strong> {credential.type.replace(/([A-Z])/g, ' $1')}</strong> {t('pageCredentials.deletePopup.messagePart2')}
<br /> {t('pageCredentials.deletePopup.messagePart3')}{' '} <strong>{t('pageCredentials.deletePopup.messagePart4')}</strong>
</span>
}
loading={loading}
/>
)}
isOpen={showDeletePopup}
onConfirm={handleSureDelete}
onCancel={() => setShowDeletePopup(false)}
message={
<span>
{t('pageCredentials.deletePopup.messagePart1')}{' '} <strong> {credential.type.replace(/([A-Z])/g, ' $1')}</strong> {t('pageCredentials.deletePopup.messagePart2')}
<br /> {t('pageCredentials.deletePopup.messagePart3')}{' '} <strong>{t('pageCredentials.deletePopup.messagePart4')}</strong>
</span>
}
loading={loading}
/>
)}
</>
);
};
Expand Down
172 changes: 86 additions & 86 deletions src/pages/Home/Home.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ import { useTranslation } from 'react-i18next';

import { BsPlusCircle } from 'react-icons/bs';
import { BiLeftArrow, BiRightArrow } from 'react-icons/bi';
import {BsQrCodeScan} from 'react-icons/bs'
import { BsQrCodeScan } from 'react-icons/bs'

import Slider from 'react-slick';
import "slick-carousel/slick/slick.css";
Expand All @@ -22,17 +22,17 @@ import FullscreenPopup from '../../components/Popups/FullscreenImg';
import DeletePopup from '../../components/Popups/DeletePopup';

const Home = () => {
const api = useApi();
const [credentials, setCredentials] = useState([]);
const [isSmallScreen, setIsSmallScreen] = useState(window.innerWidth < 768);
const [currentSlide, setCurrentSlide] = useState(1);
const api = useApi();
const [credentials, setCredentials] = useState([]);
const [isSmallScreen, setIsSmallScreen] = useState(window.innerWidth < 768);
const [currentSlide, setCurrentSlide] = useState(1);
const [showFullscreenImgPopup, setShowFullscreenImgPopup] = useState(false);
const [selectedCredential, setSelectedCredential] = useState(null);
const [showDeletePopup, setShowDeletePopup] = useState(false);
const [loading, setLoading] = useState(false);
const [showDeletePopup, setShowDeletePopup] = useState(false);
const [loading, setLoading] = useState(false);

const navigate = useNavigate();
const sliderRef = useRef();
const navigate = useNavigate();
const sliderRef = useRef();
const { t } = useTranslation();

const settings = {
Expand All @@ -48,17 +48,17 @@ const Home = () => {
style: { margin: '0 10px' },
};

useEffect(() => {
const handleResize = () => {
setIsSmallScreen(window.innerWidth < 768);
};
useEffect(() => {
const handleResize = () => {
setIsSmallScreen(window.innerWidth < 768);
};

window.addEventListener('resize', handleResize);
window.addEventListener('resize', handleResize);

return () => {
window.removeEventListener('resize', handleResize);
};
}, []);
return () => {
window.removeEventListener('resize', handleResize);
};
}, []);

useEffect(() => {
const getData = async () => {
Expand All @@ -69,13 +69,13 @@ const Home = () => {
getData();
}, [api]);

const handleAddCredential = () => {
navigate('/add');
};
const handleAddCredential = () => {
navigate('/add');
};

const handleImageClick = (credential) => {
navigate(`/credential/${credential.id}`);
};
const handleImageClick = (credential) => {
navigate(`/credential/${credential.id}`);
};

// QR Code part
const [isQRScannerOpen, setQRScannerOpen] = useState(false);
Expand All @@ -100,41 +100,41 @@ const Home = () => {
window.location.href = '/';
};

return (
<>
<div className="sm:px-6 w-full">
<div className="flex justify-between items-center">
<h1 className="text-2xl font-bold text-custom-blue">{t('common.navItemCredentials')}</h1>
return (
<>
<div className="sm:px-6 w-full">
<div className="flex justify-between items-center">
<h1 className="text-2xl font-bold text-custom-blue">{t('common.navItemCredentials')}</h1>

<div className='flex gap-x-1'>
{ isSmallScreen && (
{isSmallScreen && (
<button
className="px-2 py-2 mb-2 text-white bg-custom-blue hover:bg-custom-blue-hover focus:ring-4 focus:outline-none focus:ring-custom-blue font-medium rounded-lg text-sm px-4 py-2 text-center dark:bg-custom-blue-hover dark:hover:bg-custom-blue-hover dark:focus:ring-custom-blue-hover"
onClick={openQRScanner} // Open the QR code scanner modal
>
<div className="flex items-center">
<BsQrCodeScan size={20} className="text-white" />
</div>
</button>
)}
<button
className="px-2 py-2 mb-2 text-white bg-custom-blue hover:bg-custom-blue-hover focus:ring-4 focus:outline-none focus:ring-custom-blue font-medium rounded-lg text-sm px-4 py-2 text-center dark:bg-custom-blue-hover dark:hover:bg-custom-blue-hover dark:focus:ring-custom-blue-hover"
onClick={openQRScanner} // Open the QR code scanner modal
>
<div className="flex items-center">
<BsQrCodeScan size={20} className="text-white" />
</div>
</button>
)}
<button
className="px-2 py-2 mb-2 text-white bg-custom-blue hover:bg-custom-blue-hover focus:ring-4 focus:outline-none focus:ring-custom-blue font-medium rounded-lg text-sm px-4 py-2 text-center dark:bg-custom-blue-hover dark:hover:bg-custom-blue-hover dark:focus:ring-custom-blue-hover"
onClick={handleAddCredential}
>
<div className="flex items-center">
<BsPlusCircle size={20} className="text-white" />
<span className="hidden sm:inline">&nbsp; {t('common.navItemCredentials')}</span>
</div>
</button>
className="px-2 py-2 mb-2 text-white bg-custom-blue hover:bg-custom-blue-hover focus:ring-4 focus:outline-none focus:ring-custom-blue font-medium rounded-lg text-sm px-4 py-2 text-center dark:bg-custom-blue-hover dark:hover:bg-custom-blue-hover dark:focus:ring-custom-blue-hover"
onClick={handleAddCredential}
>
<div className="flex items-center">
<BsPlusCircle size={20} className="text-white" />
<span className="hidden sm:inline">&nbsp; {t('common.navItemCredentials')}</span>
</div>
</button>
</div>


</div>
<hr className="mb-2 border-t border-custom-blue/80" />
<p className="italic pd-2 text-gray-700">{t('pageCredentials.description')}</p>
<div className='my-4'>
{isSmallScreen ? (
<>
</div>
<hr className="mb-2 border-t border-custom-blue/80" />
<p className="italic pd-2 text-gray-700">{t('pageCredentials.description')}</p>
<div className='my-4'>
{isSmallScreen ? (
<>

{credentials.length === 0 ? (
<div
Expand All @@ -156,7 +156,7 @@ const Home = () => {
<Slider ref={sliderRef} {...settings}>
{credentials.map((credential) => (
<>
<div className="relative rounded-xl xl:w-4/5 md:w-full sm:w-full overflow-hidden transition-shadow shadow-md hover:shadow-lg cursor-pointer w-full" onClick={() => {setShowFullscreenImgPopup(true);setSelectedCredential(credential);}}>
<div className="relative rounded-xl xl:w-4/5 md:w-full sm:w-full overflow-hidden transition-shadow shadow-md hover:shadow-lg cursor-pointer w-full" onClick={() => { setShowFullscreenImgPopup(true); setSelectedCredential(credential); }}>
<img src={credential.src} alt={credential.alt} className="w-full h-full object-cover rounded-xl" />
</div>
<div className="flex items-center justify-end mt-2 mr-3">
Expand All @@ -169,7 +169,7 @@ const Home = () => {
</button>
</div>
<CredentialInfo credential={credential} />
<CredentialDeleteButton onDelete={() => { setShowDeletePopup(true); setSelectedCredential(credential); }} />
<CredentialDeleteButton onDelete={() => { setShowDeletePopup(true); setSelectedCredential(credential); }} />
<CredentialJson credential={credential} />

</>
Expand All @@ -178,35 +178,35 @@ const Home = () => {
</>
)}
</>
) : (
<div className="grid grid-cols-1 sm:grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-20">
{credentials.map((credential) => (
<div
key={credential.id}
className="relative rounded-xl overflow-hidden transition-shadow shadow-md hover:shadow-lg cursor-pointer"
onClick={() => handleImageClick(credential)}
>
<img src={credential.src} alt={credential.alt} className="w-full h-full object-cover rounded-xl" />
</div>
))}
) : (
<div className="grid grid-cols-1 sm:grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-20">
{credentials.map((credential) => (
<div
key={credential.id}
className="relative rounded-xl overflow-hidden transition-shadow shadow-md hover:shadow-lg cursor-pointer"
onClick={handleAddCredential}
onClick={() => handleImageClick(credential)}
>
<img
src={addImage}
alt="add new credential"
className="w-full h-auto rounded-xl opacity-100 hover:opacity-120"
/>
<div className="absolute inset-0 flex flex-col items-center justify-center text-center">
<BsPlusCircle size={60} className="text-white mb-2 mt-4" />
<span className="text-white font-semibold">{t('pageCredentials.addCardTitle')}</span>
</div>
<img src={credential.src} alt={credential.alt} className="w-full h-full object-cover rounded-xl" />
</div>
))}
<div
className="relative rounded-xl overflow-hidden transition-shadow shadow-md hover:shadow-lg cursor-pointer"
onClick={handleAddCredential}
>
<img
src={addImage}
alt="add new credential"
className="w-full h-auto rounded-xl opacity-100 hover:opacity-120"
/>
<div className="absolute inset-0 flex flex-col items-center justify-center text-center">
<BsPlusCircle size={60} className="text-white mb-2 mt-4" />
<span className="text-white font-semibold">{t('pageCredentials.addCardTitle')}</span>
</div>
</div>
)}
</div>
</div>
</div>
)}
</div>
</div>
{/* Modal for Fullscreen credential */}
{showFullscreenImgPopup && (
<FullscreenPopup
Expand All @@ -221,8 +221,8 @@ const Home = () => {
{/* QR Code Scanner Modal */}
{isQRScannerOpen && (
<div className="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-75">
<QRCodeScanner
onClose={closeQRScanner}
<QRCodeScanner
onClose={closeQRScanner}
/>
</div>
)}
Expand All @@ -236,14 +236,14 @@ const Home = () => {
message={
<span>
{t('pageCredentials.deletePopup.messagePart1')}{' '} <strong> {selectedCredential.type.replace(/([A-Z])/g, ' $1')}</strong> {t('pageCredentials.deletePopup.messagePart2')}
<br /> {t('pageCredentials.deletePopup.messagePart3')}{' '} <strong>{t('pageCredentials.deletePopup.messagePart4')}</strong>
</span>
<br /> {t('pageCredentials.deletePopup.messagePart3')}{' '} <strong>{t('pageCredentials.deletePopup.messagePart4')}</strong>
</span>
}
loading={loading}
/>
)}
</>
);
)}
</>
);
};

export default Home;

0 comments on commit 9aa658c

Please sign in to comment.