Add theme page.

CHANGELOG.md

@@ -8,6 +8,9 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ## [Unreleased]
 
 ### Added
+- Theme URLs: Easily share themes by their codes.
+- Theme Page: Apply other user themes.
+
 ### Changed
 ### Fixed
 

OUTLINE.md

@@ -5,20 +5,12 @@
 > view as guest (disabled by default)
 > acrd.app/guilds/:name
 > https://acrd.app/channels/:uniqueGuildName/:uniqueChannelName
-[3] theme page
-> https://acrd.app/theme/:themeId
-[4] show more things no channels exist
+[4] show more things when no channels exist
 > show member list bar
 > inform user that there are no channels
 
 # FIXME
 
-[1] send files: members can send files without permission
-[1] guild invite settings: page does not load, after fetching invites
-> TypeError: Cannot read properties of undefined (reading 'id')
-> invite may be created by a user that left the guild
-[2] themes do not work on live build
-
 # VERIFY
 
 [3] member status: members sometimes remain online, after going offline

backend/src/rest/routes/theme-routes.ts

@@ -4,12 +4,11 @@ import { SelfUserDocument } from '../../data/models/user';
 import updateUser from '../middleware/update-user';
 import validateUser from '../middleware/validate-user';
 import { APIError } from '../modules/api-error';
-import parseCSS from 'css-parse';
 
 export const router = Router();
 
 router.get('/', async (req, res) => {
-  const themes = await Theme.find({ featured: true });
+  const themes = await Theme.find({ isFeatured: true });
   res.json(themes);
 });
 

frontend/env/.env.dev

@@ -4,5 +4,5 @@ REACT_APP_CDN_URL="http://localhost:3000/assets"
 REACT_APP_WEBSITE_URL="http://localhost:4200"
 REACT_APP_REPO_URL="https://github.com/acrdapp/app"
 REACT_APP_VERSION_NAME="Winter"
-REACT_APP_VERSION_NUMBER="0.4.1-alpha"
+REACT_APP_VERSION_NUMBER="0.4.2-pre-release"
 REACT_APP_ROOT_API_URL="http://localhost:3000"

frontend/env/.env.prod

@@ -4,5 +4,5 @@ REACT_APP_CDN_URL="https://api.acrd.app/assets"
 REACT_APP_WEBSITE_URL="https://acrd.app"
 REACT_APP_REPO_URL="https://github.com/acrdapp/app"
 REACT_APP_VERSION_NAME="Winter"
-REACT_APP_VERSION_NUMBER="0.4.1-alpha"
+REACT_APP_VERSION_NUMBER="0.4.2-pre-release"
 REACT_APP_ROOT_API_URL="https://api.acrd.app"

frontend/src/components/modals/user-settings/user-settings-themes.tsx

@@ -70,7 +70,7 @@ const UserSettingsThemes: React.FunctionComponent = () => {
     };
 
     const copyCode = () => {
-      const inviteURL = `${process.env.REACT_APP_WEBSITE_URL}/themes/${theme?.id}`;
+      const inviteURL = `${process.env.REACT_APP_WEBSITE_URL}/themes/${theme?.code}`;
       window.navigator.clipboard.writeText(inviteURL);
     }
 

frontend/src/components/pages/theme-page.tsx

@@ -8,7 +8,7 @@ import fetchEntities from '../../store/actions/fetch-entities';
 import { getGuild, getGuildMembers } from '../../store/guilds';
 import { joinGuild } from '../../store/members';
 import { applyTheme, getThemeByCode, getTheme, unlockTheme } from '../../store/themes';
-import { getUser } from '../../store/users';
+import { getUser, updateSelf } from '../../store/users';
 import SidebarIcon from '../navigation/sidebar/sidebar-icon';
 import FoundUsername from '../user/username';
 import NormalButton from '../utils/buttons/normal-button';
@@ -18,6 +18,7 @@ import PageWrapper from './page-wrapper';
 interface ThemePageProps { }
 
 const ThemePage: React.FunctionComponent<ThemePageProps> = () => {
+  const history = useHistory();
   const dispatch = useDispatch();
   const { themeCode }: any = useParams();
   const theme: Entity.Theme = useSelector(getThemeByCode(themeCode));
@@ -65,12 +66,8 @@ const ThemePage: React.FunctionComponent<ThemePageProps> = () => {
           childClasses="bg-bg-tertiary w-24 h-24 pt-6 text-xl"
           disableHoverEffect />
         <div className="flex justify-around items-center w-full mx-5">
-          {/* <span className='text-center'>
-            <div className="heading font-bold text-center">Members</div>
-            <code>{members.length}</code>
-          </span> */}
           <span className='text-center'>
-            <div className="heading font-bold">Owned By</div>
+            <div className="heading font-bold">Created By</div>
             <FoundUsername user={creatorUser} />
           </span>
         </div>
@@ -78,7 +75,8 @@ const ThemePage: React.FunctionComponent<ThemePageProps> = () => {
       <div className="flex justify-center gap-5 mx-5 mt-5">
         <NormalButton
           onClick={() => {
-            applyTheme(themeCode);
+            dispatch(updateSelf({ activeThemeId: theme.id }));
+            history.push(`/channels/@me`);
           }}
           className="bg-success dark">Apply</NormalButton>
         <Link to="/channels/@me">

frontend/src/components/utils/buttons/circle-button.tsx

@@ -4,6 +4,7 @@ import { HTMLAttributes } from 'react';
 const CircleButton: React.FunctionComponent<HTMLAttributes<HTMLButtonElement>> = (props) => {
   return (
     <button
+      type="button"
       {...props}
       className={classNames(
         `rounded-full border-2 border-gray-400 secondary px-4 py-1`,

frontend/src/components/ws-listener.tsx

@@ -36,7 +36,7 @@ const WSListener: React.FunctionComponent = () => {
       enqueueSnackbar(`${dialog.content}.`, {
         anchorOrigin: { vertical: 'bottom', horizontal: 'left' },
         variant: dialog.variant,
-        autoHideDuration: 4000,
+        autoHideDuration: 3000,
       });
 
     ws.on('error', (error: any) => handleDialog({

frontend/src/store/themes.ts

@@ -108,7 +108,7 @@ export const deleteTheme = (id: string) => (dispatch) => {
   }));
 }
 
-export const applyTheme = (styles = accordTheme) => {
+export const applyTheme = (styles: any = accordTheme) => {
   const themeWrapper = document.querySelector('#themeWrapper')!;
   themeWrapper.innerHTML = `<style>${styles}</style>`;
 }