Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(app): join process #16

Closed
wants to merge 25 commits into from
Closed
Changes from 1 commit
Commits
Show all changes
25 commits
Select commit Hold shift + click to select a range
bc3282f
Merge pull request #8 from gabrielschirmer1903/chat-screen
Nov 21, 2023
08f5d38
ESlint: apply linter commands
frankemax Nov 21, 2023
61fc341
Merge pull request #12 from frankemax/9-eslint
frankemax Nov 21, 2023
0d766a2
feat(react-native): update version
frankemax Nov 21, 2023
9d5e644
feat(version): update version to v0.0.1
frankemax Nov 21, 2023
fa9fe1a
feat(package): update to v0.1.0
frankemax Nov 21, 2023
e49afaf
fix(app.json): update icon location
frankemax Nov 21, 2023
2f7ab4c
feat(expo): run expo prebuild
frankemax Nov 21, 2023
f8669ce
Merge pull request #14 from frankemax/10-expo
frankemax Nov 21, 2023
3d232b8
feat(poll-screen): use english language
frankemax Nov 21, 2023
c2e948f
feat(qr-code): use english language
frankemax Nov 21, 2023
927c9d6
feat(home-screen): use english language
frankemax Nov 21, 2023
d28615d
feat(app-navigator): use english language
frankemax Nov 21, 2023
2078dfa
Merge pull request #15 from frankemax/13-locales
frankemax Nov 21, 2023
e6aaf37
feat(app): join process
frankemax Nov 22, 2023
ba423a0
refactor(app): create useJoinMeeting custom hook
frankemax Nov 22, 2023
c90b02f
feat(collections): currentUser/meetingInfo initial commit
frankemax Nov 22, 2023
5ce7ad5
feat(app): enter graphql collections via main screen
frankemax Nov 27, 2023
b411f9e
fix(meeting-info): remove duration property
frankemax Nov 27, 2023
eaec2a6
feat(app): add current-user and meeting info pages
frankemax Nov 27, 2023
0ba4bc3
fix(home-screen): update margin top
frankemax Nov 27, 2023
867c87e
feat: install fast-json-patch
frankemax Nov 27, 2023
d2a1269
feat(usePatchedSubscription): add function
frankemax Nov 27, 2023
f7cb149
feat(app): add ChatPublicMessages
frankemax Nov 27, 2023
de8ef77
feat(chat): get public chat messages from graphql
frankemax Nov 28, 2023
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
feat(app): join process
frankemax committed Nov 22, 2023
commit e6aaf37ff93a5567bb73167096d6e39f5949f95c
159 changes: 158 additions & 1 deletion App.js
Original file line number Diff line number Diff line change
@@ -1,12 +1,169 @@
import React from 'react';
import React, { useState, useEffect } from 'react';
import { Text, View, Linking } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import { ApolloClient, ApolloProvider, InMemoryCache } from '@apollo/client';
import { SubscriptionClient } from 'subscriptions-transport-ws';
import { WebSocketLink } from '@apollo/client/link/ws';
import HomeScreen from './src/screens/home-screen';
import PollScreen from './src/screens/poll-screen';
import ChatScreen from './src/screens/chat-screen';

// Function to parse query parameters from a URL
const parseQueryString = (url) => {
const queryString = url.split('?')[1];
if (!queryString) {
return {};
}

const params = {};
const keyValuePairs = queryString.split('&');

keyValuePairs.forEach((pair) => {
const [key, value] = pair.split('=');
params[key] = decodeURIComponent(value || '');
});

return params;
};

const getHostFromUrl = (url) => {
const regex = /^(?:[^:\n]+:\/\/)?([^:#/\n]*)/;
const match = url.match(regex);
const host = match ? match[1] : null;
return host;
};

const App = () => {
const Stack = createNativeStackNavigator();
const [sessionToken, setSessionToken] = useState(null);
const [userId, setUserId] = useState(null);
const [userName, setUserName] = useState(null);
const [userAuthToken, setUserAuthToken] = useState(null);
const [graphqlClient, setGraphqlClient] = useState(null);
const [enterApiResponse, setEnterApiResponse] = useState(null);
// 0 -> request sessionToken - get
// 1 -> join with session token - get
// 2 -> call api enter
// 3 -> connect graphql server
const [loginStage, setLoginStage] = useState(0);
const [urlWithSessionId, setUrlWithSessionId] = useState(null);
const [host, setHost] = useState('');

const url = 'https://bbb30.elos.dev/bigbluebutton/api/join?fullName=User+3526825&meetingID=random-1396335&password=mp&redirect=true&checksum=4171552dc9fa9c22ecf1825872b5e979a8a6852a';

async function requestSessionToken() {
fetch(`${url}`)
.then((data) => {
if (data.status === 200) {
setUrlWithSessionId(data.url);
setSessionToken(parseQueryString(data.url).sessionToken);
setHost(getHostFromUrl(url));
setLoginStage(1);
console.log('DONE STAGE 0');
}
});
}

async function joinWithSessionToken() {
fetch(`${urlWithSessionId}`)
.then((data) => {
if (data.status === 200) {
setLoginStage(2);
console.log('DONE STAGE 1');
}
});
}

async function callApiEnter() {
fetch(`https://${host}/bigbluebutton/api/enter/?sessionToken=${sessionToken}`)
.then((response) => response.json())
.then((data) => {
setEnterApiResponse(data.response.returncode);
if (data?.response?.internalUserID) {
setUserId(data.response.internalUserID);
setUserName(data.response.fullname);
setUserAuthToken(data.response.authToken);
setLoginStage(3);
console.log('DONE STAGE 2');
}
});
}

async function connectGraphqlServer() {
if (enterApiResponse !== 'SUCCESS') {
return;
}

console.log(`Creating graphql socket with token ${sessionToken}`);
const wsLink = new WebSocketLink(
new SubscriptionClient(`wss://${`${host}`}/v1/graphql`, {
reconnect: true,
timeout: 30000,
connectionParams: {
headers: {
'X-Session-Token': sessionToken,
'json-patch-supported': 'true'
}
}
})
);

setGraphqlClient(new ApolloClient({ link: wsLink, cache: new InMemoryCache() }));
console.log('DONE STAGE 3');
}

useEffect(() => {
switch (loginStage) {
case 0:
requestSessionToken();
break;
case 1:
joinWithSessionToken();
break;
case 2:
callApiEnter();
break;
case 3:
connectGraphqlServer();
break;
default:
console.log('error');
}
}, [loginStage]);

if (graphqlClient) {
return (
<ApolloProvider client={graphqlClient}>
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
<Text>
Who am I?
{userName}
(
{userId}
)
</Text>
</View>
</ApolloProvider>

);
}

if (sessionToken === null) {
return (
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
<Text>
Param sessionToken missing
</Text>
</View>
);
}

return (
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
<Text>Loading...</Text>
</View>
);

return (
<NavigationContainer>
168 changes: 167 additions & 1 deletion package-lock.json
5 changes: 4 additions & 1 deletion package.json
Original file line number Diff line number Diff line change
@@ -8,17 +8,20 @@
"web": "expo start --web"
},
"dependencies": {
"@apollo/client": "^3.8.7",
"@react-navigation/native": "^6.1.6",
"@react-navigation/native-stack": "^6.9.12",
"expo": "~48.0.21",
"expo-splash-screen": "~0.18.2",
"expo-status-bar": "~1.4.4",
"graphql": "^15.8.0",
"react": "18.2.0",
"react-native": "0.71.14",
"react-native-paper": "^5.8.0",
"react-native-safe-area-context": "4.5.0",
"react-native-screens": "~3.20.0",
"styled-components": "^5.3.9"
"styled-components": "^5.3.9",
"subscriptions-transport-ws": "^0.11.0"
},
"devDependencies": {
"@babel/core": "^7.20.0",