rzmk/learnhouse
1
0
Fork 0
mirror of https://github.com/rzmk/learnhouse.git synced 2025-12-19 04:19:25 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Format for real

Browse source
This commit is contained in:
Eduard-Constantin Ibinceanu 2024-10-13 14:36:45 +00:00
parent d9c31e4d07
commit d90af6947e
1 changed files with 71 additions and 82 deletions
Download patch file Download diff file Expand all files Collapse all files

153
apps/web/components/Objects/Editor/EditorWrapper.tsx
View file

@ -14,8 +14,8 @@ import { IndexeddbPersistence } from 'y-indexeddb'
import { getCollaborationServerUrl } from '@services/config/config' import { getCollaborationServerUrl } from '@services/config/config'
import randomColor from 'randomcolor' import randomColor from 'randomcolor'
import MouseMovements from './MouseMovements' import MouseMovements from './MouseMovements'
import { v4 as uuidv4 } from 'uuid' import { v4 as uuidv4 } from 'uuid';
import { debounce } from '@/lib/utils' import { debounce } from '@/lib/utils';
interface EditorWrapperProps { interface EditorWrapperProps {
content: string content: string
@ -26,37 +26,32 @@ interface EditorWrapperProps {
function EditorWrapper(props: EditorWrapperProps): JSX.Element { function EditorWrapper(props: EditorWrapperProps): JSX.Element {
const session = useLHSession() as any const session = useLHSession() as any
const access_token = session?.data?.tokens?.access_token const access_token = session?.data?.tokens?.access_token;
// Define provider in the state // Define provider in the state
const [provider, setProvider] = React.useState<HocuspocusProvider | null>( const [provider, setProvider] = React.useState<HocuspocusProvider | null>(null);
null const [thisPageColor, setThisPageColor] = useState(randomColor({ luminosity: 'light' }) as string)
) let uuid = uuidv4();
const [thisPageColor, setThisPageColor] = useState( const [onlinePageInstanceID, setOnlinePageInstanceID] = useState(uuid as string)
randomColor({ luminosity: 'light' }) as string
)
let uuid = uuidv4()
const [onlinePageInstanceID, setOnlinePageInstanceID] = useState(
uuid as string
)
/* Collaboration Features */ /* Collaboration Features */
const collab = getCollaborationServerUrl() const collab = getCollaborationServerUrl()
const isCollabEnabledOnThisOrg = const isCollabEnabledOnThisOrg = props.org.config.config.features.collaboration.enabled && collab
props.org.config.config.features.collaboration.enabled && collab
const doc = new Y.Doc() const doc = new Y.Doc()
// mouse movement // mouse movement
const [mouseMovements, setMouseMovements] = useState({} as any) const [mouseMovements, setMouseMovements] = useState({} as any);
const timeoutRef = useRef<NodeJS.Timeout | null>(null) const timeoutRef = useRef<NodeJS.Timeout | null>(null);
const debouncedSetMouseMovements = (newMovements: any) => { const debouncedSetMouseMovements = (newMovements: any) => {
if (timeoutRef.current) { if (timeoutRef.current) {
clearTimeout(timeoutRef.current) clearTimeout(timeoutRef.current);
} }
timeoutRef.current = setTimeout(() => { timeoutRef.current = setTimeout(() => {
setMouseMovements(newMovements) setMouseMovements(newMovements);
}, 10) }, 10);
} };
// Store the Y document in the browser // Store the Y document in the browser
new IndexeddbPersistence(props.activity.activity_uuid, doc) new IndexeddbPersistence(props.activity.activity_uuid, doc)
@ -78,26 +73,27 @@ function EditorWrapper(props: EditorWrapperProps): JSX.Element {
let activity = props.activity let activity = props.activity
activity.content = content activity.content = content
provider?.setAwarenessField('savings_states', {
provider?.setAwarenessField("savings_states", {
[session.data.user.user_uuid]: { [session.data.user.user_uuid]: {
status: 'action_save', status: 'action_save',
timestamp: new Date().toISOString(), timestamp: new Date().toISOString(),
user: session.data.user, user: session.data.user
},
})
toast.promise(
updateActivity(activity, activity.activity_uuid, access_token),
{
loading: 'Saving...',
success: <b>Activity saved!</b>,
error: <b>Could not save.</b>,
} }
) });
toast.promise(updateActivity(activity, activity.activity_uuid, access_token), {
loading: 'Saving...',
success: <b>Activity saved!</b>,
error: <b>Could not save.</b>,
})
} }
// Create a ref to store the last save timestamp of each user // Create a ref to store the last save timestamp of each user
const lastSaveTimestampRef = useRef({}) as any const lastSaveTimestampRef = useRef({}) as any;
useEffect(() => { useEffect(() => {
// Check if provider is not already set // Check if provider is not already set
@ -110,18 +106,18 @@ function EditorWrapper(props: EditorWrapperProps): JSX.Element {
// TODO(alpha code): This whole block of code should be improved to something more efficient and less hacky // TODO(alpha code): This whole block of code should be improved to something more efficient and less hacky
onConnect: () => { onConnect: () => {
// Set the online page instance ID // Set the online page instance ID
setOnlinePageInstanceID(uuidv4()) setOnlinePageInstanceID(uuidv4());
// Set the user color // Set the user color
setThisPageColor(randomColor({ luminosity: 'light' }) as string) setThisPageColor(randomColor({ luminosity: 'light' }) as string);
}, },
onAwarenessUpdate: ({ states }) => { onAwarenessUpdate: ({ states }) => {
const usersStates = states const usersStates = states;
/* Showing user mouse movement */ /* Showing user mouse movement */
usersStates.forEach((userState: any) => { usersStates.forEach((userState: any) => {
if (userState.userMouseMovement) { if (userState.userMouseMovement) {
const userMouseMovement = userState.userMouseMovement const userMouseMovement = userState.userMouseMovement;
// Update the mouse movements state // Update the mouse movements state
debouncedSetMouseMovements((prevMovements: any) => { debouncedSetMouseMovements((prevMovements: any) => {
@ -132,12 +128,15 @@ function EditorWrapper(props: EditorWrapperProps): JSX.Element {
mouseX: userMouseMovement.mouseX, mouseX: userMouseMovement.mouseX,
mouseY: userMouseMovement.mouseY, mouseY: userMouseMovement.mouseY,
color: userMouseMovement.color, color: userMouseMovement.color,
onlinePageInstanceID: userMouseMovement.onlineInstanceID, onlinePageInstanceID: userMouseMovement.onlineInstanceID
}, },
} };
}) }
);
} }
}) });
/* Notifiying if a user has saved course content */ /* Notifiying if a user has saved course content */
usersStates.forEach((userState: any) => { usersStates.forEach((userState: any) => {
@ -145,68 +144,58 @@ function EditorWrapper(props: EditorWrapperProps): JSX.Element {
const savingsState = userState.savings_states const savingsState = userState.savings_states
// Check if a user has saved the document // Check if a user has saved the document
Object.keys(savingsState).forEach((user) => { Object.keys(savingsState).forEach(user => {
const userObj = savingsState[user].user const userObj = savingsState[user].user;
const status = savingsState[user].status const status = savingsState[user].status;
const timestamp = savingsState[user].timestamp const timestamp = savingsState[user].timestamp;
// Get the current timestamp // Get the current timestamp
const currentTimestamp = new Date().getTime() const currentTimestamp = new Date().getTime();
// If the user has saved the document and the timestamp is close to the current timestamp, show the toast // If the user has saved the document and the timestamp is close to the current timestamp, show the toast
if ( if (status === 'action_save' && Math.abs(currentTimestamp - new Date(timestamp).getTime()) < 10) { // 5000 milliseconds = 5 seconds
status === 'action_save' &&
Math.abs(currentTimestamp - new Date(timestamp).getTime()) <
10
) {
// 5000 milliseconds = 5 seconds
// Update the last save timestamp for this user // Update the last save timestamp for this user
lastSaveTimestampRef.current[user] = timestamp lastSaveTimestampRef.current[user] = timestamp;
toast.success( toast.success(`${userObj.first_name} ${userObj.last_name} has saved the document`);
`${userObj.first_name} ${userObj.last_name} has saved the document`
)
} }
}) });
} }
}) })
}, },
}) });
// Set the new provider // Set the new provider
setProvider(newProvider) setProvider(newProvider);
} }
}, []) }, []);
{ {
return ( return (
<> <>
<Toast></Toast> <Toast></Toast>
<MouseMovements <MouseMovements org={props.org} movements={mouseMovements} onlinePageInstanceID={onlinePageInstanceID} />
org={props.org}
movements={mouseMovements}
onlinePageInstanceID={onlinePageInstanceID}
/>
<OrgProvider orgslug={props.org.slug}> <OrgProvider orgslug={props.org.slug}>
{!session.isLoading && ( {!session.isLoading && (<Editor
<Editor org={props.org}
org={props.org} course={props.course}
course={props.course} activity={props.activity}
activity={props.activity} content={props.content}
content={props.content} setContent={setContent}
setContent={setContent} session={session}
session={session} ydoc={doc}
ydoc={doc} hocuspocusProvider={provider}
hocuspocusProvider={provider} isCollabEnabledOnThisOrg={isCollabEnabledOnThisOrg}
isCollabEnabledOnThisOrg={isCollabEnabledOnThisOrg} userRandomColor={thisPageColor}
userRandomColor={thisPageColor} mouseMovements={mouseMovements}
mouseMovements={mouseMovements} ></Editor>)}
></Editor>
)}
</OrgProvider> </OrgProvider>
</> </>
) )
} }
} }
export default EditorWrapper
export default EditorWrapper