Skip to content
This repository was archived by the owner on Sep 1, 2021. It is now read-only.

Revert "Better dashboard" #21

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open

Revert "Better dashboard" #21

Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
2 changes: 1 addition & 1 deletion src/App.js
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
// production
import React, { useEffect, useState, useRef } from "react";
import firebase from "./firebase";
import { BrowserRouter as Router, Route, Redirect, Switch } from "react-router-dom";
import { HashRouter as Router, Route, Redirect, Switch } from "react-router-dom";
import Home from "./components/Home/Home";
import About from "./components/About/About";
import Community from "./components/Community/Community";
14 changes: 2 additions & 12 deletions src/components/DashBoard/Dashboard.js
View file
Original file line number Diff line number Diff line change
@@ -13,16 +13,7 @@ const Dashboard = props => {
const [appSettings, setAppSettings] = useState();
const [defaultSettings, setDefaultSettings] = useState();
const { currentUser } = useContext(AppContext);
const id = firebase.auth.currentUser.uid;
const [discordId, setDiscordId] = useState("")
useEffect(() => {
const idRegex = new RegExp("/\\d{17,19}[/\\b]")
const path = props.location.pathname+"/"
const id = path.match(idRegex)
if(id){
setDiscordId(id[0].replace(/\//g, ""))
}
}, [props])
const id = firebase.auth.currentUser.uid;

useEffect(() => {
(async () => {
@@ -76,7 +67,7 @@ const Dashboard = props => {
{/* <NavLink className="setting-link" activeClassName="active" to={`${props.match.url}/overlaysettings`}>
overlay Settings
</NavLink> */}
<NavLink className="setting-link" activeClassName="active" to={`${props.match.url}/discord${discordId ? `/${discordId}` : ""}`}>
<NavLink className="setting-link" activeClassName="active" to={`${props.match.url}/discord`}>
Discord Settings
</NavLink>
<NavLink className="setting-link" activeClassName="active" to={`${props.match.url}/account`}>
@@ -86,7 +77,6 @@ const Dashboard = props => {
<div className="settings">
<Switch>
<Route path={`${props.match.url}/account`} component={AccountSettings}></Route>
<Route path={`${props.match.url}/discord/:id`} component={DiscordPage}></Route>
<Route path={`${props.match.url}/discord`} component={DiscordPage}></Route>
{/* <Route path={`${props.match.url}/overlaysettings`}>
<SettingBox
33 changes: 8 additions & 25 deletions src/components/DashBoard/Dashboard.scss
View file
Original file line number Diff line number Diff line change
@@ -815,25 +815,25 @@ textarea.message {
margin: 0;
max-height: 175px;
overflow: auto;
&::-webkit-scrollbar {
width: 0.5rem;
&::-webkit-scrollbar{
width: .5rem;
}
h4 {
margin: 0;
}
ul {
list-style: none;
padding: 0;
ul {
padding-left: 0.5rem;
ul{
padding-left: .5rem;
}
li.variable {
background: #202225;
padding: 0.25rem;
border-radius: 0.25rem;
margin-top: 0.25rem;
margin-bottom: 0.25rem;
margin-right: 0.25rem;
margin-top: .25rem;
margin-bottom: .25rem;
margin-right: .25rem;
}
}
}
@@ -870,7 +870,7 @@ span.toggle-button button {
}

.command-footer {
height: 50px !important;
height: 50px !important;
display: flex;
align-items: center;
justify-content: flex-end;
@@ -906,20 +906,3 @@ span.toggle-button button {
}
}
}

.ping-info {
margin-left: 1rem;
.ping {
padding: 0.25rem;
color: #7289da;
background: rgba(114, 137, 218, 0.1);
border-radius: 0.25rem;
font-weight: 500;
margin-left: 0.5rem;
transition: .1s;
&:hover {
color: #fff;
background-color: #7289da;
}
}
}
160 changes: 111 additions & 49 deletions src/components/DashBoard/Discord/DiscordPage.js
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import React, { useEffect, useState, useCallback, useContext } from "react";
import { Route, Redirect, Switch, withRouter, useParams } from "react-router-dom";
import { Route, Redirect, Switch, withRouter } from "react-router-dom";
import firebase from "../../../firebase";
import Select from "react-select";
import useFetch from "../../../hooks/useFetch";
@@ -18,7 +18,6 @@ const DiscordPage = React.memo(({ location, history, match }) => {
const [refreshed, setRefreshed] = useState(false);
const { isLoading, sendRequest: sendLoadingRequest } = useFetch();
const id = firebase.auth.currentUser.uid;
const { id: guildId } = useParams();
const { sendRequest } = useFetch();
const { currentUser, setCurrentUser } = useContext(AppContext);
const {
@@ -38,28 +37,25 @@ const DiscordPage = React.memo(({ location, history, match }) => {
}, [rawDiscordData, discordDataLoading, setUserDiscordInfo]);

useEffect(() => {
(async () => {
const guild = userDiscordInfo?.guilds?.find?.(guild => guild.id === guildId);
if (guild) {
setDisplayGuild(guildOption(guild));
}
})();
}, [userDiscordInfo, guildId]);
if (userConnectedGuildInfo?.name) {
setDisplayGuild(guildOption(userConnectedGuildInfo));
}
}, [userConnectedGuildInfo]);

const refreshToken = userDiscordInfo?.refreshToken;
useEffect(() => {
(async () => {
if (!refreshToken || !id) return;
if (refreshed) return console.log("already refreshed");
console.log("refreshing");
const otcData = (await firebase.db.collection("Secret").doc(id).get()).data();
const otc = otcData?.value;
console.log("refreshing");
const otcData = (await firebase.db.collection("Secret").doc(id).get()).data()
const otc = otcData?.value
setRefreshed(true);
const response = await fetch(`${process.env.REACT_APP_API_URL}/discord/token/refresh?token=${refreshToken}&id=${id}&otc=${otc}`);
if (!response.ok) return;

const json = await response.json();
console.log({ json });
const json = await response.json();
console.log({json})
if (!json) return;
await firebase.db
.collection("Streamers")
@@ -95,7 +91,6 @@ const DiscordPage = React.memo(({ location, history, match }) => {
}, [id, disconnect, setCurrentUser]);

const guilds = userDiscordInfo?.guilds;

useSnapshot(
firebase.db.collection("Streamers").doc(id).collection("discord").doc("data"),
async snapshot => {
@@ -108,15 +103,15 @@ const DiscordPage = React.memo(({ location, history, match }) => {
const guildId = guildByName.id;
const value = await sendRequest(`${process.env.REACT_APP_API_URL}/ismember?guild=` + guildId);
const response = await sendRequest(`${process.env.REACT_APP_API_URL}/getchannels?new=true&guild=` + guildId);
const channelReponse = response.channels;
console.log(response.roles);
setUserConnectedGuildInfo({
const channelReponse = response.channels
console.log(response.roles)
setUserConnectedGuildInfo({
name: guildByName.name,
isMember: value?.result,
icon: guildByName.icon,
id: guildByName.id,
channels: channelReponse,
roles: response.roles,
channels: channelReponse,
roles: response.roles,
connectedChannels: channelReponse?.filter(channel => userData.liveChatId?.includes(channel.id)),
connected: true,
});
@@ -153,36 +148,50 @@ const DiscordPage = React.memo(({ location, history, match }) => {
async e => {
const name = e.value;
const guildByName = userDiscordInfo.guilds.find(guild => guild.name === name);
const selectedGuildId = guildByName.id;
try{

if (guildId) {
const path = match.url.split("/");
if (path.length > 3) {
history.push(`${path.slice(0, 3).join("/")}/${selectedGuildId}`);
} else {
history.push(`${selectedGuildId}`);
}
} else {
history.push(`${match.url}/${selectedGuildId}`);
}
}catch(err){

}
const { result: isMember } = await sendLoadingRequest(`${process.env.REACT_APP_API_URL}/ismember?guild=` + selectedGuildId);
// const channelReponse = await sendLoadingRequest(`${process.env.REACT_APP_API_URL}/getchannels?guild=` + selectedGuildId);
const guildId = guildByName.id;
const { result: isMember } = await sendLoadingRequest(`${process.env.REACT_APP_API_URL}/ismember?guild=` + guildId);
const channelReponse = await sendLoadingRequest(`${process.env.REACT_APP_API_URL}/getchannels?guild=` + guildId);

// setUserConnectedGuildInfo({
// name,
// isMember,
// icon: guildByName.icon,
// id: guildByName.id,
// channels: channelReponse,
// });
setUserConnectedGuildInfo({
name,
isMember,
icon: guildByName.icon,
id: guildByName.id,
channels: channelReponse,
});
},
[userDiscordInfo, sendLoadingRequest]
);

const onChannelSelect = useCallback(
async e => {
setUserConnectedGuildInfo(s => ({
...s,
connectedChannels:
e?.map(c => ({
id: c.value,
name: c.label.props.children[0].props.children,
parent: c.label.props.children[1].props.children,
})) || [],
}));
await firebase.db
.collection("Streamers")
.doc(id)
.update({
liveChatId: e?.map(c => c.value) || [],
});
await firebase.db
.collection("Streamers")
.doc(id)
.collection("discord")
.doc("data")
.update({
liveChatId: e?.map(c => c.value) || [],
});
},
[id]
);

return (
<div>
<h1>Discord Settings</h1>
@@ -201,6 +210,7 @@ const DiscordPage = React.memo(({ location, history, match }) => {
placeholder="Select Guild"
options={userDiscordInfo?.guilds?.filter(guild => guild.permissions.includes("MANAGE_GUILD")).map(guildOption)}
styles={colorStyles}
isDisabled={!!userConnectedGuildInfo?.connected}
/>
<span>
<img className="discord-profile" src={userDiscordInfo?.profilePicture} alt="" />
@@ -221,15 +231,67 @@ const DiscordPage = React.memo(({ location, history, match }) => {
<button className="invite-link discord-settings-button">Invite it</button>
</a>
</div>
) : guildId ? (
<PluginHome guildId={guildId} match={match} />
) : (
<></>
<>
{userConnectedGuildInfo.connected ? (
<>
<h3>select channels to listen to</h3>
<Select
closeMenuOnSelect={false}
onChange={onChannelSelect}
placeholder="Select Channel"
value={userConnectedGuildInfo.connectedChannels
?.sort((a, b) => a.parent.localeCompare(b.parent))
?.map(channel => ({
value: channel.id,
label: (
<>
<span>{channel.name}</span>
<span className="channel-category">{channel.parent}</span>
</>
),
}))}
options={userConnectedGuildInfo.channels
.sort((a, b) => a.parent.localeCompare(b.parent))
.map(channel => ({
value: channel.id,
label: (
<>
<span>{channel.name}</span>
<span className="channel-category">{channel.parent}</span>
</>
),
}))}
styles={{
...colorStyles,
container: styles => ({ ...styles, ...colorStyles.container }),
}}
isMulti
/>
<button onClick={disconnect} className="discord-settings-button ml-0 mt-1 warning-button">
Disconnect Guild
</button>
</>
) : (
<>
<span>
This server is not connected to the DisStreamChat chat manager, connect it to get discord
messages in your app and adjust your plugin settings
</span>
<button onClick={Connectguild} className="discord-settings-button warning-button">
Connect it
</button>
</>
)}
</>
)}
</>
) : (
<></>
<button onClick={disconnectAccount} className="discord-settings-button ml-0 mt-1 warning-button">
Disconnect Account
</button>
)}
{userConnectedGuildInfo?.connected && <PluginHome match={match} />}
</div>
</>
) : (
Loading