mirror of
https://github.com/rzmk/learnhouse.git
synced 2025-12-19 04:19:25 +00:00
chore: refactor frontend components folder
This commit is contained in:
swve
parent
46f016f661
commit
5a746a946d
106 changed files with 159 additions and 164 deletions
|
|
@ -0,0 +1,176 @@
|
|||
import FormLayout, {
|
||||
FormField,
|
||||
FormLabelAndMessage,
|
||||
Input,
|
||||
Textarea,
|
||||
} from '@components/Objects/StyledElements/Form/Form';
|
||||
import { useFormik } from 'formik';
|
||||
import { AlertTriangle } from 'lucide-react';
|
||||
import * as Form from '@radix-ui/react-form';
|
||||
import React, { useEffect, useState } from 'react';
|
||||
import ThumbnailUpdate from './ThumbnailUpdate';
|
||||
import { useCourse, useCourseDispatch } from '@components/Contexts/CourseContext';
|
||||
|
||||
type EditCourseStructureProps = {
|
||||
orgslug: string
|
||||
course_uuid?: string
|
||||
}
|
||||
|
||||
const validate = (values: any) => {
|
||||
const errors = {} as any;
|
||||
|
||||
if (!values.name) {
|
||||
errors.name = 'Required';
|
||||
} else if (values.name.length > 100) {
|
||||
errors.name = 'Must be 100 characters or less';
|
||||
}
|
||||
|
||||
if (!values.description) {
|
||||
errors.description = 'Required';
|
||||
} else if (values.description.length > 1000) {
|
||||
errors.description = 'Must be 1000 characters or less';
|
||||
}
|
||||
|
||||
if (!values.learnings) {
|
||||
errors.learnings = 'Required';
|
||||
}
|
||||
|
||||
return errors;
|
||||
};
|
||||
|
||||
function EditCourseGeneral(props: EditCourseStructureProps) {
|
||||
const [error, setError] = useState('');
|
||||
const course = useCourse();
|
||||
const dispatchCourse = useCourseDispatch() as any;
|
||||
const { isLoading, courseStructure } = course as any;
|
||||
|
||||
const formik = useFormik({
|
||||
initialValues: {
|
||||
name: courseStructure?.name || '',
|
||||
description: courseStructure?.description || '',
|
||||
about: courseStructure?.about || '',
|
||||
learnings: courseStructure?.learnings || '',
|
||||
tags: courseStructure?.tags || '',
|
||||
public: courseStructure?.public || '',
|
||||
},
|
||||
validate,
|
||||
onSubmit: async values => {
|
||||
try {
|
||||
// Add your submission logic here
|
||||
dispatchCourse({ type: 'setIsSaved' });
|
||||
} catch (e) {
|
||||
setError('Failed to save course structure.');
|
||||
}
|
||||
},
|
||||
enableReinitialize: true,
|
||||
}) as any;
|
||||
|
||||
useEffect(() => {
|
||||
if (!isLoading) {
|
||||
const formikValues = formik.values as any;
|
||||
const initialValues = formik.initialValues as any;
|
||||
const valuesChanged = Object.keys(formikValues).some(
|
||||
key => formikValues[key] !== initialValues[key]
|
||||
);
|
||||
|
||||
if (valuesChanged) {
|
||||
dispatchCourse({ type: 'setIsNotSaved' });
|
||||
const updatedCourse = {
|
||||
...courseStructure,
|
||||
...formikValues,
|
||||
};
|
||||
dispatchCourse({ type: 'setCourseStructure', payload: updatedCourse });
|
||||
}
|
||||
}
|
||||
}, [formik.values, isLoading]);
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div className="h-6"></div>
|
||||
<div className="ml-10 mr-10 mx-auto bg-white rounded-xl shadow-sm px-6 py-5">
|
||||
{courseStructure && (
|
||||
<div className="editcourse-form">
|
||||
{error && (
|
||||
<div className="flex justify-center bg-red-200 rounded-md text-red-950 space-x-2 items-center p-4 transition-all shadow-sm">
|
||||
<AlertTriangle size={18} />
|
||||
<div className="font-bold text-sm">{error}</div>
|
||||
</div>
|
||||
)}
|
||||
<FormLayout onSubmit={formik.handleSubmit}>
|
||||
<FormField name="name">
|
||||
<FormLabelAndMessage label="Name" message={formik.errors.name} />
|
||||
<Form.Control asChild>
|
||||
<Input
|
||||
style={{ backgroundColor: 'white' }}
|
||||
onChange={formik.handleChange}
|
||||
value={formik.values.name}
|
||||
type="text"
|
||||
required
|
||||
/>
|
||||
</Form.Control>
|
||||
</FormField>
|
||||
|
||||
<FormField name="description">
|
||||
<FormLabelAndMessage label="Description" message={formik.errors.description} />
|
||||
<Form.Control asChild>
|
||||
<Input
|
||||
style={{ backgroundColor: 'white' }}
|
||||
onChange={formik.handleChange}
|
||||
value={formik.values.description}
|
||||
type="text"
|
||||
required
|
||||
/>
|
||||
</Form.Control>
|
||||
</FormField>
|
||||
|
||||
<FormField name="about">
|
||||
<FormLabelAndMessage label="About" message={formik.errors.about} />
|
||||
<Form.Control asChild>
|
||||
<Textarea
|
||||
style={{ backgroundColor: 'white' }}
|
||||
onChange={formik.handleChange}
|
||||
value={formik.values.about}
|
||||
required
|
||||
/>
|
||||
</Form.Control>
|
||||
</FormField>
|
||||
|
||||
<FormField name="learnings">
|
||||
<FormLabelAndMessage label="Learnings" message={formik.errors.learnings} />
|
||||
<Form.Control asChild>
|
||||
<Textarea
|
||||
style={{ backgroundColor: 'white' }}
|
||||
onChange={formik.handleChange}
|
||||
value={formik.values.learnings}
|
||||
required
|
||||
/>
|
||||
</Form.Control>
|
||||
</FormField>
|
||||
|
||||
<FormField name="tags">
|
||||
<FormLabelAndMessage label="Tags" message={formik.errors.tags} />
|
||||
<Form.Control asChild>
|
||||
<Textarea
|
||||
style={{ backgroundColor: 'white' }}
|
||||
onChange={formik.handleChange}
|
||||
value={formik.values.tags}
|
||||
required
|
||||
/>
|
||||
</Form.Control>
|
||||
</FormField>
|
||||
|
||||
<FormField name="thumbnail">
|
||||
<FormLabelAndMessage label="Thumbnail" />
|
||||
<Form.Control asChild>
|
||||
<ThumbnailUpdate />
|
||||
</Form.Control>
|
||||
</FormField>
|
||||
</FormLayout>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default EditCourseGeneral;
|
||||
|
|
@ -0,0 +1,123 @@
|
|||
import { useCourse } from '@components/Contexts/CourseContext'
|
||||
import { useOrg } from '@components/Contexts/OrgContext'
|
||||
import { getAPIUrl } from '@services/config/config'
|
||||
import { updateCourseThumbnail } from '@services/courses/courses'
|
||||
import { getCourseThumbnailMediaDirectory } from '@services/media/media'
|
||||
import { ArrowBigUpDash, UploadCloud, Image as ImageIcon } from 'lucide-react'
|
||||
import { useLHSession } from '@components/Contexts/LHSessionContext'
|
||||
import React, { useState } from 'react'
|
||||
import { mutate } from 'swr'
|
||||
import UnsplashImagePicker from './UnsplashImagePicker'
|
||||
|
||||
function ThumbnailUpdate() {
|
||||
const course = useCourse() as any
|
||||
const session = useLHSession() as any;
|
||||
const org = useOrg() as any
|
||||
const [localThumbnail, setLocalThumbnail] = React.useState(null) as any
|
||||
const [isLoading, setIsLoading] = React.useState(false) as any
|
||||
const [error, setError] = React.useState('') as any
|
||||
const [showUnsplashPicker, setShowUnsplashPicker] = useState(false)
|
||||
|
||||
const handleFileChange = async (event: any) => {
|
||||
const file = event.target.files[0]
|
||||
setLocalThumbnail(file)
|
||||
await updateThumbnail(file)
|
||||
}
|
||||
|
||||
const handleUnsplashSelect = async (imageUrl: string) => {
|
||||
setIsLoading(true)
|
||||
const response = await fetch(imageUrl)
|
||||
const blob = await response.blob()
|
||||
const file = new File([blob], 'unsplash_image.jpg', { type: 'image/jpeg' })
|
||||
setLocalThumbnail(file)
|
||||
await updateThumbnail(file)
|
||||
}
|
||||
|
||||
const updateThumbnail = async (file: File) => {
|
||||
setIsLoading(true)
|
||||
const res = await updateCourseThumbnail(
|
||||
course.courseStructure.course_uuid,
|
||||
file,
|
||||
session.data?.tokens?.access_token
|
||||
)
|
||||
mutate(`${getAPIUrl()}courses/${course.courseStructure.course_uuid}/meta`)
|
||||
// wait for 1 second to show loading animation
|
||||
await new Promise((r) => setTimeout(r, 1500))
|
||||
if (res.success === false) {
|
||||
setError(res.HTTPmessage)
|
||||
} else {
|
||||
setIsLoading(false)
|
||||
setError('')
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="w-auto bg-gray-50 rounded-xl outline outline-1 outline-gray-200 h-[200px] shadow">
|
||||
<div className="flex flex-col justify-center items-center h-full">
|
||||
<div className="flex flex-col justify-center items-center">
|
||||
<div className="flex flex-col justify-center items-center">
|
||||
{error && (
|
||||
<div className="flex justify-center bg-red-200 rounded-md text-red-950 space-x-2 items-center p-2 transition-all shadow-sm">
|
||||
<div className="text-sm font-semibold">{error}</div>
|
||||
</div>
|
||||
)}
|
||||
{localThumbnail ? (
|
||||
<img
|
||||
src={URL.createObjectURL(localThumbnail)}
|
||||
className={`${isLoading ? 'animate-pulse' : ''} shadow w-[200px] h-[100px] rounded-md`}
|
||||
/>
|
||||
) : (
|
||||
<img
|
||||
src={`${course.courseStructure.thumbnail_image ? getCourseThumbnailMediaDirectory(
|
||||
org?.org_uuid,
|
||||
course.courseStructure.course_uuid,
|
||||
course.courseStructure.thumbnail_image
|
||||
) : '/empty_thumbnail.png'}`}
|
||||
className="shadow w-[200px] h-[100px] rounded-md bg-gray-200"
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
{isLoading ? (
|
||||
<div className="flex justify-center items-center">
|
||||
<div className="font-bold animate-pulse antialiased items-center bg-green-200 text-gray text-sm rounded-md px-4 py-2 mt-4 flex">
|
||||
<ArrowBigUpDash size={16} className="mr-2" />
|
||||
<span>Uploading</span>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<div className="flex justify-center items-center space-x-2">
|
||||
<input
|
||||
type="file"
|
||||
id="fileInput"
|
||||
style={{ display: 'none' }}
|
||||
onChange={handleFileChange}
|
||||
/>
|
||||
<button
|
||||
className="font-bold antialiased items-center text-gray text-sm rounded-md px-4 mt-6 flex"
|
||||
onClick={() => document.getElementById('fileInput')?.click()}
|
||||
>
|
||||
<UploadCloud size={16} className="mr-2" />
|
||||
<span>Upload Image</span>
|
||||
</button>
|
||||
<button
|
||||
className="font-bold antialiased items-center text-gray text-sm rounded-md px-4 mt-6 flex"
|
||||
onClick={() => setShowUnsplashPicker(true)}
|
||||
>
|
||||
<ImageIcon size={16} className="mr-2" />
|
||||
<span>Choose from Gallery</span>
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
{showUnsplashPicker && (
|
||||
<UnsplashImagePicker
|
||||
onSelect={handleUnsplashSelect}
|
||||
onClose={() => setShowUnsplashPicker(false)}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default ThumbnailUpdate
|
||||
|
|
@ -0,0 +1,175 @@
|
|||
import React, { useState, useEffect, useCallback } from 'react';
|
||||
import { createApi } from 'unsplash-js';
|
||||
import { Search, X, Cpu, Briefcase, GraduationCap, Heart, Palette, Plane, Utensils,
|
||||
Dumbbell, Music, Shirt, Book, Building, Bike, Camera, Microscope, Coins, Coffee, Gamepad,
|
||||
Flower} from 'lucide-react';
|
||||
import Modal from '@components/Objects/StyledElements/Modal/Modal';
|
||||
|
||||
const unsplash = createApi({
|
||||
accessKey: process.env.NEXT_PUBLIC_UNSPLASH_ACCESS_KEY as string,
|
||||
});
|
||||
|
||||
const IMAGES_PER_PAGE = 20;
|
||||
|
||||
const predefinedLabels = [
|
||||
{ name: 'Nature', icon: Flower },
|
||||
{ name: 'Technology', icon: Cpu },
|
||||
{ name: 'Business', icon: Briefcase },
|
||||
{ name: 'Education', icon: GraduationCap },
|
||||
{ name: 'Health', icon: Heart },
|
||||
{ name: 'Art', icon: Palette },
|
||||
{ name: 'Science', icon: Microscope },
|
||||
{ name: 'Travel', icon: Plane },
|
||||
{ name: 'Food', icon: Utensils },
|
||||
{ name: 'Sports', icon: Dumbbell },
|
||||
{ name: 'Music', icon: Music },
|
||||
{ name: 'Fashion', icon: Shirt },
|
||||
{ name: 'History', icon: Book },
|
||||
{ name: 'Architecture', icon: Building },
|
||||
{ name: 'Fitness', icon: Bike },
|
||||
{ name: 'Photography', icon: Camera },
|
||||
{ name: 'Biology', icon: Microscope },
|
||||
{ name: 'Finance', icon: Coins },
|
||||
{ name: 'Lifestyle', icon: Coffee },
|
||||
{ name: 'Gaming', icon: Gamepad },
|
||||
];
|
||||
|
||||
interface UnsplashImagePickerProps {
|
||||
onSelect: (imageUrl: string) => void;
|
||||
onClose: () => void;
|
||||
isOpen?: boolean;
|
||||
}
|
||||
|
||||
const UnsplashImagePicker: React.FC<UnsplashImagePickerProps> = ({ onSelect, onClose, isOpen = true }) => {
|
||||
const [query, setQuery] = useState('');
|
||||
const [images, setImages] = useState<any[]>([]);
|
||||
const [page, setPage] = useState(1);
|
||||
const [loading, setLoading] = useState(false);
|
||||
|
||||
const fetchImages = useCallback(async (searchQuery: string, pageNum: number) => {
|
||||
setLoading(true);
|
||||
try {
|
||||
const result = await unsplash.search.getPhotos({
|
||||
query: searchQuery,
|
||||
page: pageNum,
|
||||
perPage: IMAGES_PER_PAGE,
|
||||
});
|
||||
if (result && result.response) {
|
||||
setImages(prevImages => pageNum === 1 ? result.response.results : [...prevImages, ...result.response.results]);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error fetching images:', error);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
}, []);
|
||||
|
||||
const debouncedFetchImages = useCallback(
|
||||
debounce((searchQuery: string) => {
|
||||
setPage(1);
|
||||
fetchImages(searchQuery, 1);
|
||||
}, 300),
|
||||
[fetchImages]
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
if (query) {
|
||||
debouncedFetchImages(query);
|
||||
}
|
||||
}, [query, debouncedFetchImages]);
|
||||
|
||||
const handleSearch = (e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
setQuery(e.target.value);
|
||||
};
|
||||
|
||||
const handleLabelClick = (label: string) => {
|
||||
setQuery(label);
|
||||
};
|
||||
|
||||
const handleLoadMore = () => {
|
||||
const nextPage = page + 1;
|
||||
setPage(nextPage);
|
||||
fetchImages(query, nextPage);
|
||||
};
|
||||
|
||||
const handleImageSelect = (imageUrl: string) => {
|
||||
onSelect(imageUrl);
|
||||
onClose();
|
||||
};
|
||||
|
||||
const modalContent = (
|
||||
<div className="flex flex-col h-full">
|
||||
<div className="p-4 space-y-4">
|
||||
<div className="relative">
|
||||
<input
|
||||
type="text"
|
||||
value={query}
|
||||
onChange={handleSearch}
|
||||
placeholder="Search for images..."
|
||||
className="w-full p-2 pl-10 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
|
||||
/>
|
||||
<Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400" size={20} />
|
||||
</div>
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{predefinedLabels.map(label => (
|
||||
<button
|
||||
key={label.name}
|
||||
onClick={() => handleLabelClick(label.name)}
|
||||
className="px-3 py-1 bg-neutral-100 rounded-lg hover:bg-neutral-200 nice-shadow transition-colors flex items-center gap-1 space-x-1"
|
||||
>
|
||||
<label.icon size={16} />
|
||||
<span>{label.name}</span>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex-1 overflow-y-auto p-4 pt-0">
|
||||
<div className="grid grid-cols-3 gap-4">
|
||||
{images.map(image => (
|
||||
<div key={image.id} className="relative w-full pb-[56.25%]">
|
||||
<img
|
||||
src={image.urls.small}
|
||||
alt={image.alt_description}
|
||||
className="absolute inset-0 w-full h-full object-cover rounded-lg cursor-pointer hover:opacity-80 transition-opacity"
|
||||
onClick={() => handleImageSelect(image.urls.regular)}
|
||||
/>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
{loading && <p className="text-center mt-4">Loading...</p>}
|
||||
{!loading && images.length > 0 && (
|
||||
<button
|
||||
onClick={handleLoadMore}
|
||||
className="mt-4 w-full px-4 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600 transition-colors"
|
||||
>
|
||||
Load More
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
return (
|
||||
<Modal
|
||||
dialogTitle="Choose an image from Unsplash"
|
||||
dialogContent={modalContent}
|
||||
onOpenChange={onClose}
|
||||
isDialogOpen={isOpen}
|
||||
minWidth="lg"
|
||||
minHeight="lg"
|
||||
customHeight="h-[80vh]"
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
// Custom debounce function
|
||||
const debounce = (func: Function, delay: number) => {
|
||||
let timeoutId: NodeJS.Timeout;
|
||||
return (...args: any[]) => {
|
||||
clearTimeout(timeoutId);
|
||||
timeoutId = setTimeout(() => func(...args), delay);
|
||||
};
|
||||
};
|
||||
|
||||
export default UnsplashImagePicker;
|
||||
Loading…
Add table
Add a link
Reference in a new issue