rzmk/learnhouse
1
0
Fork 0
mirror of https://github.com/rzmk/learnhouse.git synced 2025-12-18 20:09: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 randomColor from 'randomcolor'
import MouseMovements from './MouseMovements'
import { v4 as uuidv4 } from 'uuid'
import { debounce } from '@/lib/utils'
import { v4 as uuidv4 } from 'uuid';
import { debounce } from '@/lib/utils';
interface EditorWrapperProps {
content: string
@ -26,37 +26,32 @@ interface EditorWrapperProps {
function EditorWrapper(props: EditorWrapperProps): JSX.Element {
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
const [provider, setProvider] = React.useState<HocuspocusProvider | null>(
null
)
const [thisPageColor, setThisPageColor] = useState(
randomColor({ luminosity: 'light' }) as string
)
let uuid = uuidv4()
const [onlinePageInstanceID, setOnlinePageInstanceID] = useState(
uuid as string
)
const [provider, setProvider] = React.useState<HocuspocusProvider | null>(null);
const [thisPageColor, setThisPageColor] = useState(randomColor({ luminosity: 'light' }) as string)
let uuid = uuidv4();
const [onlinePageInstanceID, setOnlinePageInstanceID] = useState(uuid as string)
/* Collaboration Features */
const collab = getCollaborationServerUrl()
const isCollabEnabledOnThisOrg =
props.org.config.config.features.collaboration.enabled && collab
const isCollabEnabledOnThisOrg = props.org.config.config.features.collaboration.enabled && collab
const doc = new Y.Doc()
// mouse movement
const [mouseMovements, setMouseMovements] = useState({} as any)
const timeoutRef = useRef<NodeJS.Timeout | null>(null)
const [mouseMovements, setMouseMovements] = useState({} as any);
const timeoutRef = useRef<NodeJS.Timeout | null>(null);
const debouncedSetMouseMovements = (newMovements: any) => {
if (timeoutRef.current) {
clearTimeout(timeoutRef.current)
clearTimeout(timeoutRef.current);
}
timeoutRef.current = setTimeout(() => {
setMouseMovements(newMovements)
}, 10)
}
setMouseMovements(newMovements);
}, 10);
};
// Store the Y document in the browser
new IndexeddbPersistence(props.activity.activity_uuid, doc)
@ -78,26 +73,27 @@ function EditorWrapper(props: EditorWrapperProps): JSX.Element {
let activity = props.activity
activity.content = content
provider?.setAwarenessField('savings_states', {
provider?.setAwarenessField("savings_states", {
[session.data.user.user_uuid]: {
status: 'action_save',
timestamp: new Date().toISOString(),
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>,
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>,
})
}
// Create a ref to store the last save timestamp of each user
const lastSaveTimestampRef = useRef({}) as any
const lastSaveTimestampRef = useRef({}) as any;
useEffect(() => {
// 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
onConnect: () => {
// Set the online page instance ID
setOnlinePageInstanceID(uuidv4())
setOnlinePageInstanceID(uuidv4());
// Set the user color
setThisPageColor(randomColor({ luminosity: 'light' }) as string)
setThisPageColor(randomColor({ luminosity: 'light' }) as string);
},
onAwarenessUpdate: ({ states }) => {
const usersStates = states
const usersStates = states;
/* Showing user mouse movement */
usersStates.forEach((userState: any) => {
if (userState.userMouseMovement) {
const userMouseMovement = userState.userMouseMovement
const userMouseMovement = userState.userMouseMovement;
// Update the mouse movements state
debouncedSetMouseMovements((prevMovements: any) => {
@ -132,12 +128,15 @@ function EditorWrapper(props: EditorWrapperProps): JSX.Element {
mouseX: userMouseMovement.mouseX,
mouseY: userMouseMovement.mouseY,
color: userMouseMovement.color,
onlinePageInstanceID: userMouseMovement.onlineInstanceID,
onlinePageInstanceID: userMouseMovement.onlineInstanceID
},
}
})
};
}
);
}
})
});
/* Notifiying if a user has saved course content */
usersStates.forEach((userState: any) => {
@ -145,68 +144,58 @@ function EditorWrapper(props: EditorWrapperProps): JSX.Element {
const savingsState = userState.savings_states
// Check if a user has saved the document
Object.keys(savingsState).forEach((user) => {
const userObj = savingsState[user].user
const status = savingsState[user].status
const timestamp = savingsState[user].timestamp
Object.keys(savingsState).forEach(user => {
const userObj = savingsState[user].user;
const status = savingsState[user].status;
const timestamp = savingsState[user].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 (
status === 'action_save' &&
Math.abs(currentTimestamp - new Date(timestamp).getTime()) <
10
) {
// 5000 milliseconds = 5 seconds
if (status === 'action_save' && Math.abs(currentTimestamp - new Date(timestamp).getTime()) < 10) { // 5000 milliseconds = 5 seconds
// Update the last save timestamp for this user
lastSaveTimestampRef.current[user] = timestamp
lastSaveTimestampRef.current[user] = timestamp;
toast.success(
`${userObj.first_name} ${userObj.last_name} has saved the document`
)
toast.success(`${userObj.first_name} ${userObj.last_name} has saved the document`);
}
})
});
}
})
},
})
});
// Set the new provider
setProvider(newProvider)
setProvider(newProvider);
}
}, [])
}, []);
{
return (
<>
<Toast></Toast>
<MouseMovements
org={props.org}
movements={mouseMovements}
onlinePageInstanceID={onlinePageInstanceID}
/>
<MouseMovements org={props.org} movements={mouseMovements} onlinePageInstanceID={onlinePageInstanceID} />
<OrgProvider orgslug={props.org.slug}>
{!session.isLoading && (
<Editor
org={props.org}
course={props.course}
activity={props.activity}
content={props.content}
setContent={setContent}
session={session}
ydoc={doc}
hocuspocusProvider={provider}
isCollabEnabledOnThisOrg={isCollabEnabledOnThisOrg}
userRandomColor={thisPageColor}
mouseMovements={mouseMovements}
></Editor>
)}
{!session.isLoading && (<Editor
org={props.org}
course={props.course}
activity={props.activity}
content={props.content}
setContent={setContent}
session={session}
ydoc={doc}
hocuspocusProvider={provider}
isCollabEnabledOnThisOrg={isCollabEnabledOnThisOrg}
userRandomColor={thisPageColor}
mouseMovements={mouseMovements}
></Editor>)}
</OrgProvider>
</>
)
}
}
export default EditorWrapper
export default EditorWrapper