Some tidying up and such

ui/package.json

@@ -2,8 +2,8 @@
   "name": "team-finder-ui",
   "version": "0.0.0",
   "engines": {
-    "node": "^16.15.0",
-    "npm": "^8.5.5"
+    "node": "^20",
+    "npm": "^10"
   },
   "scripts": {
     "dev": "vite",
@@ -50,10 +50,9 @@
     "@testing-library/react": "^14.0.0",
     "@types/javascript-time-ago": "^2.0.3",
     "@types/jest": "^29.5.1",
-    "@types/react": "^18.2.0",
+    "@types/react": "^18.2.45",
     "@types/react-dom": "^18.2.1",
     "@types/react-router-dom": "^5.3.3",
-    "@types/tailwindcss": "^3.0.11",
     "@typescript-eslint/eslint-plugin": "^5.59.1",
     "@typescript-eslint/parser": "^5.59.1",
     "@vitejs/plugin-react": "^4.0.0",

ui/src/model/__mocks__/skillIcons.ts → ui/src/assets/__mocks__/skillIcons.ts

@@ -1,4 +1,4 @@
-import type { Skill } from "../skill";
+import type { Skill } from "../../model/skill";
 
 export function getSkillIcon(skill: Skill) {
   return `/testassets/skill-icons/${skill}.svg`;

ui/src/model/__mocks__/toolIcons.ts → ui/src/assets/__mocks__/toolIcons.ts

@@ -1,4 +1,4 @@
-import type { Tool } from "../tool";
+import type { Tool } from "../../model/tool";
 
 export function getToolIcon(tool: Tool) {
   return `/testassets/tool-icons/${tool}.svg`;

ui/src/components/AvailabilityList.tsx → ui/src/components/AvailabilityList/AvailabilityList.tsx

@@ -1,5 +1,5 @@
 import * as React from "react";
-import {Availability, availabilityInfoMap} from "../model/availability";
+import {Availability, availabilityInfoMap} from "../../model/availability";
 import cx from "classnames";
 
 // Not actually a list, currently only displays one at a time - oh well

ui/src/components/AvailabilityList/index.ts

@@ -0,0 +1 @@
+export { AvailabilityList } from "./AvailabilityList";

ui/src/pages/AvailabilitySelector.tsx → ui/src/components/AvailabilitySelector/AvailabilitySelector.tsx

@@ -3,7 +3,7 @@ import {
   allAvailabilities,
   Availability,
   availabilityInfoMap,
-} from "../model/availability";
+} from "../../model/availability";
 
 interface Props {
   value: Availability[];

ui/src/components/AvailabilitySelector/index.ts

@@ -0,0 +1 @@
+export { AvailabilitySelector } from "./AvailabilitySelector";

ui/src/components/Button.stories.ts → ui/src/components/Button/Button.stories.ts

@@ -1,4 +1,4 @@
-import {Button} from "./Button";
+import {Button} from ".";
 import {Meta, StoryObj} from "@storybook/react";
 
 const meta = {

ui/src/components/Button/index.ts

@@ -0,0 +1 @@
+export { Button } from "./Button";

ui/src/components/LanguageList.tsx → ui/src/components/LanguageList/LanguageList.tsx

@@ -1,5 +1,5 @@
 import * as React from "react";
-import {Language, languageInfoMap} from "../model/language";
+import {Language, languageInfoMap} from "../../model/language";
 import cx from "classnames";
 
 export const LanguageList: React.FC<{

ui/src/components/LanguageList/index.ts

@@ -0,0 +1 @@
+export { LanguageList } from "./LanguageList";

ui/src/pages/LanguageSelector.tsx → ui/src/components/LanguageSelector/LanguageSelector.tsx

@@ -1,6 +1,6 @@
 import React from "react";
-import { StyledSelector } from "../components/StyledSelector/StyledSelector";
-import {allLanguages, Language, languageInfoMap} from "../model/language";
+import { StyledSelector } from "../StyledSelector/StyledSelector";
+import {allLanguages, Language, languageInfoMap} from "../../model/language";
 
 interface Props {
   value: Language[];

ui/src/components/LanguageSelector/index.ts

@@ -0,0 +1 @@
+export { LanguageSelector } from "./LanguageSelector";

ui/src/components/PostView.stories.tsx → ui/src/components/PostView/PostView.stories.tsx

@@ -2,7 +2,7 @@ import {Meta, StoryObj} from "@storybook/react";
 
 import {PostView} from "./PostView";
 import React from "react";
-import {Context} from "../Context";
+import {Context} from "../../Context";
 
 const meta = {
     title: 'Post view',

ui/src/components/PostView.tsx → ui/src/components/PostView/PostView.tsx

@@ -1,19 +1,19 @@
 import * as React from "react";
 import { useNavigate } from "react-router-dom";
-import { useReportPostMutation, useReportBrokenDMsPostMutation } from "../queries/posts";
-import { FavouritePostIndicator } from "./FavouritePostIndicator";
-import { SkillList } from "./SkillList";
-import { ToolList } from "./ToolList";
-import { AvailabilityList } from "./AvailabilityList";
-import { LanguageList } from "./LanguageList";
-import { timezoneLabelFromInt } from "../model/timezone";
-import { Post } from "../model/post";
-import { useAuth } from "../utils/AuthContext";
+import { useReportPostMutation, useReportBrokenDMsPostMutation } from "../../queries/posts";
+import { FavouritePostIndicator } from "../FavouritePostIndicator";
+import { SkillList } from "../SkillList";
+import { ToolList } from "../ToolList";
+import { AvailabilityList } from "../AvailabilityList";
+import { LanguageList } from "../LanguageList";
+import { timezoneLabelFromInt } from "../../model/timezone";
+import { Post } from "../../model/post";
+import { useAuth } from "../../utils/AuthContext";
 import { toast } from "react-hot-toast";
-import { useUserInfo } from "../queries/userInfo";
-import { useCreateBotDmMutation } from "../queries/bot";
-import { login } from "../utils/login";
-import { iiicon } from "../utils/iiicon";
+import { useUserInfo } from "../../queries/userInfo";
+import { useCreateBotDmMutation } from "../../queries/bot";
+import { login } from "../../utils/login";
+import { iiicon } from "../../utils/iiicon";
 
 export const PostView: React.FC<{ post: Post }> = ({ post }) => {
 

ui/src/components/PostView/index.ts

@@ -0,0 +1 @@
+export { PostView } from "./PostView";

ui/src/components/PostViewWrapper.tsx → ui/src/components/PostViewWrapper/PostViewWrapper.tsx

@@ -1,9 +1,9 @@
 import * as React from "react";
 import { useParams } from "react-router-dom";
-import { usePostById } from "../queries/posts";
-import { Post } from "../model/post";
-import { PostView } from "./PostView";
-import { LoadingSpinner } from "../pages/Home/components/LoadingSpinner";
+import { usePostById } from "../../queries/posts";
+import { Post } from "../../model/post";
+import { PostView } from "../PostView";
+import { LoadingSpinner } from "../../pages/Home/components/LoadingSpinner";
 
 export const PostViewWrapper: React.FC = () => {
   const { postId } = useParams()

ui/src/components/PostViewWrapper/index.ts

@@ -0,0 +1 @@
+export { PostViewWrapper } from "./PostViewWrapper";

ui/src/components/SkillIcon.tsx → ui/src/components/SkillIcon/SkillIcon.tsx

@@ -1,6 +1,6 @@
 import * as React from "react";
 import { ReactSVG, Props as ReactSVGProps } from "react-svg";
-import { Skill, skillInfoMap } from "../model/skill";
+import { Skill, skillInfoMap } from "../../model/skill";
 
 const transparent =
   "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7";

ui/src/components/SkillIcon/index.ts

@@ -0,0 +1 @@
+export { SkillIcon } from "./SkillIcon";

ui/src/components/SkillList.tsx → ui/src/components/SkillList/SkillList.tsx

@@ -1,7 +1,7 @@
 import * as React from "react";
-import {Skill, skillInfoMap} from "../model/skill";
+import {Skill, skillInfoMap} from "../../model/skill";
 import cx from "classnames";
-import {SkillIcon} from "./SkillIcon";
+import {SkillIcon} from "../SkillIcon";
 
 export const SkillList: React.FC<{
     skills: Skill[];

ui/src/components/SkillList/index.ts

@@ -0,0 +1 @@
+export { SkillList } from "./SkillList";

ui/src/pages/SkillSelector.tsx → ui/src/components/SkillSelector/SkillSelector.tsx

@@ -1,7 +1,7 @@
 import * as React from "react";
-import { SkillIcon } from "../components/SkillIcon";
-import { StyledSelector } from "../components/StyledSelector/StyledSelector";
-import { allSkills, Skill, skillInfoMap } from "../model/skill";
+import { SkillIcon } from "../SkillIcon/SkillIcon";
+import { StyledSelector } from "../StyledSelector/StyledSelector";
+import { allSkills, Skill, skillInfoMap } from "../../model/skill";
 
 interface Props {
   value: Skill[];

ui/src/components/SkillSelector/index.ts

@@ -0,0 +1 @@
+export { SkillSelector } from "./SkillSelector";

ui/src/components/StyledSelector/index.ts

@@ -0,0 +1 @@
+export { StyledSelector } from "./StyledSelector";

ui/src/components/TimezoneOffsetSelector.tsx → ui/src/components/TimezoneOffsetSelector/TimezoneOffsetSelector.tsx

@@ -1,6 +1,6 @@
 import * as React from "react";
-import { StyledSelector } from "./StyledSelector/StyledSelector";
-import { allTimezoneOffsets, TimezoneOffset, timezoneOffsetInfoMap } from "../model/timezone";
+import { StyledSelector } from "../StyledSelector/StyledSelector";
+import { allTimezoneOffsets, TimezoneOffset, timezoneOffsetInfoMap } from "../../model/timezone";
 
 interface Props {
   value: TimezoneOffset[];

ui/src/components/TimezoneOffsetSelector/index.ts

@@ -0,0 +1 @@
+export { TimezoneOffsetSelector } from "./TimezoneOffsetSelector";

ui/src/components/ToolIcon.tsx → ui/src/components/ToolIcon/ToolIcon.tsx

@@ -1,6 +1,6 @@
 import * as React from "react";
 import { ReactSVG, Props as ReactSVGProps } from "react-svg";
-import { Tool, toolInfoMap } from "../model/tool";
+import { Tool, toolInfoMap } from "../../model/tool";
 
 const transparent =
   "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7";

ui/src/components/ToolIcon/index.ts

@@ -0,0 +1 @@
+export { ToolIcon } from "./ToolIcon";

ui/src/components/ToolList.tsx → ui/src/components/ToolList/ToolList.tsx

@@ -1,7 +1,7 @@
 import * as React from "react";
-import {Tool, toolInfoMap} from "../model/tool";
+import {Tool, toolInfoMap} from "../../model/tool";
 import cx from "classnames";
-import {ToolIcon} from "./ToolIcon";
+import {ToolIcon} from "../ToolIcon";
 
 export const ToolList: React.FC<{
     tools: Tool[];

ui/src/components/ToolList/index.ts

@@ -0,0 +1 @@
+export { ToolList } from "./ToolList";

ui/src/pages/ToolSelector.tsx → ui/src/components/ToolSelector/ToolSelector.tsx

@@ -1,7 +1,7 @@
 import * as React from "react";
-import { ToolIcon } from "../components/ToolIcon";
-import { StyledSelector } from "../components/StyledSelector/StyledSelector";
-import { allTools, Tool, toolInfoMap } from "../model/tool";
+import { ToolIcon } from "../ToolIcon";
+import { StyledSelector } from "../StyledSelector/StyledSelector";
+import { allTools, Tool, toolInfoMap } from "../../model/tool";
 
 interface Props {
   value: Tool[];

ui/src/components/ToolSelector/index.ts

@@ -0,0 +1 @@
+export { ToolSelector } from "./ToolSelector";

ui/src/model/skillIcons.ts

@@ -1,8 +1,8 @@
 import type { Skill } from "./skill";
 
-const skillIcons: Record<string, any> = import.meta.glob("./skill-icons-assets/*.svg", { eager: true });
+const skillIcons: Record<string, any> = import.meta.glob("../assets/skill-icons-assets/*.svg", { eager: true });
 
 export function getSkillIcon(skill: Skill) {
   // TODO: This should be either imported using the correct type or properly type checked
-  return skillIcons[`./skill-icons-assets/${skill}.svg`].default;
+  return skillIcons[`../assets/skill-icons-assets/${skill}.svg`].default;
 }

ui/src/model/toolIcons.ts

@@ -1,7 +1,7 @@
 import type { Tool } from "./tool";
 
-const toolIcons: Record<string, any> = import.meta.glob("./tool-icons-assets/*.svg", { eager: true });
+const toolIcons: Record<string, any> = import.meta.glob("../assets/tool-icons-assets/*.svg", { eager: true });
 
 export function getToolIcon(tool: Tool) {
-  return toolIcons[`./tool-icons-assets/${tool}.svg`].default;
+  return toolIcons[`../assets/tool-icons-assets/${tool}.svg`].default;
 }

ui/src/pages/Home/Home.tsx

@@ -6,16 +6,16 @@ import { isSkill } from "../../model/skill";
 import { SearchOptions, usePostsList } from "../../queries/posts";
 import { useUpdateSearchParam } from "../../utils/searchParam";
 import { useThrottleState } from "../../utils/throttleState";
-import { SkillSelector } from "../SkillSelector";
-import { ToolSelector } from "../ToolSelector";
+import { SkillSelector } from "../../components/SkillSelector";
+import { ToolSelector } from "../../components/ToolSelector";
 import { isTool } from "../../model/tool";
-import { AvailabilitySelector } from "../AvailabilitySelector";
+import { AvailabilitySelector } from "../../components/AvailabilitySelector";
 import { isAvailability } from "../../model/availability";
 import { Onboarding } from "./components/Onboarding";
 import { useEffect, useState } from "react";
 import { ViewOptions } from "./components/ViewOptions";
 import { isLanguage } from "../../model/language";
-import { LanguageSelector } from "../LanguageSelector";
+import { LanguageSelector } from "../../components/LanguageSelector";
 import { TimezoneOffsetSelector } from "../../components/TimezoneOffsetSelector";
 import { allTimezoneOffsets, TimezoneOffset, timezoneOffsetToInt } from "../../model/timezone";
 import { LoadingSpinner } from "./components/LoadingSpinner";

ui/src/pages/MyPost/MyPost.tsx

@@ -6,15 +6,15 @@ import {
   useMyPostQuery
 } from "../../queries/my-post";
 import { useEnsureLoggedIn } from "../../utils/useEnsureLoggedIn";
-import { AvailabilitySelector } from "../AvailabilitySelector";
+import { AvailabilitySelector } from "../../components/AvailabilitySelector";
 import { allAvailabilities, Availability } from "../../model/availability";
-import { SkillSelector } from "../SkillSelector";
+import { SkillSelector } from "../../components/SkillSelector";
 import { Skill } from "../../model/skill";
-import { ToolSelector } from "../ToolSelector";
+import { ToolSelector } from "../../components/ToolSelector";
 import { Tool } from "../../model/tool";
 import { useUserInfo } from "../../queries/userInfo";
 import { IncorrectPermsSetModal } from "./IncorrectPermsSetModal";
-import { LanguageSelector } from "../LanguageSelector";
+import { LanguageSelector } from "../../components/LanguageSelector";
 import { Language } from "../../model/language";
 import { TimezoneOffsetSelector} from "../../components/TimezoneOffsetSelector";
 import { TimezoneOffset, timezoneOffsetFromInt } from "../../model/timezone";