Skip to content
This repository has been 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

Show file tree
Hide file tree
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
Open in desktop
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";
Expand Down
14 changes: 2 additions & 12 deletions src/components/DashBoard/Dashboard.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 () => {
Expand Down Expand Up @@ -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`}>
Expand All @@ -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
Expand Down
33 changes: 8 additions & 25 deletions src/components/DashBoard/Dashboard.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
}
}
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -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
Open in desktop
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";
Expand All @@ -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 {
Expand All @@ -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")
Expand Down Expand Up @@ -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 => {
Expand All @@ -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,
});
Expand Down Expand Up @@ -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>
Expand All @@ -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="" />
Expand All @@ -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>
</>
) : (
Expand Down
Loading