fix: some fixes for the new api (#1014)

.env.dev

@@ -1,11 +1,10 @@
-NODE_ENV=development
-VITE_APP_ENV=dev
-VITE_APP_TITLE="7TV (Dev)"
-VITE_APP_API_GQL="http://localhost:3000/v3/gql"
-VITE_APP_API_GQL_WS="ws://localhost:3000/v3/gql"
-VITE_APP_API_EVENTS="ws://localhost:3700/v3"
-VITE_APP_API_REST="http://localhost:3100/v3"
-VITE_APP_API_EGVAULT="http://localhost:3444"
-VITE_APP_OLD="http://localhost:4205"
+NODE_ENV=production
+VITE_APP_TITLE="7TV"
+VITE_APP_API_GQL="https://api.7tv.dev/v3/gql"
+VITE_APP_API_EVENTS="wss://events.7tv.dev/v3"
+VITE_APP_API_REST="https://api.7tv.dev/v3"
+VITE_APP_API_EGVAULT="https://api.7tv.dev/egvault"
+VITE_APP_OLD="https://7tv.dev"
+VITE_APP_CDN="https://cdn.7tv.dev"
 VITE_APP_FA_PRO=true
 VITE_APP_LOCALES=en_US,da_DK,de_DE,hu_HU,fr_FR,ko_KR,en_PT,pt_BR,es_ES,es_419,ru_RU,sv_SE

.env.production

@@ -3,7 +3,8 @@ VITE_APP_TITLE="7TV"
 VITE_APP_API_GQL="https://7tv.io/v3/gql"
 VITE_APP_API_EVENTS="wss://events.7tv.io/v3"
 VITE_APP_API_REST="https://7tv.io/v3"
-VITE_APP_API_EGVAULT="https://egvault.7tv.io"
-VITE_APP_OLD="https://old.7tv.app"
+VITE_APP_API_EGVAULT="https://7tv.io/egvault"
+VITE_APP_OLD="https://7tv.app"
+VITE_APP_CDN="https://cdn.7tv.app"
 VITE_APP_FA_PRO=true
 VITE_APP_LOCALES=en_US,da_DK,de_DE,hu_HU,fr_FR,ko_KR,en_PT,pt_BR,es_ES,es_419,ru_RU,sv_SE

.env.staging

@@ -5,6 +5,7 @@ VITE_APP_API_GQL="https://7tv.foo/v3/gql"
 VITE_APP_API_EVENTS="wss://events.7tv.foo/v3"
 VITE_APP_API_REST="https://7tv.foo/v3"
 VITE_APP_API_EGVAULT="https://egvault.7tv.foo"
+VITE_APP_CDN="https://cdn.7tv.app"
 VITE_APP_OLD="https://old.7tv.dev"
 VITE_APP_FA_PRO=true
 VITE_APP_LOCALES=en_US,da_DK,de_DE,hu_HU,fr_FR,ko_KR,en_PT,pt_BR,es_ES,es_419,ru_RU,sv_SE

docker/full.Dockerfile

@@ -17,7 +17,7 @@ FROM node:18 as node-builder
         rm -rf /var/cache/apt/archives /var/lib/apt/lists/*
 
 	COPY . .
-	RUN yarn build --mode=production
+	RUN NODE_ENV=production yarn build --mode=production
 
 FROM golang:1.18.3 as go-builder
 	WORKDIR /tmp/build

src/ActorLogic.ts

@@ -4,23 +4,24 @@ import { storeToRefs } from "pinia";
 import { useActor } from "@/store/actor";
 import { GetEmoteSet, GetEmoteSetMin } from "@/apollo/query/emote-set.query";
 import { useObjectSubscription } from "@/composables/useObjectSub";
-import ModalSlotsBump from "@/components/modal/ModalSlotsBump.vue";
 import { GetCurrentUser } from "./apollo/query/user-self.query";
 import { GetUser } from "./apollo/query/user.query";
-import { useModal } from "./store/modal";
-import { useMutationStore } from "./store/mutation";
 import { ObjectKind } from "./structures/Common";
 import { EmoteSet } from "./structures/EmoteSet";
 import { User } from "./structures/User";
 
-export function setupActor(authToken: Ref<string | null>) {
+export function setupActor(refreshAuth: Ref<boolean>) {
 	const actor = useActor();
 	const { user } = storeToRefs(actor);
 	const { watchObject } = useObjectSubscription();
 
-	const modal = useModal();
-	const m = useMutationStore();
 	function fetch() {
+		if (!refreshAuth.value) {
+			return;
+		}
+
+		refreshAuth.value = false;
+
 		// Set up initial identity (pre-fetch)
 		const identity = actor.getIdentity();
 		if (identity) {
@@ -41,24 +42,24 @@ export function setupActor(authToken: Ref<string | null>) {
 			actor.setUser(usr);
 
 			// Auto-bump slots
-			const maxSlots = Math.max(...usr.connections.map((uc) => uc.emote_capacity));
-			const bumps = [] as Promise<unknown>[];
-			for (const es of usr.emote_sets) {
-				if (maxSlots > es.capacity && es.capacity >= 300) {
-					bumps.push(m.editEmoteSet(es.id, { capacity: maxSlots }).catch(() => undefined));
-				}
-			}
-			if (bumps.length) {
-				Promise.all(bumps).then(() => {
-					modal.open("slots-bumped", {
-						component: ModalSlotsBump,
-						props: {
-							value: maxSlots,
-						},
-						events: {},
-					});
-				});
-			}
+			// const maxSlots = Math.max(...usr.connections.map((uc) => uc.emote_capacity));
+			// const bumps = [] as Promise<unknown>[];
+			// for (const es of usr.emote_sets) {
+			// 	if (maxSlots > es.capacity && es.capacity >= 300) {
+			// 		bumps.push(m.editEmoteSet(es.id, { capacity: maxSlots }).catch(() => undefined));
+			// 	}
+			// }
+			// if (bumps.length) {
+			// 	Promise.all(bumps).then(() => {
+			// 		modal.open("slots-bumped", {
+			// 			component: ModalSlotsBump,
+			// 			props: {
+			// 				value: maxSlots,
+			// 			},
+			// 			events: {},
+			// 		});
+			// 	});
+			// }
 
 			// Aggregate owned and emote sets of edited users
 			const editableSetIDs = (user.value as User).editor_of.map((ed) =>
@@ -93,8 +94,9 @@ export function setupActor(authToken: Ref<string | null>) {
 					}
 
 					watchObject(ObjectKind.EMOTE_SET, set, () => {
-						actor.updateActiveEmotes();
+						actor.updateEmoteSet(set);
 					});
+
 					actor.addEmoteSet(set);
 				}
 				actor.updateActiveEmotes();
@@ -107,5 +109,5 @@ export function setupActor(authToken: Ref<string | null>) {
 		});
 	}
 
-	watch(authToken, () => fetch(), { immediate: true });
+	watch(refreshAuth, () => fetch(), { immediate: true });
 }

src/App.vue

@@ -83,7 +83,7 @@ import Icon from "./components/utility/Icon.vue";
 import { setupActor } from "@/ActorLogic";
 
 const store = useStore();
-const { authToken, notFoundMode, navOpen, noTransitions, getTheme, seasonalTheme } = storeToRefs(store);
+const { refreshAuth, notFoundMode, navOpen, noTransitions, getTheme, seasonalTheme } = storeToRefs(store);
 const theme = computed(() => {
 	if (seasonalTheme.value) return "christmas";
 	switch (notFoundMode.value) {
@@ -104,7 +104,7 @@ createWorker();
 provideApolloClient(apolloClient);
 
 // Set up the actor user
-setupActor(authToken);
+setupActor(refreshAuth);
 
 const { onResult: onClientRequiredData } = useQuery<AppState>(GetAppState);
 onClientRequiredData((res) => {

src/apollo/apollo.ts

@@ -1,4 +1,3 @@
-import { LocalStorageKeys } from "@store/lskeys";
 import { ApolloClient, ApolloLink, InMemoryCache, createHttpLink } from "@apollo/client/core";
 
 // HTTP connection to the API
@@ -8,21 +7,7 @@ const httpLink = createHttpLink({
 	credentials: "include",
 });
 
-// Set up auth
-const authLink = new ApolloLink((op, next) => {
-	const tkn = localStorage.getItem(LocalStorageKeys.TOKEN);
-
-	if (tkn) {
-		op.setContext({
-			headers: {
-				Authorization: `Bearer ${tkn}`,
-			},
-		});
-	}
-	return next(op);
-});
-
-const link = ApolloLink.from([authLink, httpLink]);
+const link = ApolloLink.from([httpLink]);
 
 // Cache implementation
 const cache = new InMemoryCache({

src/apollo/mutation/message.mutation.ts

@@ -1,8 +1,8 @@
 import gql from "graphql-tag";
 
 export const ReadMessages = gql`
-	mutation ReadMessages($ids: [ObjectID!]!, $read: Boolean!) {
-		readMessages(message_ids: $ids, read: $read)
+	mutation ReadMessages($ids: [ObjectID!]!, $read: Boolean!, $approved: Boolean!) {
+		readMessages(message_ids: $ids, read: $read, approved: $approved)
 	}
 `;
 

src/apollo/query/emote-search.query.ts

@@ -5,6 +5,7 @@ export const SearchEmotes = gql`
 	query SearchEmotes($query: String!, $page: Int, $sort: Sort, $limit: Int, $filter: EmoteSearchFilter) {
 		emotes(query: $query, page: $page, sort: $sort, limit: $limit, filter: $filter) {
 			count
+			max_page
 			items {
 				id
 				name
@@ -37,6 +38,7 @@ export const SearchEmotes = gql`
 export interface SearchEmotes {
 	emotes: {
 		count: number;
+		max_page: number;
 		items: Emote[];
 	};
 }

src/apollo/query/mod-queue.query.ts

@@ -2,8 +2,8 @@ import gql from "graphql-tag";
 import { Message } from "@/structures/Message";
 
 export const GetModRequests = gql`
-	query GetModRequests($after: ObjectID, $limit: Int, $wish: String, $country: String) {
-		modRequests(after_id: $after, limit: $limit, wish: $wish, country: $country) {
+	query GetModRequests($page: Int, $limit: Int, $wish: String, $country: String) {
+		modRequests(page: $page, limit: $limit, wish: $wish, country: $country) {
 			total
 			messages {
 				id
@@ -23,9 +23,9 @@ export const GetModRequests = gql`
 
 export namespace GetModRequests {
 	export interface Variables {
-		after: string | null;
-		limit: number;
-		wish?: string;
+		page?: number | null;
+		limit?: number | null;
+		wish?: string | null;
 	}
 	export interface Result {
 		modRequests: {

src/apollo/query/report.query.ts

@@ -2,8 +2,8 @@ import gql from "graphql-tag";
 import { Report } from "@/structures/Report";
 
 export const reportsQuery = gql`
-	query GetReports($status: ReportStatus, $limit: Int, $after_id: ObjectID) {
-		reports(status: $status, limit: $limit, after_id: $after_id) {
+	query GetReports($status: ReportStatus, $limit: Int, $page: Int) {
+		reports(status: $status, limit: $limit, page: $page) {
 			id
 			target_kind
 			target_id
@@ -70,7 +70,7 @@ export namespace reportsQuery {
 	export interface Variables {
 		status?: Report.Status;
 		limit?: number;
-		after_id?: string;
+		page?: number;
 	}
 }
 

src/assets/scss/emote-upload/emote-upload.scss

@@ -33,9 +33,6 @@
 			justify-content: space-between;
 
 			@include themify() {
-				> .image-upload > span > .parent-emote {
-					background-color: darken(themed("backgroundColor"), 2);
-				}
 				> .image-upload > div {
 					background-color: darken(themed("backgroundColor"), 2);
 					> .formats-viewer {
@@ -138,20 +135,6 @@
 						}
 					}
 				}
-
-				.parent-emote {
-					padding: 1em;
-					border-radius: 0.3em;
-					display: flex;
-					justify-content: space-between;
-					align-items: center;
-					box-shadow: 0 0 0.25em rgb(100, 70, 180);
-
-					> .as-child-notice {
-						text-align: center;
-						margin-left: 1em;
-					}
-				}
 			}
 
 			label[for="file-upload"] {

src/components/Nav.vue

@@ -41,14 +41,14 @@
 					<LocaleSelector />
 
 					<!-- Inbox Button -->
-					<router-link v-if="actorUser" class="unstyled-link" to="/inbox">
+					<!-- <router-link v-if="actorUser" class="unstyled-link" to="/inbox">
 						<div v-tooltip="t('nav.inbox')" v-tooltip:position="'bottom'" class="nav-button inbox">
 							<Icon icon="envelope" />
 							<div v-if="actorUser.inbox_unread_count > 0" class="inbox-counter">
 								<div>{{ actorUser.inbox_unread_count }}</div>
 							</div>
 						</div>
-					</router-link>
+					</router-link> -->
 
 					<div class="nav-button theme">
 						<ThemeSwitcher />

src/components/activity/UserActivity.vue

@@ -1,14 +1,14 @@
 <template>
 	<i18n-t v-if="layout === 'TAE'" :keypath="'activity.' + name" tag="span">
 		<template #T> {{ (target as EmoteSet).name }} </template>
-		<template #AE>
+		<template v-if="(variables.AE as unknown as ActiveEmote).data" #AE>
 			<EmoteMention :emote="(variables.AE as unknown as ActiveEmote).data" :clickable="true" />
 		</template>
 	</i18n-t>
 
 	<i18n-t v-if="layout === 'TAEON'" :keypath="'activity.' + name" tag="span">
 		<template #T> {{ (target as EmoteSet).name }} </template>
-		<template #AE>
+		<template v-if="(variables.AE as unknown as ActiveEmote).data" #AE>
 			<EmoteMention :emote="(variables.AE as unknown as ActiveEmote).data" :clickable="true" />
 		</template>
 		<template #O> {{ variables.O }} </template>