Forum (#24)

* reviving the forum! * fix related to "notes" * on delete the notes are deleted too * bugfix + spinner in the initial loading screen * updated date because took me an extra day to fix some more bugs in staging * tweaks & cleanups
bandinopla · Mar 28, 2024 · 4b8001b · 4b8001b
1 parent 78bc34e
commit 4b8001b
Show file tree

Hide file tree

Showing 35 changed files with 2,344 additions and 95 deletions.
diff --git a/public/changelog.txt b/public/changelog.txt
@@ -1,3 +1,6 @@
+- 2.29.0 : 2024-03-26
+        + Revived the forums! (˵ ͡° ͜ʖ ͡°˵)
+
 - 2.28.0 : 2024-03-18
         + Added "Normal Gym Rank" a rank for the people that trains casually not with an athletic goal in mind.
         * fix bug introduced in 2.27.3 (changelog loading multiple times... oops!)

diff --git a/public/forum-banner.jpg b/public/forum-banner.jpg
diff --git a/public/index.html b/public/index.html
@@ -30,9 +30,32 @@
     </script>
 
     <style>
+        .loader {
+        width: 48px;
+        height: 48px;
+        border-radius: 50%;
+        display: inline-block;
+        border-top: 3px solid #FFF;
+        border-right: 3px solid transparent;
+        box-sizing: border-box;
+        animation: rotation 1s linear infinite;
+        }
+
+        @keyframes rotation {
+        0% {
+            transform: rotate(0deg);
+        }
+        100% {
+            transform: rotate(360deg);
+        }
+        } 
+
         .init {
             width: 100vw;
             height: 100vh;
+            display:flex;
+            justify-content: center;
+            align-items: center;
             z-index: 999;
             background-color: black;
             position: fixed;
@@ -57,7 +80,9 @@
     <title>Weight For Reps</title>
   </head>
   <body>
-    <div class="init"></div>
+    <div class="init">
+        <span class="loader"></span>
+    </div>
     <noscript>You need to enable JavaScript to run this app.</noscript>
     <div id="root"></div> 
   </body>

diff --git a/src/App.js b/src/App.js
@@ -82,6 +82,7 @@ const AboutPage = lazy(()=>import(/*webpackChunkName: "about" */"./pages/AboutPa
 const JournalSideBar = lazy(() => import(/* webpackChunkName: "jbase" */'./componentes/journal/side-bar.js'));
 const VideosPage = lazy(() => import(/* webpackChunkName: "videos" */'./pages/Videos')); 
 const PersonalRecordsPage = lazy(() => import(/* webpackChunkName: "personal-records" */'./pages/PersonalRecords'));
+const ForumPage = lazy(() => import(/* webpackChunkName: "forum" */'./forum/index'));
 
 /**
  * Utility... creates a basic layout.
@@ -156,6 +157,7 @@ function App() {
                                     <Route path="/unsub" component={UnsubFromEmails}/> 
                                     <RoutePage path="/videos" component={VideosPage}/> 
                                     <RoutePage path="/sbd-stats" component={SBDStatsPage} />
+                                    <RoutePage path="/forum" component={ForumPage} />
                                     <Route path="/donate" component={DonatePage}/> 
                                     <Route path="/faq" component={HelpPage}/> 
                                     <Route path="/about" component={AboutPage}/> 

diff --git a/src/componentes/ContentPageWrapper.js b/src/componentes/ContentPageWrapper.js
@@ -1,13 +1,10 @@
-import { Box, LinearProgress, Typography } from "@material-ui/core";
-import { useGetSession } from "../session/session-handler"
-import { Alert } from "@material-ui/lab";
+import { Box, Typography } from "@material-ui/core";
 import { SessionOnlyWidget } from "./SessionOnlyWidget";
 import {
-    BrowserRouter as Router,
-    Switch,
     useLocation
   } from "react-router-dom";
 import { MENU } from "./main-menu";
+import { createContext, useContext, useEffect, useState } from "react";
 
 
 /**
@@ -39,11 +36,14 @@ export const ContentPage = (props) => {
     return <PageLayout {...props}/>
 }
 
+const PageLayoutContext = createContext({ setTitle:(elem)=>{} });
+
 /** 
  * @param {ContentPageProps} param0  
  */
 export const PageLayout = ({ title, Icon, Child, ...rest }) => {
 
+    const [titleNode, setTitleNode] = useState();
     let location = useLocation(); 
     let menuItem = MENU.findLast( (m,i)=>m.goto?.length>1 && location.pathname.indexOf( m.goto )==0 );
 
@@ -61,10 +61,22 @@ export const PageLayout = ({ title, Icon, Child, ...rest }) => {
     } 
 
 
-    return <>
-        <Box padding={2} borderBottom="1px dashed #444" >
-            <Typography variant="h4">{ Icon && <Icon /> } {title ?? "???"}</Typography>
-        </Box> 
-        { Child ? <Child {...rest}/> : rest.children }
-    </>
+    return <PageLayoutContext.Provider value={{ setTitle:setTitleNode }}>
+            { titleNode!==false && <Box padding={2} borderBottom="1px dashed #444" >
+
+                { titleNode? titleNode : <Typography variant="h4">{ Icon && <Icon /> } {title ?? "???"}</Typography> }
+
+            </Box> }
+            { Child ? <Child {...rest}/> : rest.children }
+        </PageLayoutContext.Provider>
+}
+
+export const PageLayoutTitle = ({ children, none })=>{
+    const ctx = useContext(PageLayoutContext);
+
+    useEffect(()=>{
+        ctx.setTitle(none? false : children);
+    },[]);
+
+    return "";
 }
diff --git a/src/componentes/journal/jlog-text-format-tags.js b/src/componentes/journal/jlog-text-format-tags.js
@@ -0,0 +1,28 @@
+import { Box, Typography } from "@material-ui/core";
+
+export const TextFormatTagType = Symbol();
+
+export const JLogTextFormatTags = [
+    {
+        match: /^\*\*(.*?)\*\*/,
+        render: (match) => <strong>{match[1]}</strong> // Bold: **text**
+    },
+    {
+        match: /^\*(.*?)\*/,
+        render: (match) => <em>{match[1]}</em> // Italic: *text*
+    },
+    {
+        match: /^`{3}([^`]+)`{3}/,
+        render: (match) => <Box><code>{match[1]}</code></Box> // Code: `code`
+    },
+    {
+        match: /^`{1}([^`]+)`{1}/,
+        render: (match) => <code>{match[1]}</code>// Code: `code`
+    },
+    {
+        onlyStartOfLine:true,
+        match: /^\s*#(.*)/,
+        render: (match) => <Typography variant="h3">{match[1]}</Typography>
+    }
+]
+.map( tag=>({...tag, block: m=>({ type: TextFormatTagType, render:()=>tag.render(m) }) }) )
diff --git a/src/componentes/journal/jparser.js b/src/componentes/journal/jparser.js
@@ -1,4 +1,6 @@
+import { soundCloudMatcher } from "../soundcloud-tag";
 import { parsedTags2render } from "../user-text-to-parsed-tags";
+import { JLogTextFormatTags } from "./jlog-text-format-tags";
 import { TagTokenMatcher } from "./tags";
 
 export const TYPE = {
@@ -11,23 +13,48 @@ export const TYPE = {
      NEWLINE:6,
      POSTIMGCC:7,
      BlockWeekDay: 8,
-     TAG:9
+     TAG:9,
+     IMG:10,
+     UNAME:11, 
+     GIPHY:12
 }
 
 const _urlTagMatcher = { match:/^(?:http(?:s?):\/\/(?:www\.)?)[\S]+/, block: m=>({ type:TYPE.LINK, url:m[0] }) };
+const _imgTagMatcher = {
+    match:/^https?:\/\/\S+\.(jpg|png|gif|webp)\S*/gi,
+    block: m=>({ type:TYPE.IMG, url: m[0] })
+}
 const _newlineMatcher = { match:/^\s*$/, block: m=>({ type:TYPE.NEWLINE }) }
 
+const _unameMentionMatcher = { 
+    match: /^@([a-z0-9_]+)/i,
+    block: m=>({ type:TYPE.UNAME, uname: m[1] })
+}
+
 
 const parseErowComment = comment => {
     let tags = [
-        _urlTagMatcher
+        _imgTagMatcher,
+        _urlTagMatcher,
+        _unameMentionMatcher,
+
         //, _newlineMatcher
     ]
 
     return text2tags( comment, tags ); 
 };
 
-export const parseUserComment = comment => parseErowComment(comment);
+export const parseUserComment = (comment, fullTags) => {
+    if( fullTags )
+    {
+        return parseJlog(comment)
+    }
+    else 
+    {
+        return parseErowComment(comment);
+    }
+
+}
 
 
 export const previewTextToNode = ( textPreview, utags ) => { 
@@ -37,7 +64,7 @@ export const previewTextToNode = ( textPreview, utags ) => {
 
 export const parseJlog = (text2parse, eblocks, execises, bw, usekg, userTags, utagsValues ) => { 
 
-    let eblockCopy  = eblocks.slice(0); //lo copiamos porque lo vamos a modificar 
+
 
     //
     // replace TABS with spaces
@@ -65,15 +92,35 @@ export const parseJlog = (text2parse, eblocks, execises, bw, usekg, userTags, ut
         ,{ match:/^(?:http(?:s?):\/\/(?:www\.)?)?insta\.gram\/p\/(\w+)\/?/, block: m=>({ type:TYPE.IG, ig:m[1] }) }
 
         //, { match:/^(?:http(?:s?):\/\/(?:www\.)?)[\S]+\b/, block: m=>({ type:TYPE.LINK, url:m[0] }) }
-        , _urlTagMatcher
-        //, _newlineMatcher
+        , {
+            match:/^https:\/\/giphy\.com.*-(\S+)\b/,
+            block: m=>({ type:TYPE.GIPHY, giphy:m[1] })
+        }
 
-        , { match:/^EBLOCK:(\d+)/, block: m=>_buildEblockData( Number(m[1]), eblockCopy, execises, bw, usekg ) }
-        , TagTokenMatcher( userTags, utagsValues )
+        ,_unameMentionMatcher
+        , ...soundCloudMatcher 
+        , _imgTagMatcher
+        , _urlTagMatcher
+
+        //, _newlineMatcher 
+
         , { match:/^(?:B(\d+))?W(\d+)D(\d+)\b/, block: m=>({ type:TYPE.BlockWeekDay, B:m[1], W:m[2], D:m[3] }) }
-
+        , ...JLogTextFormatTags
+        //<div style="width:480px"><iframe allow="fullscreen" frameBorder="0" height="270" src="https://giphy.com/embed/NPl40igBCxq9FAgyKI/video" width="480"></iframe></div>
+
     ]; 
 
+    if( eblocks )
+    {
+        let eblockCopy  = eblocks.slice(0); //lo copiamos porque lo vamos a modificar 
+        tags.push({ match:/^EBLOCK:(\d+)/, block: m=>_buildEblockData( Number(m[1]), eblockCopy, execises, bw, usekg ) });  
+    }
+
+    if( userTags )
+    {
+        tags.push(TagTokenMatcher( userTags, utagsValues ))
+    }
+
     return text2tags( text2parse, tags ); 
 }; 
 
@@ -83,6 +130,7 @@ const text2tags = (text2parse, tags) => {
     let i           = 0;
     let rtrn        = [];
     let lastTextBlock;
+    let sol         = true;
 
     while( i<text2parse.length )
     {
@@ -94,7 +142,7 @@ const text2tags = (text2parse, tags) => {
 
             let m = text2parse.substr(i).match( tag.match );
 
-            if( m )
+            if( (!tag.onlyStartOfLine || sol) && m )
             { 
                 i += m[0].length;
 
@@ -113,12 +161,18 @@ const text2tags = (text2parse, tags) => {
 
 
                 lastTextBlock = null;
+                sol = false;
                 continue;
             }  
         }
 
-        if( oldi!=i )
+        if(text2parse[i]=="\n")
         {
+            sol = true;
+        }
+
+        if( oldi!=i )
+        { 
             continue;
         }
 
@@ -129,6 +183,12 @@ const text2tags = (text2parse, tags) => {
         }
 
         lastTextBlock.text += text2parse[i] || "";
+
+        if( text2parse[i]!=" " )
+        {
+            sol = false;
+        }
+
         i++; 
     }
 

diff --git a/src/componentes/main-menu.js b/src/componentes/main-menu.js
@@ -1,4 +1,4 @@
-import { IconButton, Button as MaterialButton, makeStyles, useMediaQuery, useTheme } from '@material-ui/core';
+import { makeStyles } from '@material-ui/core';
 import HomeIcon from '@material-ui/icons/Home';
 import SearchIcon from '@material-ui/icons/Search';
 import NotificationsNoneIcon from '@material-ui/icons/NotificationsNone';
@@ -25,27 +25,28 @@ import ListItemText from '@material-ui/core/ListItemText';
 import AccountCircleRoundedIcon from '@material-ui/icons/AccountCircleRounded';
 import SettingsRoundedIcon from '@material-ui/icons/SettingsRounded';
 import PowerSettingsNewRoundedIcon from '@material-ui/icons/PowerSettingsNewRounded';
-import OndemandVideoIcon from '@material-ui/icons/OndemandVideo'; 
 import { SwipeableDrawer } from './SwipableDrawer';
 import HelpIcon from '@material-ui/icons/Help';
 import FingerprintIcon from '@material-ui/icons/Fingerprint';
 import { openExercisesModal } from './journal/exercises';
-
+import VideocamIcon from '@material-ui/icons/Videocam';
+import GroupIcon from '@material-ui/icons/Group';
 
 export const MENU = [
     { Icon:HomeIcon, goto:"/", label:"Home" },
     { Icon:SearchIcon, goto:"/explore", label:"Explore" },
     { Icon:RssFeedIcon, goto:"/community-stats", label:"Community stats" },
     { Icon:LanguageIcon, goto:"/sbd-stats", label:"SBD Rank" },
-    { Icon:OndemandVideoIcon, goto:"/videos", label:"Videos" },
+    { Icon:GroupIcon, goto:"/forum", label:"Forum", addClass: classes => classes.forumBtn },
+    { Icon:VideocamIcon, goto:"/videos", label:"Videos" },
     { Icon:FavoriteBorderIcon, goto:"/donate", label:"Donate" },
     { Icon:HelpIcon, goto:"/faq", label:"Help" },
     { Icon:FingerprintIcon, goto:"/about", label:"About" },
 //liClass:styles.firstSession,
 
     { Icon:FitnessCenterSharpIcon, sessionMenuStart:true, fancy:true, onClick:()=>window.dispatchEvent(new Event("openEditor")), label:"Log Workout", session:true },
 
-    { Icon:AccountCircleRoundedIcon, goto: user => `/journal/${user.uname}` , label:"My Journal", session:true },
+    { Icon:AccountCircleRoundedIcon, goto: user => `/journal/${user.uname}` , label:session=>session.user.uname, session:true },
     { wrap: lbl=><NotificationsBadge type={2}>{lbl}</NotificationsBadge>,goto:"/notifications", type:2, label:"Notifications", Icon:NotificationsNoneIcon, session:true },
     { wrap: lbl=><NotificationsBadge type={1}>{lbl}</NotificationsBadge>, goto:"/messages", type:1, label:"Messages", Icon:MailOutlineIcon, session:true },
 
@@ -96,6 +97,18 @@ const useStylesDrawer = makeStyles( theme=>({
         }
     },
 
+    forumBtn: {
+        "& .MuiTypography-root": {
+            fontWeight:"bold !important",
+            background:"-webkit-linear-gradient(#980F7A, #E68538)",
+            "-webkit-background-clip":"text",
+            "-webkit-text-fill-color":"transparent"
+        },
+        "& .MuiSvgIcon-root path": {
+            fill: "#B92E59"
+        }
+
+    },
 
     // handle: {
     //     background:"black",
@@ -166,10 +179,13 @@ export const MainMenuDrawer = ()=>{
 
                 const linkUrl = typeof btn.goto=='function'? btn.goto(user.session?.user) : btn.goto;
                 const isSelected = location.pathname==linkUrl || ( linkUrl?.length>1 && location.pathname.indexOf(linkUrl)===0 );
+                const label = typeof btn.label == 'function' ? btn.label(user.session) : btn.label;
 
-                return (<ListItem button key={i} selected={isSelected} onClick={ ev=>onClickButton(btn, linkUrl)} className={(btn.sessionMenuStart? cls.firstSession: "") +" " + (btn.fancy?" fancy sha spaceBelow": "")}>
+                return (<ListItem button key={i} selected={isSelected} 
+                                    onClick={ ev=>onClickButton(btn, linkUrl)} 
+                                    className={(btn.sessionMenuStart? cls.firstSession: "") +" " + (btn.fancy?" fancy sha spaceBelow": "")+ (btn.addClass?" "+btn.addClass(cls):"")}>
                             <ListItemIcon><btn.Icon/></ListItemIcon>
-                            <ListItemText color='primary' primary={  btn.wrap? btn.wrap(btn.label) : btn.label } />
+                            <ListItemText color='primary' primary={  btn.wrap? btn.wrap(label) : label } />
                         </ListItem>)})}
         </List>
     </div>);