Merge pull request #458 from bounswe/3design_frontend

Merge Frontend Into Main
bounswe · Dec 16, 2024 · 940eefb · 940eefb
2 parents db3345f + 761b4d4
commit 940eefb
Show file tree

Hide file tree

Showing 25 changed files with 1,353 additions and 315 deletions.
diff --git a/3Design/frontend/.gitignore b/3Design/frontend/.gitignore
@@ -17,6 +17,7 @@
 .env.development.local
 .env.test.local
 .env.production.local
+.env
 
 npm-debug.log*
 yarn-debug.log*

diff --git a/3Design/frontend/src/App.tsx b/3Design/frontend/src/App.tsx
@@ -9,6 +9,7 @@ import PostPage from './components/PostPage/PostPage';
 import SearchResults from './components/SearchResults/SearchResults';
 import LeaderboardPage from './components/TournamentLeaderboard/LeaderboardPage';
 import ProfilePage from './components/ProfilePage/ProfilePage';
+import TagSearchResults from './components/TagSearchResults/TagSearchResults';
 
 function App() {
   return (
@@ -57,6 +58,18 @@ function App() {
             <SearchResults/>
           }
         />
+        <Route
+          path="/tagsearch/:query"
+          element={
+            <TagSearchResults/>
+          }
+        />
+        <Route
+          path="/tagsearch"
+          element={
+            <TagSearchResults/>
+          }
+        />
         <Route
           path="/tournament/:category"
           element={

diff --git a/3Design/frontend/src/components/CreatePost/ChallengePost.tsx b/3Design/frontend/src/components/CreatePost/ChallengePost.tsx
@@ -1,10 +1,10 @@
 import { UploadOutlined,AddCircleOutline,Clear } from '@mui/icons-material'
-import { CircularProgress, FormControl, IconButton, InputLabel, MenuItem, Select, TextField } from '@mui/material'
+import { CircularProgress, Dialog, FormControl, IconButton, InputLabel, MenuItem, Select, TextField } from '@mui/material'
 import { Button, GetProp, message, Upload, UploadFile, UploadProps } from 'antd'
 import React, { SetStateAction, useEffect, useState } from 'react'
-import { Category } from '../interfaces'
+import { Category, DesignProperty } from '../interfaces'
 import axios, { AxiosError } from 'axios'
-import { limitPostBodies } from '../tsfunctions'
+import { limitPostBodies, mergePostString } from '../tsfunctions'
 
 const categories:Category[] = require('../../resources/json-files/Categories.json');
 interface Props{
@@ -33,6 +33,9 @@ const ChallengePost = ({dialogFunction, challengedPostId, categoryId} : Props) =
 
     const [creatingPost, setCreating] = useState(false);
 
+    const [designProperties, setDesignProperties] = useState<DesignProperty[]>(require("../../resources/json-files/DesignProperties.json"));
+    const [propertyWindow, setPropertyWindow] = useState(false);
+
 
     const validateTitle = () => {
         if (title.length < 5){
@@ -67,8 +70,16 @@ const ChallengePost = ({dialogFunction, challengedPostId, categoryId} : Props) =
             const fd = new FormData();
             const tagString = tags.join(", ");
             const fixedCategory = `${categoryId}`;
+            let fixedContent = content;
+            const stringLst = [fixedContent];
+            for (let prop of designProperties){
+                if (prop.value != ""){
+                    stringLst.push(`${prop.property} : ${prop.value}`);
+                }
+            }
+            fixedContent = mergePostString(stringLst);
             fd.append("title", title);
-            fd.append("text", content);
+            fd.append("text", fixedContent);
             fd.append("categoryId", fixedCategory);
             fd.append("isVisualPost", "true");
             fd.append("challengedPostId", `${challengedPostId}`);
@@ -181,11 +192,43 @@ const ChallengePost = ({dialogFunction, challengedPostId, categoryId} : Props) =
             >
                 <Button icon={<UploadOutlined />}>Select File</Button>
             </Upload>
+            <Button onClick={() => setPropertyWindow(true)} disabled={fileList.length == 0} type='primary' className='w-1/2'>Design Properties</Button>
             <div className='flex gap-2 mr-0 ml-auto'>
                 <button className='btn btn-outline' onClick={() => dialogFunction(false)}>Cancel</button>
                 <button disabled={creatingPost} onClick={sendPost} className='btn btn-primary' >Challenge Post</button>
                 {creatingPost && <CircularProgress style={{fontSize: "8px"}}/>}
             </div>
+            <Dialog maxWidth="sm" fullWidth open={propertyWindow}>
+                <div className='flex flex-col p-4 gap-4'>
+                    <p className='font-bold text-lg'>Design Properties</p>
+                    {designProperties.map((item,index) => (
+                        item.options.length == 0 ? 
+                        <TextField
+                        className='w-5/6'
+                        label={item.property}
+                        value={item.value} onChange={e => setDesignProperties(prev => {
+                            const temp = [...prev];
+                            temp[index] = {...temp[index], value: e.target.value};
+                            return temp;
+                        })
+                        }
+                        /> :
+                        <FormControl className='w-5/6'>
+                            <InputLabel id={`prop_${index}`}>{item.property}</InputLabel>
+                            <Select label={item.property} labelId={`prop_${index}`} value={item.value} onChange={e => setDesignProperties(prev => {
+                                const temp = [...prev];
+                                temp[index] = {...temp[index], value: e.target.value};
+                                return temp;
+                            })}>
+                                {item.options.map((c, i) => <MenuItem key={i} value={c}>{c}</MenuItem>)}
+                            </Select>
+                        </FormControl>
+                    ))}
+                    <div className='flex justify-end'>
+                        <button className='btn btn-outline' onClick={() => setPropertyWindow(false)}>Done</button>
+                    </div>
+                </div>
+            </Dialog>
         </div>
 
     )

diff --git a/3Design/frontend/src/components/CreatePost/CreatePost.tsx b/3Design/frontend/src/components/CreatePost/CreatePost.tsx
@@ -1,10 +1,10 @@
 import { UploadOutlined,AddCircleOutline,Clear } from '@mui/icons-material'
-import { CircularProgress, FormControl, IconButton, InputLabel, MenuItem, Select, TextField } from '@mui/material'
+import { CircularProgress, Dialog, FormControl, IconButton, InputLabel, MenuItem, Select, TextField } from '@mui/material'
 import { Button, GetProp, message, Upload, UploadFile, UploadProps } from 'antd'
 import React, { SetStateAction, useEffect, useState } from 'react'
-import { Category } from '../interfaces'
+import { Category, DesignProperty } from '../interfaces'
 import axios, { AxiosError } from 'axios'
-import { limitPostBodies } from '../tsfunctions'
+import { limitPostBodies, mergePostString } from '../tsfunctions'
 
 const categories:Category[] = require('../../resources/json-files/Categories.json');
 interface Props{
@@ -29,6 +29,9 @@ const CreatePost = ({dialogFunction} : Props) => {
 
     const [joinToTournament, setTournament] = useState(false);
 
+    const [designProperties, setDesignProperties] = useState<DesignProperty[]>(require("../../resources/json-files/DesignProperties.json"));
+    const [propertyWindow, setPropertyWindow] = useState(false);
+
     const [creatingPost, setCreating] = useState(false);
 
     const validateTitle = () => {
@@ -54,15 +57,32 @@ const CreatePost = ({dialogFunction} : Props) => {
             setTitleError(titleCheck);
             return;
         }
+        if (joinToTournament && fileList.length != 1){
+            message.error("You must add a 3D Model to your post to joining the tournament.");
+            return;
+        }
         setCreating(true);
         try{
-        
+
             const fd = new FormData();
             const isVisual = fileList.length == 1;
+
             const tagString = tags.join(", ");
             const fixedCategory = `${category}`;
+            let fixedContent = content;
+
+            if (isVisual){
+                const stringLst = [fixedContent];
+                for (let prop of designProperties){
+                    if (prop.value != ""){
+                        stringLst.push(`${prop.property} : ${prop.value}`);
+                    }
+                }
+                fixedContent = mergePostString(stringLst);
+            }
+
             fd.append("title", title);
-            fd.append("text", content);
+            fd.append("text", fixedContent);
             fd.append("categoryId", fixedCategory);
             fd.append("isVisualPost", isVisual ? "true" : "false");
             fd.append("tags", tagString);   
@@ -174,11 +194,43 @@ const CreatePost = ({dialogFunction} : Props) => {
             >
                 <Button icon={<UploadOutlined />}>Select File</Button>
             </Upload>
+            <Button onClick={() => setPropertyWindow(true)} disabled={fileList.length == 0} type='primary' className='w-1/2'>Design Properties</Button>
             <div className='flex gap-2 mr-0 ml-auto'>
                 <button className='btn btn-outline' onClick={() => dialogFunction(false)}>Cancel</button>
                 <button disabled={creatingPost} onClick={sendPost} className='btn btn-primary' >Create Post</button>
                 {creatingPost && <CircularProgress style={{fontSize: "8px"}}/>}
             </div>
+            <Dialog maxWidth="sm" fullWidth open={propertyWindow}>
+                <div className='flex flex-col p-4 gap-4'>
+                    <p className='font-bold text-lg'>Design Properties</p>
+                    {designProperties.map((item,index) => (
+                        item.options.length == 0 ? 
+                        <TextField
+                        className='w-5/6'
+                        label={item.property}
+                        value={item.value} onChange={e => setDesignProperties(prev => {
+                            const temp = [...prev];
+                            temp[index] = {...temp[index], value: e.target.value};
+                            return temp;
+                        })
+                        }
+                        /> :
+                        <FormControl className='w-5/6'>
+                            <InputLabel id={`prop_${index}`}>{item.property}</InputLabel>
+                            <Select label={item.property} labelId={`prop_${index}`} value={item.value} onChange={e => setDesignProperties(prev => {
+                                const temp = [...prev];
+                                temp[index] = {...temp[index], value: e.target.value};
+                                return temp;
+                            })}>
+                                {item.options.map((c, i) => <MenuItem key={i} value={c}>{c}</MenuItem>)}
+                            </Select>
+                        </FormControl>
+                    ))}
+                    <div className='flex justify-end'>
+                     <button className='btn btn-outline' onClick={() => setPropertyWindow(false)}>Done</button>
+                    </div>
+                </div>
+            </Dialog>
         </div>
 
     )