Recent Q/A Sessions in Q/A Tab (#20)

* fix: add link support for option type * feat: flow for new qna session * style: sessions page header layout * chore: add env file to .gitignore * chore: add environment variables to shared commons * feat: add methods for handling data requests, with mock data support * feat: add UI for empty state, recent sessions view * fix: created a new recent-qna-session-list component in section folder and imported it in page.tsx, changed the values of sessionID in qna-session-mock.ts to make all of them unique * fix: changed the data of qna-session-mocks.ts file from function returning array of interface to object of type array of interfaces (reference: FeatureList object from dashboard-features-list) * feat: a rough design of the recent-qna-sessions * fix-styles: fixed a hover brightness style * fix style: created a common class box-card to reduce css repitition * feat: add component for listing items in flex * fix: vercel key-prop issue resolved * fix: recent sessions list rendering * chore: feature list data shifted to common * feat: created a box-card component in layout * chore: changed name component-list to box-card-slider * chore: file name changed and box-card style removed * fix: build error fixed * fix: build error fixed * chore: used usestate as prop in recent-qna-sessions-list * fix: prop error fix in recent-qna-session * fix: Style changes * style: update text size in recent q/a session cards * feat: add prettier config * chore: prettier fix * style: remove ring on links and buttons * style: add dialog content bg * feat: mock data manager for topics & depth --------- Co-authored-by: Shristi Gupta <[email protected]>
yashsehgal · Oct 12, 2023 · 1cd2841 · 1cd2841
1 parent 3cc2f3d
commit 1cd2841
Show file tree

Hide file tree

Showing 55 changed files with 1,074 additions and 512 deletions.
diff --git a/.gitignore b/.gitignore
@@ -26,6 +26,7 @@ yarn-error.log*
 
 # local env files
 .env*.local
+.env
 
 # vercel
 .vercel

diff --git a/.prettierrc.js b/.prettierrc.js
@@ -0,0 +1,9 @@
+module.exports = {
+  semi: true,
+  singleQuote: true,
+  trailingComma: 'all',
+  bracketSameLine: true,
+  tabWidth: 2,
+  useTabs: false,
+  arrowParens: 'always',
+};
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -12,7 +12,7 @@
     "titleBar.activeForeground": "#ffffff",
     "titleBar.inactiveBackground": "#3770FF",
     "titleBar.inactiveForeground": "#ffffff"
-  },
+  }
   // Enables TypeScript check for all files, but instantly kills RAM so only enable when needed
   // "typescript.tsserver.experimental.enableProjectDiagnostics": true
-}
+}
diff --git a/app/dashboard/page.tsx b/app/dashboard/page.tsx
@@ -1,17 +1,17 @@
-import PageContent from "@/components/layouts/page-content";
-import DashboardFeatureList from "@/components/sections/dashboard-features-list";
-import DashboardRecentActivity from "@/components/sections/dashboard-recent-activity";
-import TopicSuggestions from "@/components/sections/topic-suggestions";
+import PageContent from '@/components/layouts/page-content';
+import DashboardFeatureList from '@/components/sections/dashboard-features-list';
+import DashboardRecentActivity from '@/components/sections/dashboard-recent-activity';
+import TopicSuggestions from '@/components/sections/topic-suggestions';
 
 const Dashboard: React.FunctionComponent = () => {
-    return (
-        <PageContent>
-            <div className="dashboard grid grid-cols-1 gap-20">
-                <DashboardFeatureList />
-                {/* <DashboardRecentActivity /> */}
-                {/* <TopicSuggestions /> */}
-            </div>
-        </PageContent>
-    )
-}
-export default Dashboard;
+  return (
+    <PageContent>
+      <div className="dashboard grid grid-cols-1 gap-20">
+        <DashboardFeatureList />
+        {/* <DashboardRecentActivity /> */}
+        {/* <TopicSuggestions /> */}
+      </div>
+    </PageContent>
+  );
+};
+export default Dashboard;
diff --git a/app/globals.css b/app/globals.css
@@ -2,16 +2,28 @@
 @tailwind components;
 @tailwind utilities;
 
-.view-container{
-    @apply box-border mx-auto;
-    @apply w-[1250px] max-2xl:w-[1200px] max-xl:w-[920px] max-lg:w-[720px] max-md:w-[600px] max-sm:w-[440px];
+body,
+html {
+  @apply text-neutral-800;
 }
 
-h1, h2, h3, h4 {
-    @apply tracking-tight;
+.view-container {
+  @apply box-border mx-auto;
+  @apply w-[1250px] max-2xl:w-[1200px] max-xl:w-[920px] max-lg:w-[720px] max-md:w-[600px] max-sm:w-[440px];
+}
+
+h1,
+h2,
+h3,
+h4 {
+  @apply tracking-tight;
 }
 
 .hide-scrollbar::-webkit-scrollbar {
-    width: 0;  /* Remove scrollbar space */
-    background: transparent;  /* Optional: just make scrollbar invisible */
-}
+  width: 0; /* Remove scrollbar space */
+  background: transparent; /* Optional: just make scrollbar invisible */
+}
+
+.form-input-wrapper {
+  @apply grid grid-cols-1 gap-2 my-6;
+}
diff --git a/app/layout.tsx b/app/layout.tsx
@@ -1,13 +1,13 @@
-import Navbar from '@/components/sections/navbar'
-import './globals.css'
-import { Inter } from 'next/font/google'
+import Navbar from '@/components/sections/navbar';
+import './globals.css';
+import { Inter } from 'next/font/google';
 
-const inter = Inter({ subsets: ['latin'] })
+const inter = Inter({ subsets: ['latin'] });
 
 export default function RootLayout({
   children,
 }: {
-  children: React.ReactNode
+  children: React.ReactNode;
 }) {
   return (
     <html lang="en">
@@ -16,5 +16,5 @@ export default function RootLayout({
         {children}
       </body>
     </html>
-  )
+  );
 }
diff --git a/app/page.tsx b/app/page.tsx
@@ -1,6 +1,6 @@
-import PageContent from "@/components/layouts/page-content";
-import ViewContainer from "@/components/layouts/view-container";
-import StatusAlert from "@/components/ui/status-alert";
+import PageContent from '@/components/layouts/page-content';
+import ViewContainer from '@/components/layouts/view-container';
+import StatusAlert from '@/components/ui/status-alert';
 
 const App: React.FunctionComponent = () => {
   return (
@@ -9,7 +9,7 @@ const App: React.FunctionComponent = () => {
         <StatusAlert />
       </ViewContainer>
     </PageContent>
-  )
-}
+  );
+};
 
-export default App;
+export default App;
diff --git a/app/qna/page.tsx b/app/qna/page.tsx
@@ -0,0 +1,120 @@
+'use client';
+import PageContent from '@/components/layouts/page-content';
+import ViewContainer from '@/components/layouts/view-container';
+
+import { Button } from '@/components/ui/button';
+
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from '@/components/ui/dialog';
+
+import {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectLabel,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select';
+
+import { Label } from '@/components/ui/label';
+import { useState } from 'react';
+import { fetchRecentQNASessions } from '@/middleware/qna/recent-sessions';
+import { RecentSessionsEmptyStateView } from '@/components/ui/empty-states';
+import { RecentQnASessionsList } from '@/components/sections/recent-qna-sessions-list';
+import { fetchTopics } from '@/middleware/qna/sessions';
+import { getTopicDepthLevels } from '@/common';
+
+const TopicBasedQNA: React.FunctionComponent = () => {
+  const [recentQNASessions, setRecentQNASessions] = useState<
+    Array<QNASessionCardInterface>
+  >(fetchRecentQNASessions());
+
+  const [userTopics, setUserTopics]
+    = useState<Array<TopicInterface>>(fetchTopics());
+
+  return (
+    <PageContent>
+      <header className="topic-based-qna-header">
+        <ViewContainer className="flex flex-row items-center justify-between">
+          <h1 className="text-4xl font-semibold">{'Your Q/A Sessions'}</h1>
+          <div className="my-6 flex flex-row items-center gap-4">
+            <Dialog>
+              <DialogTrigger asChild>
+                <Button>Start new session</Button>
+              </DialogTrigger>
+              <DialogContent>
+                <DialogHeader>
+                  <DialogTitle>Start a new Q/A Session</DialogTitle>
+                  <DialogDescription>
+                    Provide information related to new session. This helps us to
+                    gather topics for you
+                  </DialogDescription>
+                </DialogHeader>
+                <div className="new-session-form-container">
+                  <div className="select-topic-wrapper form-input-wrapper">
+                    <Label>Select topic</Label>
+                    <Select>
+                      <SelectTrigger>
+                        <SelectValue placeholder="Choose topic, domain" />
+                      </SelectTrigger>
+                      <SelectContent>
+                        <SelectGroup>
+                          {userTopics.map((topic, topicIndex) => {
+                            return (
+                              <SelectItem value={topic.title} key={topicIndex}>
+                                {topic.emoji + " " + topic.title}
+                              </SelectItem>
+                            )
+                          })}
+                        </SelectGroup>
+                      </SelectContent>
+                    </Select>
+                  </div>
+                  <div className="select-level-wrapper form-input-wrapper">
+                    <Label>Diversity & Depth</Label>
+                    <Select>
+                      <SelectTrigger>
+                        <SelectValue placeholder="Choose level of diversity" />
+                      </SelectTrigger>
+                      <SelectContent>
+                        <SelectGroup>
+                          {getTopicDepthLevels().map((depthLevel, depthLevelIndex) => {
+                            return (
+                              <SelectItem value={depthLevel} key={depthLevelIndex}>
+                                {depthLevel}
+                              </SelectItem>
+                            )
+                          })}
+                        </SelectGroup>
+                      </SelectContent>
+                    </Select>
+                  </div>
+                </div>
+                <DialogFooter>
+                  <DialogTrigger>
+                    <Button>Create new session</Button>
+                  </DialogTrigger>
+                </DialogFooter>
+              </DialogContent>
+            </Dialog>
+          </div>
+        </ViewContainer>
+      </header>
+      {recentQNASessions.length ? (
+        <RecentQnASessionsList data={recentQNASessions} />
+      ) : (
+        <RecentSessionsEmptyStateView />
+      )}
+    </PageContent>
+  );
+};
+
+export default TopicBasedQNA;
diff --git a/common/dashboard-feature-list.tsx b/common/dashboard-feature-list.tsx
@@ -0,0 +1,38 @@
+import { cn } from '@/lib/utils';
+import {
+  Briefcase,
+  FileSearch,
+  MessagesSquare,
+  PencilLine,
+  Video,
+} from 'lucide-react';
+
+const FeatureList: Array<FeatureOptionInterface> = [
+  {
+    featureName: 'Video Interview',
+    icon: <Video className={cn('max-md:w-4 h-auto')} />,
+    link: '#',
+  },
+  {
+    featureName: 'ATS Resume Review',
+    icon: <FileSearch className={cn('max-md:w-4 h-auto')} />,
+    link: '#',
+  },
+  {
+    featureName: 'Topic Based Q/A',
+    icon: <MessagesSquare className={cn('max-md:w-4 h-auto')} />,
+    link: '/qna',
+  },
+  {
+    featureName: 'Mock Aptitude',
+    icon: <PencilLine className={cn('max-md:w-4 h-auto')} />,
+    link: '#',
+  },
+  {
+    featureName: 'Behavioural Rounds',
+    icon: <Briefcase className={cn('max-md:w-4 h-auto')} />,
+    link: '#',
+  },
+];
+
+export { FeatureList };
diff --git a/common/environment-variables.ts b/common/environment-variables.ts
@@ -0,0 +1,6 @@
+const Environment = {
+  // env variable for checking development environment
+  ENVIRONMENT_TYPE: process.env.NEXT_PUBLIC_ENVIRONMENT_TYPE,
+};
+
+export { Environment };
diff --git a/common/index.ts b/common/index.ts
@@ -0,0 +1,10 @@
+/**
+ * method to return a list of levels, portraying topic depth/diversity
+ */
+function getTopicDepthLevels() {
+  return ['Basic', 'Intermediate', 'Advanced', 'Professional'];
+}
+
+export {
+  getTopicDepthLevels
+}
diff --git a/components.json b/components.json
@@ -13,4 +13,4 @@
     "components": "@/components",
     "utils": "@/lib/utils"
   }
-}
+}
diff --git a/components/layouts/box-card-slider.tsx b/components/layouts/box-card-slider.tsx
@@ -0,0 +1,19 @@
+import { cn } from '@/lib/utils';
+
+const BoxCardSlider: React.FunctionComponent<
+  React.HTMLAttributes<HTMLDivElement>
+> = ({ className, children, ...props }) => {
+  return (
+    <div
+      className={cn(
+        'mt-3 py-2 flex flex-row gap-4 overflow-x-scroll hide-scrollbar',
+        'max-md:grid max-md:grid-cols-2 max-md:gap-y-4 max-md:gap-x-4 max-md:overflow-visible max-md:w-fit',
+        className,
+      )}
+      {...props}>
+      {children}
+    </div>
+  );
+};
+
+export default BoxCardSlider;
diff --git a/components/layouts/box-card.tsx b/components/layouts/box-card.tsx
@@ -0,0 +1,20 @@
+import { ReactHTMLElement } from 'react';
+import { cn } from '@/lib/utils';
+
+const BoxCard: React.FunctionComponent<
+  React.HTMLAttributes<HTMLDivElement>
+> = ({ className, children, ...props }) => (
+  <div
+    className={cn(
+      'relative w-[240px] h-[140px] rounded-2xl border-transparent shadow transition-all hover:shadow-md',
+      'max-xl:w-[220px] max-xl:h-[120px]',
+      'max-lg:w-[200px] max-lg:h-[100px]',
+      'max-sm:rounded-xl',
+      className,
+    )}
+    {...props}>
+    {children}
+  </div>
+);
+
+export { BoxCard };
diff --git a/components/layouts/page-content.tsx b/components/layouts/page-content.tsx
@@ -1,15 +1,13 @@
-import { cn } from "@/lib/utils"
+import { cn } from '@/lib/utils';
 
-const PageContent: React.FunctionComponent<React.HTMLAttributes<HTMLDivElement>> = ({
-  className,
-  children,
-  ...props
-}) => {
+const PageContent: React.FunctionComponent<
+  React.HTMLAttributes<HTMLDivElement>
+> = ({ className, children, ...props }) => {
   return (
-    <div className={cn("page-content my-10", className)} {...props}>
+    <div className={cn('page-content my-10', className)} {...props}>
       {children}
     </div>
-  )
+  );
 };
 
-export default PageContent;
+export default PageContent;