Merge from main and sorted test suites

FU.API/FU.API/Helpers/Mapper.cs

@@ -108,6 +108,7 @@ public static UserQuery ToUserQuery(this UserSearchRequestDTO dto)
         query.SortType = arr[0] switch
         {
             "username" => UserSortType.Username,
+            "dob" => UserSortType.DOB,
             "chatactivity" => UserSortType.ChatActivity,
             _ => UserSortType.Username,
         };

FU.API/FU.API/Models/Sorting.cs

@@ -3,6 +3,7 @@ namespace FU.API.Models;
 public enum UserSortType
 {
     Username,
+    DOB,
     ChatActivity,
 }
 

FU.API/FU.API/README.md

@@ -54,3 +54,6 @@ When users navigate to a pages with a chat, they will be connected the chat grou
             return Created(response);
         }
     }
+
+## Understanding Services
+Services usually interact directly with the database and use LINQ queries to sort, remove, and insert data into the database. To get a better and more complete understanding of how services work, look at the `FU.API.Tests` directory and look at the unit test.

FU.API/FU.API/Services/SearchService.cs

@@ -12,6 +12,8 @@ public class SearchService : CommonService, ISearchService
 {
     private static readonly DateTime DefaultTime = DateTime.MinValue;
 
+    private static readonly DateOnly DefaultDate = new DateOnly(1, 1, 1);
+
     private readonly AppDbContext _dbContext;
 
     public SearchService(AppDbContext dbContext)
@@ -127,6 +129,7 @@ private static Expression<Func<ApplicationUser, object>> SelectUserProperty(User
         return sortType switch
         {
             UserSortType.Username => (user) => user.NormalizedUsername,
+            UserSortType.DOB => (user) => user.DOB ?? DefaultDate,
             _ => (user) => user.NormalizedUsername,
         };
     }
@@ -137,6 +140,7 @@ private static Expression<Func<UserRelation, object>> SelectConnectedUserPropert
         {
             UserSortType.Username => (ur) => ur.User2.NormalizedUsername,
             UserSortType.ChatActivity => (ur) => ur.Chat.LastMessageAt ?? DefaultTime,
+            UserSortType.DOB => (ur) => ur.User2.DOB ?? DefaultDate,
             _ => (ur) => ur.User2.NormalizedUsername,
         };
     }

FU.SPA/package.json

@@ -10,7 +10,7 @@
     "preview": "npx vite preview",
     "format": "npx prettier . --write",
     "format-check": "npx prettier . --check",
-    "selenium-test": "npx selenium-side-runner tests/*.side -c browserName=firefox"
+    "selenium-test": "npx selenium-side-runner tests/Forces_Unite.side -c browserName=firefox"
   },
   "dependencies": {
     "@emotion/react": "^11.11.1",

FU.SPA/src/components/Edit.jsx

@@ -26,18 +26,24 @@ export default function Edit({ postId }) {
   const [game, setGame] = useState();
   const [title, setTitle] = useState('');
   const [startTime, setStartTime] = useState(dayjs());
-  const [endTime, setEndTime] = useState(dayjs().add(30, 'minute'));
+  const [endTime, setEndTime] = useState(dayjs().add(5, 'minute'));
   const [description, setDescription] = useState('');
   const [tags, setTags] = useState([]);
   const navigate = useNavigate();
+  const [postsDetails, setPostsDetails] = useState('');
 
   const { user } = useContext(UserContext);
 
   useEffect(() => {
     const init = async () => {
       try {
-        const postDetails = await PostService.getPostDetails(postId);
-        if (user.id !== postDetails.creator.id) {
+        const ogPostDetails = await PostService.getPostDetails(postId);
+        setPostsDetails(ogPostDetails);
+        setTitle(ogPostDetails.title);
+        setDescription(ogPostDetails.description);
+        setStartTime(dayjs(ogPostDetails.startTime));
+        setEndTime(dayjs(ogPostDetails.endTime));
+        if (user.id !== ogPostDetails.creator.id) {
           alert('You are not authorized to edit this post');
           navigate(`/discover`);
         }
@@ -47,7 +53,7 @@ export default function Edit({ postId }) {
     };
 
     init();
-  });
+  }, [postId, user, navigate]);
 
   const handleSubmit = async (e) => {
     // change to get post state, autofill fields based on info
@@ -124,7 +130,12 @@ export default function Edit({ postId }) {
             onChange={(e) => setTitle(e.target.value)}
           />
           <Grid item xs={12}>
-            <GameSelector onChange={setGame} />
+            {postsDetails.game !== undefined && (
+              <GameSelector
+                initialValue={postsDetails.game}
+                onChange={setGame}
+              />
+            )}
           </Grid>
           <br />
           <LocalizationProvider dateAdapter={AdapterDayjs}>
@@ -139,7 +150,12 @@ export default function Edit({ postId }) {
               onChange={(newValue) => setEndTime(newValue)}
             />
           </LocalizationProvider>
-          <TagsSelector onChange={setTags} />
+          {postsDetails.tags !== undefined && (
+            <TagsSelector
+              initialValues={postsDetails.tags}
+              onChange={setTags}
+            />
+          )}
           <Box
             sx={{
               display: 'flex',
@@ -175,13 +191,27 @@ const checkboxIconBlank = <CheckBoxOutlineBlankIcon fontSize="small" />;
 const checkboxIconChecked = <CheckBoxIcon fontSize="small" />;
 const filter = createFilterOptions();
 
-const GameSelector = ({ onChange }) => {
-  const [gammeOptions, setGameOptions] = useState([]);
+const GameSelector = ({ onChange, initialValue }) => {
+  const [gameOptions, setGameOptions] = useState([]);
   const [value, setValue] = useState('');
 
   useEffect(() => {
-    GameService.searchGames('').then((games) => setGameOptions(games));
-  }, []);
+    const getGames = async () => {
+      try {
+        const game = await GameService.searchGames('');
+        setGameOptions(game);
+        const gameChoice = game.find((g) => g.name === initialValue);
+        if (gameChoice) {
+          setValue(gameChoice);
+          onChange(gameChoice);
+        }
+      } catch (e) {
+        console.error('Problem getting games', e);
+      }
+    };
+
+    getGames();
+  }, [initialValue, onChange]);
 
   const onInputChange = (event, newValue) => {
     setValue(newValue);
@@ -207,18 +237,19 @@ const GameSelector = ({ onChange }) => {
 
   return (
     <Autocomplete
+      autoHighlight
       clearOnBlur
       value={value}
       onChange={onInputChange}
-      options={gammeOptions}
-      disableCloseOnSelect
+      options={gameOptions}
       filterOptions={onFilterOptions}
       getOptionLabel={(o) => (o ? o.name : '')}
       isOptionEqualToValue={(option, value) => option.name === value.name}
       renderOption={(props, option) => <li {...props}>{option.name}</li>}
       renderInput={(params) => (
         <TextField
           {...params}
+          autoHighlight
           label="Game"
           required
           placeholder="Select or create a game"
@@ -228,13 +259,29 @@ const GameSelector = ({ onChange }) => {
   );
 };
 
-const TagsSelector = ({ onChange }) => {
+const TagsSelector = ({ onChange, initialValues }) => {
   const [tagOptions, setTagOptions] = useState([]);
   const [value, setValue] = useState([]);
 
   useEffect(() => {
-    TagService.searchTags('').then((tags) => setTagOptions(tags));
-  }, []);
+    const getTags = async () => {
+      try {
+        const tags = await TagService.searchTags('');
+        setTagOptions(tags);
+        //if tags aren't null and isn't empty string.
+        if (initialValues && initialValues.length > 0) {
+          const initialTags = tags.filter((tag) =>
+            initialValues.includes(tag.name),
+          );
+          setValue(initialTags);
+          onChange(initialTags);
+        }
+      } catch (e) {
+        console.error('Something went wrong getting tags: ', e);
+      }
+    };
+    getTags();
+  }, [initialValues, onChange]);
 
   const onInputChange = (event, newValues) => {
     for (const newValue of newValues) {
@@ -270,6 +317,7 @@ const TagsSelector = ({ onChange }) => {
 
   return (
     <Autocomplete
+      autoHighlight
       multiple
       clearOnBlur
       value={value}

FU.SPA/src/components/pages/CreatePost.jsx

@@ -2,14 +2,13 @@ import {
   Button,
   TextField,
   Box,
-  Container,
   Typography,
   Grid,
   Checkbox,
   Autocomplete,
   createFilterOptions,
 } from '@mui/material';
-import { useEffect, useState } from 'react';
+import { useEffect, useState, useContext } from 'react';
 import CheckBoxOutlineBlankIcon from '@mui/icons-material/CheckBoxOutlineBlank';
 import CheckBoxIcon from '@mui/icons-material/CheckBox';
 import PostService from '../../services/postService';
@@ -20,8 +19,11 @@ import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
 import dayjs from 'dayjs';
 import { useNavigate } from 'react-router-dom';
 import { DateTimePicker } from '@mui/x-date-pickers/DateTimePicker';
+import PostCard from '../PostCard';
+import UserContext from '../../context/userContext';
 
 export default function CreatePost() {
+  const { user } = useContext(UserContext);
   const [game, setGame] = useState(null);
   const [title, setTitle] = useState('');
   const [startTime, setStartTime] = useState(dayjs().add(30, 'minute'));
@@ -60,15 +62,46 @@ export default function CreatePost() {
     }
   };
 
+  const getTagsForPreview = () => {
+    if (tags.length === 0) {
+      return ['Tag1', 'Tag2'];
+    }
+
+    return tags.map((tag) => tag.name);
+  };
+
   return (
-    <Container component="main" maxWidth="xs">
+    <div
+      style={{
+        display: 'flex',
+        justifyContent: 'center',
+        gap: '30px',
+        paddingRight: '10%',
+      }}
+    >
+      <div style={{ alignContent: 'center' }}>
+        <PostCard
+          post={{
+            creator: user,
+            game: game?.name ?? 'Game Name',
+            title: title.length > 0 ? title : 'Post Title',
+            description:
+              description.length > 0 ? description : 'Post Description',
+            startTime: startTime,
+            endTime: endTime,
+            tags: getTagsForPreview(),
+          }}
+          showActions={false}
+        />
+      </div>
       <Box
         sx={{
           marginTop: 1,
           m: 4,
           display: 'flex',
           flexDirection: 'column',
           alignItems: 'center',
+          width: 'fit-content',
         }}
       >
         <Typography component="h1" variant="h5">
@@ -89,10 +122,10 @@ export default function CreatePost() {
           }}
         >
           <TextField
-            required //may want to get rid of this and just check if it's empty when clicking create button.
+            required
             fullWidth
             id="searchGames"
-            label="Title" //might want to put a Search icon in front, if we can figure it out.
+            label="Title"
             autoFocus
             value={title}
             onChange={(e) => setTitle(e.target.value)}
@@ -142,7 +175,7 @@ export default function CreatePost() {
           </Button>
         </Box>
       </Box>
-    </Container>
+    </div>
   );
 }