Skip to content

Commit

Permalink
updated
Browse files Browse the repository at this point in the history
  • Loading branch information
@Paulsvgr
Paulsvgr committed Feb 9, 2024
1 parent fc7f0ad commit 02a3e9a
Show file tree
Hide file tree
Showing 7 changed files with 79 additions and 16 deletions.
65 changes: 65 additions & 0 deletions src/admin/MessageEditModal.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,65 @@
const MessageEditModal = ({ message, onSave, onClose }) => {
const messageId = message.id || '';
console.log(message)

const handleSave = () => {
var messageData = {
seen: true,
};
onSave(messageId, messageData);
};

const handleDelete = () => {
if (window.confirm('Are you sure you want to delete this message?')) {
onSave(messageId, null);
}
};

const handleModalClick = (e) => {
// Prmessage click inside the modal from closing it
e.stopPropagation();
};

return (
<div className="fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full"
onClick={onClose}>
<div className="relative flex justify-center items-center h-full">
<div className='p-5 border mx-auto shadow-lg rounded-md bg-white'
onClick={handleModalClick}>
<h3 className="text-lg font-semibold">See Message</h3>
<div className='flex flex-col'>
<div className='flex flex-wrap justify-between w-full'>
<div className='flex flex-wrap'>
<h3 className="w-full mt-2 font-semibold">Name</h3>
<span>{message.name}</span>
<h3 className="w-full mt-2 font-semibold">Email</h3>
</div>
<div className='flex flex-wrap'>
<h3 className="w-full font-semibold">Date</h3>
<p>{message.date}</p>
<h3 className="w-full font-semibold">UserUUID</h3>
<p>{message.useruuid}</p>
</div>
</div>
<span>{message.email}</span>
<h3 className="w-full font-semibold">Message</h3>
<p>{message.message}</p>
</div>
<div className="flex justify-end mt-4">
<button onClick={handleSave} className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded mr-2">
Save as seen
</button>
<button onClick={handleDelete} className="bg-red-500 hover:bg-red-700 text-white font-bold py-2 px-4 rounded mr-2">
Delete
</button>
<button onClick={onClose} className="bg-gray-500 hover:bg-gray-700 text-white font-bold py-2 px-4 rounded">
Close
</button>
</div>
</div>
</div>
</div>
);
};

export default MessageEditModal;
10 changes: 4 additions & 6 deletions src/admin/MessagesPage.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -51,7 +51,7 @@ function MessagePage({ addMessage }) {
setEditingMessage(message);
};

const handleUpdateMessage = async (messageId, about) => {
const handleSaveMessage = async (messageId, about) => {
try {
let response;
if (about === null) {
Expand Down Expand Up @@ -82,16 +82,14 @@ function MessagePage({ addMessage }) {
return status ? 'text-gray-500' : 'text-green-700';
};

const formattedPercentage = message.video_percentage.toFixed(0);

return (
<div
className="flex justify-between shadow-xl w-full border-b border-gray-200 p-4">
<div className='flex w-full justify-between'>
<h3 className={`text-lg mr-2 font-semibold ${getStatusClass(message.status)}`}>
{formattedPercentage}% {message.status}
{message.status ? 'seen' : 'new'}
</h3>
<h3 className="text-lg font-semibold"> - {message.video_name}</h3>
<h3 className="text-lg font-semibold"> - {message.email}</h3>
<p className='text-lg ml-4'>{new Date(message.date).toLocaleDateString()}</p>
</div>
<div className='flex items-center'>
Expand Down Expand Up @@ -130,7 +128,7 @@ function MessagePage({ addMessage }) {
{editingMessage && (
<MessageEditModal
message={editingMessage}
onSave={handleUpdateMessage}
onSave={handleSaveMessage}
onClose={() => setEditingMessage(null)}
/>
)}
Expand Down
6 changes: 3 additions & 3 deletions src/components/Match.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ const MatchComponent = ({ Match, onMatchClick, MatchTitle, userUUID }) => {
const isValidMatch = Match && (Match.startframe != null);
const [hasClicked, setHasClicked] = useState(false);

const videoYoutubeId = Match.video.link.match(/[?&]v=([^&]+)/)[1]
const videoYoutubeId = Match.video?.link.match(/[?&]v=([^&]+)/)[1]

const videoEmbedLink = `https://www.youtube.com/embed/${videoYoutubeId}?enablejsapi=1`

Expand Down Expand Up @@ -42,7 +42,7 @@ const MatchComponent = ({ Match, onMatchClick, MatchTitle, userUUID }) => {
return isValidMatch ? (
<div
key={Match?.id}
className="max-w-xl mx-auto p-6 bg-white shadow-lg rounded-lg transition-opacity duration-300 ease-in-out hover:shadow-2xl"
className="max-w-xl mx-auto p-6 bg-white rounded-lg transition-opacity duration-300 ease-in-out"
>
<div className="space-y-4">
{MatchTitle && (
Expand All @@ -63,7 +63,7 @@ const MatchComponent = ({ Match, onMatchClick, MatchTitle, userUUID }) => {
{Match.oponent2 ? Match.oponent2.toUpperCase() : "Opponent 2 Undefined"}
</span>
</div>
<div className="flex justify-center gap-4 mt-4">
<div className="flex justify-center items-end h-full gap-4 mt-4">
<button
className="bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 px-6 rounded shadow-md transition duration-150 ease-in-out focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50 flex items-center justify-center"
onClick={handleSeeMatchClick}
Expand Down
2 changes: 1 addition & 1 deletion src/components/Video.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ const VideoComponent = ({ Video }) => {

const isValidVideo = Video && Video.percentage > 0;

const videoYoutubeId = Video.link.match(/[?&]v=([^&]+)/)[1];
const videoYoutubeId = Video.link?.match(/[?&]v=([^&]+)/)[1];

const YouTubeThumbnail = `https://img.youtube.com/vi/${videoYoutubeId}/0.jpg`;

Expand Down
8 changes: 4 additions & 4 deletions src/pages/HomePage.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -123,8 +123,8 @@ const HomePage = ({ addMessage, userUUID }) => {
const handleChoiceChange = (choice) => {
if (selectedChoice !== choice) {
setSelectedChoice(choice);
setPage(1);
setElements([]);
setPage(1);
}
};

Expand Down Expand Up @@ -164,7 +164,7 @@ const HomePage = ({ addMessage, userUUID }) => {
</h2>
)}
{matches.length > 0 && (
<div className='grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-8 md:p-8 p-4'>
<div className='grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-8 md:p-8 p-4 items-stretch self-stretch'>
{matches.map(match => (
<MatchComponent
key={match?.id}
Expand Down Expand Up @@ -261,13 +261,13 @@ const HomePage = ({ addMessage, userUUID }) => {
<div className="text-white text-center text-2xl font-bold mb-10 mt-20 lg:text-4xl text-2xl">
{t('Available Matches')}:
</div>
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-8 md:p-8 p-4">
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-8 md:p-8 p-4 items-stretch self-stretch">
{Elements?.map((Element) => (
<MatchComponent
key={Element?.id}
Match={Element}
onMatchClick={onMatchClick}
MatchTitle={Element.video.name}
MatchTitle={Element.video?.name}
userUUID={userUUID}
/>
))}
Expand Down
2 changes: 1 addition & 1 deletion src/pages/SearchEventPage.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -210,7 +210,7 @@ const SearchEventPage = ({ addMessage, userUUID }) => {
<div className="text-white text-center text-2xl font-bold mt-4 mb-10">
{t('Available Matches')}:
</div>
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-8 md:p-8 p-4">
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-8 md:p-8 p-4 items-stretch self-stretch">
{Elements?.map((Element) => (
<MatchComponent
key={Element?.id}
Expand Down
2 changes: 1 addition & 1 deletion src/pages/SearchVideoPage.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -165,7 +165,7 @@ const SearchVideoPage = ({ addMessage, userUUID }) => {
<div className="text-white text-center text-2xl font-bold mt-4 mb-10">
{t('Available Matches')}:
</div>
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-8 md:p-8 p-4">
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-8 md:p-8 p-4 items-stretch self-stretch">
{Videos?.map((Element) => (
<MatchComponent key={Element?.id} Match={Element} onMatchClick={onMatchClick} MatchTitle={null} userUUID={userUUID} />
))}
Expand Down

0 comments on commit 02a3e9a

Please sign in to comment.