Feature/connect feelings wheel to journal

.vscode/settings.json

@@ -1,5 +1,6 @@
 {
-    "typescript.tsdk": "node_modules/typescript/lib",
-    "editor.formatOnSave": true,
-    "editor.defaultFormatter": "esbenp.prettier-vscode",
-}
+  "typescript.tsdk": "node_modules/typescript/lib",
+  "editor.formatOnSave": true,
+  "editor.defaultFormatter": "esbenp.prettier-vscode",
+  "WillLuke.nextjs.hasPrompted": true
+}

README.md

@@ -120,8 +120,12 @@ https://vitest.dev/guide/mocking.html
 
 ## Recharts
 https://recharts.org/en-US/
+
 ## Filestore 
+https://firebase.google.com/docs/storage/web/start
+
 ## P5.js
+https://github.com/P5-wrapper/react
 
 
 ## Acknowledgment

TODO.md

@@ -0,0 +1,10 @@
+# TO DO LIST
+
+- [ ] center Clark sign in component
+- [ ] download eeg data from filestore (might need to use a temp folder)
+- [ ] figure out markdown editer
+- [ ] create a setting for users to "Opt out" of AI sentiment analysis
+- [ ] figure out logic for journal prompts and AI sentiment analysis to work together
+- [ ] figure out logic for journal prompts and AI sentiment analysis to work together
+- [ ] update models in prisma
+- [ ] stream osc https://www.npmjs.com/package/osc

app/(dashboard)/feelings/page.tsx

@@ -0,0 +1,17 @@
+'use client'
+import FeelingsWheel from '@/components/FeelingsWheel'
+// import SunburstAnyChart from '@/components/Sunburst'
+import Image from 'next/image'
+export default function Feelings() {
+  return (
+    <>
+      {/* <Image
+        alt="feelings wheel"
+        src="/feelings.png"
+        width={600}
+        height={600}
+      ></Image> */}
+      <FeelingsWheel></FeelingsWheel>
+    </>
+  )
+}

app/(dashboard)/journal/[id]/page.tsx

@@ -1,35 +1,34 @@
-import Editor from "@/components/Editor"
-import { getUserFromClerkID } from "@/utils/auth"
-import {prisma } from '@/utils/db'
-import { analyze } from "@/utils/ai"
+import Editor from '@/components/Editor'
+import { getUserFromClerkID } from '@/utils/auth'
+import { prisma } from '@/utils/db'
+import { analyze } from '@/utils/ai'
 
 const getEntry = async (id) => {
-
   const user = await getUserFromClerkID()
   const entry = await prisma.journalEntry.findUnique({
     where: {
-      userId_id:{
+      userId_id: {
         userId: user.id,
-        id: id
+        id: id,
       },
     },
     include: {
-      analysis: true
-    }
+      analysis: true,
+    },
   })
 
   return entry
 }
 
-const EntryPage = async ({params}) => {
+const EntryPage = async ({ params }) => {
   const entry = await getEntry(params.id)
   return (
     <div className="h-full w-full">
       <div className="">
-        <Editor entry={entry}/>
+        <Editor entry={entry} />
       </div>
     </div>
   )
 }
 
-export default EntryPage
+export default EntryPage

app/(dashboard)/layout.tsx

@@ -1,21 +1,25 @@
-import { UserButton } from "@clerk/nextjs"
-import Link from "next/link"
+import { UserButton } from '@clerk/nextjs'
+import Link from 'next/link'
 
-
-const DashboardLayout = ({children}) => {
+const DashboardLayout = ({ children }) => {
   const links = [
-    {label: 'home', href: '/' },  
-    {label: 'journal', href: '/journal'}, 
-    {label: 'history', href: '/history'}, 
+    { label: 'home', href: '/' },
+    { label: 'journal', href: '/journal' },
+    { label: 'history', href: '/history' },
+    { label: 'visualizer', href: '/visualizer' },
+    { label: 'feelings', href: '/feelings' },
+    { label: 'markdown', href: '/markdown' },
   ]
   return (
     <div className="h-screen w-screen relative">
-      <aside className="absolute w-[200px] top-0 left-0 h-full border-r border-black/10"> 
-        <Link href="/journal"> Entheogen</Link>  
+      <aside className="absolute w-[200px] top-0 left-0 h-full border-r border-black/10">
+        <Link href="/journal"> Entheogen</Link>
         <ul>
-          { links.map(link => (
+          {links.map((link) => (
             <li key={link.label}>
-              <Link key={link.label} href={link.href}>{link.label}</Link>
+              <Link key={link.label} href={link.href}>
+                {link.label}
+              </Link>
             </li>
           ))}
         </ul>
@@ -32,4 +36,4 @@ const DashboardLayout = ({children}) => {
   )
 }
 
-export default DashboardLayout
+export default DashboardLayout

app/(dashboard)/markdown/page.tsx

@@ -0,0 +1,158 @@
+'use client'
+
+import Image from 'next/image'
+import dynamic from 'next/dynamic'
+import { Suspense } from 'react'
+
+//feelings
+import { isEmotion } from '@/utils/feelings'
+import { useSearchParams } from 'next/navigation'
+
+//import journal prompts
+import { acceptance } from '@/data/journal-prompts/acceptance'
+import { anger } from '@/data/journal-prompts/anger'
+import { apathy } from '@/data/journal-prompts/apathy'
+import { courage } from '@/data/journal-prompts/courage'
+import { fear } from '@/data/journal-prompts/fear'
+import { grief } from '@/data/journal-prompts/grief'
+import { guilt } from '@/data/journal-prompts/guilt'
+import { impureDesire } from '@/data/journal-prompts/impure_desire'
+import { numbness } from '@/data/journal-prompts/numbness'
+import { pride } from '@/data/journal-prompts/pride'
+import { sad } from '@/data/journal-prompts/sad'
+import { shame } from '@/data/journal-prompts/shame'
+import { unworthiness } from '@/data/journal-prompts/unworthiness'
+
+const emotionsHash = {
+  acceptance: acceptance,
+  anger: anger,
+  apathy: apathy,
+  courage: courage,
+  fear: fear,
+  grief: grief,
+  guilt: guilt,
+  impureDesire: impureDesire,
+  numbness: numbness,
+  pride: pride,
+  sad: sad,
+  shame: shame,
+  unworthiness: unworthiness,
+}
+
+// const EditorComp = dynamic(() => import('@/components/MDXEditor'), {
+//   ssr: false,
+// })
+
+// export default function Home() {
+//   const searchParams = useSearchParams()
+//   const emotion = searchParams.get('emotion')
+//   console.log('emotion: ', emotion)
+//   const isThisAnEmotion = isEmotion(emotion)
+//   console.log('isThisAnEmotion?: ', isThisAnEmotion)
+//   const markdown = isThisAnEmotion ? emotionsHash[emotion] : sad
+
+//   return (
+//     <>
+//       <p>
+//         This is a bare-bones unstyled MDX editor without any plugins and no
+//         toolbar. Check the EditorComponent.tsx file for the code.
+//       </p>
+//       <p>
+//         To enable more features, add the respective plugins to your instance -
+//         see{' '}
+//         <a
+//           className="text-blue-600"
+//           href="https://mdxeditor.dev/editor/docs/getting-started"
+//         >
+//           the docs
+//         </a>{' '}
+//         for more details.
+//       </p>
+//       <br />
+//       <div style={{ border: '1px solid black' }}>
+//         <Suspense fallback={null}>
+//           <EditorComp markdown={markdown} />
+//         </Suspense>
+//       </div>
+//     </>
+//   )
+// }
+
+//https://contentlayer.dev/
+// "use client"
+// import { MDXEditor, MDXEditorMethods } from '@mdxeditor/editor'
+// import { useRef } from 'react'
+
+// // create a ref to the editor component
+// const MarkdownPage = () => {
+//   const searchParams = useSearchParams()
+//   const emotion = searchParams.get('emotion')
+//   console.log('emotion: ', emotion)
+//   const isThisAnEmotion = isEmotion(emotion)
+//   console.log('isThisAnEmotion?: ', isThisAnEmotion)
+//   const markdown = isThisAnEmotion ? emotionsHash[emotion] : sad
+//   const ref = useRef<MDXEditorMethods>(null)
+//   return (
+//     <>
+//       <button
+//         onClick={() => ref.current?.insertMarkdown('new markdown to insert')}
+//       >
+//         Insert new markdown
+//       </button>
+//       <button onClick={() => console.log(ref.current?.getMarkdown())}>
+//         Get markdown
+//       </button>
+//       <MDXEditor ref={ref} markdown={markdown} onChange={console.log} />
+//     </>
+//   )
+// }
+
+// export default MarkdownPage
+
+import {
+  MDXEditor,
+  headingsPlugin,
+  listsPlugin,
+  quotePlugin,
+  thematicBreakPlugin,
+  toolbarPlugin,
+  UndoRedo,
+  BoldItalicUnderlineToggles,
+  markdownShortcutPlugin,
+  type MDXEditorMethods,
+  type MDXEditorProps,
+} from '@mdxeditor/editor'
+
+import '@mdxeditor/editor/style.css'
+
+const App = () => {
+  const searchParams = useSearchParams()
+  const emotion = searchParams.get('emotion')
+  console.log('emotion: ', emotion)
+  const isThisAnEmotion = isEmotion(emotion)
+  console.log('isThisAnEmotion?: ', isThisAnEmotion)
+  const markdown = isThisAnEmotion ? emotionsHash[emotion] : sad
+  return (
+    <MDXEditor
+      markdown={markdown}
+      plugins={[
+        toolbarPlugin({
+          toolbarContents: () => (
+            <>
+              {' '}
+              <UndoRedo />
+              <BoldItalicUnderlineToggles />
+            </>
+          ),
+        }),
+        headingsPlugin(),
+        listsPlugin(),
+        quotePlugin(),
+        thematicBreakPlugin(),
+        markdownShortcutPlugin(),
+      ]}
+    />
+  )
+}
+
+export default App

app/(dashboard)/visualizer/page.tsx

@@ -0,0 +1,35 @@
+import Uploader from '@/components/FileUploader'
+import { Visualizer } from '@/components/Visualizer'
+
+const getEEGData = async () => {
+  // const user = await getUserFromClerkID
+  // const entry = await prisma.journalEntry.findMany({
+  //   where:{
+  //     userId: user.id,
+  //   },
+  //   orderBy:{
+  //     createdAt: 'desc'
+  //   }
+  //  })
+  //  eegData =
+  //  return eegData
+}
+
+const VisualizerPage = async () => {
+  // const data = await getEEGData()
+  // console.log('data ', data)
+  return (
+    <div className="px-6 py-8 bg-zinc-100/50 h-full">
+      <h2 className="text-4xl mb-12">Journal</h2>
+      <div className="my-8">
+        Visualization
+        <Uploader />
+      </div>
+      <div className="grid grid-cols-3 gap-4">
+        <Visualizer />
+      </div>
+    </div>
+  )
+}
+
+export default VisualizerPage