refactor: renamed builder sidebar to planner

src/components/Templates/Project/Planner/index.tsx

@@ -7,7 +7,7 @@ import classNames from 'classnames';
 import { CenterContent } from './styles';
 import UnityPlayer from '../../../Elements/UnityPlayer';
 import { useUnityPlayerContext, UnityPlayerProvider } from '../../../Providers/UnityPlayerProvider';
-import BuilderSidebar from '../../../UI/BuilderSidebar';
+import PlannerSidebar from '../../../UI/PlannerSidebar';
 import ProgressBar from '../../../UI/ProgressBar';
 import Spinner from '../../../UI/Spinner';
 import { PlannerQuery } from '../../../../apollo/generated/graphql';
@@ -107,7 +107,7 @@ const Planner: React.FC<PlannerProps> = ({ slug, data, loading, error, handleTry
   return (
     <div className="flex max-h-screen">
       {/* Left sidebar, fixed width */}
-      <BuilderSidebar project={data?.project} />
+      <PlannerSidebar project={data?.project} />
       {/* Right section, takes remaining space(flex-grow) */}
       <div className="relative flex-grow bg-mui-gray-300">
         {/* Try avoiding wrapping unity player with more conditions, or else it won't load on init */}

src/components/UI/BuilderSidebar/index.tsx → src/components/UI/PlannerSidebar/index.tsx

@@ -6,29 +6,29 @@ import { faXmark } from '@fortawesome/free-solid-svg-icons';
 import { FormattedMessage } from 'react-intl';
 import { AnimatePresence, motion } from 'framer-motion';
 
-type BuilderSidebarState = 'closed' | 'categories' | 'modules';
+type PlannerSidebarState = 'closed' | 'categories' | 'modules';
 
-type BuilderSidebarProps = {
+type PlannerSidebarProps = {
   project?: {
     title?: string | null;
     modules?: ModuleDataFragment[];
   } | null;
 };
 
-type BuilderSidebarCategories = NonNullable<
+type PlannerSidebarCategories = NonNullable<
   NonNullable<SidebarCategoriesProps['project']>['modules']
 >[number]['categories'][number];
 
-type SidebarCategoriesProps = Pick<BuilderSidebarProps, 'project'> & {
-  onCategoryClick: (category: BuilderSidebarCategories) => void;
+type SidebarCategoriesProps = Pick<PlannerSidebarProps, 'project'> & {
+  onCategoryClick: (category: PlannerSidebarCategories) => void;
 };
 
 const SidebarCategories: React.FC<SidebarCategoriesProps> = ({ project, onCategoryClick }) => {
   const categories = useMemo(() => {
     if (project?.modules) {
       return uniqBy(
         // Remove duplicates
-        project.modules.flatMap((module) => module.categories as BuilderSidebarCategories[]),
+        project.modules.flatMap((module) => module.categories as PlannerSidebarCategories[]),
         'slug'
       );
     }
@@ -60,8 +60,8 @@ const SidebarCategories: React.FC<SidebarCategoriesProps> = ({ project, onCatego
   );
 };
 
-type SidebarModulesProps = Pick<NonNullable<BuilderSidebarProps['project']>, 'modules'> & {
-  category?: BuilderSidebarCategories;
+type SidebarModulesProps = Pick<NonNullable<PlannerSidebarProps['project']>, 'modules'> & {
+  category?: PlannerSidebarCategories;
   onCloseClick: () => void;
 };
 
@@ -106,10 +106,10 @@ const animationVariants = {
   closed: { width: '0%', opacity: 0 }
 };
 
-const BuilderSidebar: React.FC<BuilderSidebarProps> = ({ project }) => {
+const PlannerSidebar: React.FC<PlannerSidebarProps> = ({ project }) => {
   const [isOpen] = useState(true);
-  const [state, setState] = useState<BuilderSidebarState>('categories');
-  const [category, setCategory] = useState<BuilderSidebarCategories | undefined>();
+  const [state, setState] = useState<PlannerSidebarState>('categories');
+  const [category, setCategory] = useState<PlannerSidebarCategories | undefined>();
 
   const onCategoryClick = useCallback((category) => {
     setCategory(category);
@@ -149,4 +149,4 @@ const BuilderSidebar: React.FC<BuilderSidebarProps> = ({ project }) => {
   );
 };
 
-export default BuilderSidebar;
+export default PlannerSidebar;