Skip to content

tmkim/t-planet

Repository files navigation

T-Planet

Built using Next.js Database - Postgres

-- database set up, seeded users, flash cards, card sets, connections btwn the 3 -- initialize dashboard/welcome, login page + auth config, actions, sidenav ** need to update actions ** need to work on front-end (ui)

-- work on login page * add middleware.ts * generate secret (openssl rand -base64 32) and update .env ** login page works!

-- work on creating new user * registration page built (basic) and link on login page redirects * name, email, password are requested + validated * error creating user in DB -- likely because of uid. This is ok bc the reason I built the registration page was to test things with UID Namely auto-generation of primary key for uid.

Working on displaying table for flashcards * basic set up is done for table + fetching + buttons * currently error with fetching - NeonDbError: operator does not exist: character varying = uuid * also need to set up table skeletons

-- fixed issue with fetching (need to make sure all IDs are type uuid)
-- set up basic functionality for table!
    ** Good : display flashcards, searchable, pagination, buttons exist
    ** TODO : button functionality, table skeletons
            idk why cardset page count keeps throwing errors ?
            also need to fix pagination because change page on FC affects CS

OK so let me start with table skeletons, then pagination, then buttons ** Skeletons for Flashcards and Cardsets tables look good! ** pagination is funny bc based on URL for query. so going to use scrollbar instead. ++ GOOD GOOD -- Probably going to re-intro pagination later bc could have WAYTOOMANY flashcards -- Probably need to add cute way to sort/filter/something ** Update position of tables to be responsive to screen size -- issue with table displaying data on small screens ?? -- issue with Search affecting both tables ..... actually jk let's just implement both pagination and scrolling lmao ++ GOOD GOOD

Time to work on buttons ~ So let's start with DELETE -> Create -> Edit -> View -> Browse

Delete works with confirmation message

Working on Create Flashcard modal
    ++ modal view works (might need to play with styling)
    -- need to create form
        ** basic form created, style and functionality need work

    ++ did a bit of work styling modal form

Did a bit of work on create-form UI ++ set up upload file button and customizable text area, needs more work on functionality -- need to work on button functionality ++ started working on edit form a bit, need to fix up UpdateFlashcard

++ fixed UpdateFlashcard
-- working on passing id to modal
    .. currently edit button is set up to bring CreateFC Modal bc errors with EditFC Modal
    .. something with fetching flashcards by ID. Need to figure out appropriate timing for fetching data.

ughhhh why is fetching data with modal weird? Maybe need to redo the way I set up modal?
issue appears to be trying to fetch data while using client (bad bc data security)
but need to use client to use modal? maybe? iDONO

6/11 TODO -- *** Figure out EditFC Modal ** CreateFC Modal Buttons // EditFC Modal Buttons * CreateCS Modal * Apply same logic to EditCS Modal

OK so current status with EditFC Modal --
    Clicking button brings up Modal, but none of the info is populated, and site refreshes (almost) immediately
    So why is it refreshing? I think it has to do with timing of update function.
        >> Issue was that I tried to make the button a form
        So how do I pass a form action? can I do button action? yes but issue with await fetch

So, I think I figured out how to fetch data from client
    ** useEffect() lets me await in client component
But there's an issue in edit-form with useFormState ... ?
    ok so it looks like it's because calling for a fetch in the Update button could return "undefined", so I had to add "| undefined" to the definition of FCState. Not sure if this is safe or not. But it works for now. We'll have to see what behavior we observe.

ok so useEffect() didn't actually work.. HMM.. 
ok so I rearranged some things and it seems to do things at the proper time but failing to fetch data
OKAYYYY GOT IT TO POPULATE
    TL;DR : I'm already fetching data when populating the table, use that instead of trying to fetch on update
    i'm so stupid lmao but this is kinda obvious fix.

SO .... Priority for the day (***) fulfilled.
*** Clicking on Edit button will bring up modal with information pre-filled (front and back text)

NEXT STEP -- ** CreateFC Modal Buttons // EditFC Modal Buttons
So I need to get the buttons working -- Cancel, Save + Exit, Save + Next
Right now, priorities are Cancel, Save + Exit .... Save + Next will be TODO.

6/12 So I got the buttons to toggle the modal off, but need to figure out best way to apply server actions to query database. So I'm playing with a few different ideas right now... >> Toggling modal works best if {hide} is added during myModal, but server actions dont work well there >> Server actions should be in the create/edit-form, but toggling doesn't work well there. .... so either I'm doing something wrong, or these belong separately (maybe could add a listener or something to help hook things together?)

    For now, I'm leaving them separate, and focusing on making sure that submitting form actually performs server action
        -- right now, working on making sure flashcards can be CREATED
        -- next, make sure flashcards can be UPDATED
        -- finally, work on making them work along with toggling.

    Currently, issue with creating ---
        Flashcard is created properly, but getting >> TypeError: state is undefined
            Stems from (app-pages-browser)/./app/ui/flashcards/create-form.tsx
            but not sure what the issue is.

            OK so the issue ended up just being how var state was called in create-form. Had to adjust for possible undefined.

6/13 *** Finish CreateFC button functionality, EditFC button functionality ** Start working on CS Modals

WOOO got CreateFC modal to be fully functional (basic)
    -- can add front/back text, cancel, and save
    -- Modal closes properly
    * replaced create-form with fc_modal
    * useEffect() triggers toggle on formAction success
    ... did a bit of file directory structure cleanup

Next up -- EditFC function
    ++ AND WE ARE GOOD GOOD
    * replaced edit-form with fc_modal

FC TODO : 
    *** Query based on session user 
    ** Images !!
    * Save + Add New

Ok, next need to do CS Modals
    Basic requirements -- 
        CREATE :
            Cardset Title
            Table with checkmarks to select which flashcards to include
                Can copy from main flashcards page but update styling and add checkmarks column
                ++ Checkmark functionality
            Close, Save
        Edit : 
            Same but pre-populate checkmarks. Utilize CARDSET_FLASHCARDS table.

6/16 *** Card Set Create Modal/Form ** Make sure all CS actions are set up and functional ** Make sure all CS Modal buttons are good * Session User ID

OK so let's start with the basic structure of the modal.
We want:
    Title, Public/Private toggle
    Table with all flashcards
    Close, Save

~~ Card Set Create Modal ~~
Working on fetching from database via modal (client component)
    Not sure if server actions are viable here or not (better for manipulate than fetch)
    currently running into issue with missing_connection_string (works in server component but not client component)

6/17 *** Card Set Modal (fetching data from client component) ** functional checkboxes

OK so I think it's best to set up API for fetching right now instead of relying on fetching from DB bc of client components
    @/app/data.json
    @/app/api/
Also need migration script
    @/app/migration/

so I think I got the basic concept of API set up for fetching. My priority should be something like..
    -- Appropriate API routes to fetch data
    -- Use fetched data in app
    -- Directory cleanup

6/18 Confirmed that I need to use "app/api/*/route.ts" for API routes WOOOO got APIs (GET) set up. Getting all flashcards was pretty straight forward. connect to db, use sql to query Difficulty was query by uuid need to cast the variable i'm searching for WHERE id = (${var})::uuid

API Fetch TODO :
    Users?
    Card Sets
    FC by CS
    FC by User *
    CS by User *
        * need to set up session user id first, do later

OKAYYYYYYYYYYY
So I finally got the create CS modal to initiate how I want it to (basic). Have to work on functionality now.
    ++ Create Card Set button loads a modal
        ++ Title input
        ++ Flash Cards table is pre-populated
            ~~ TODO add search function, can do later
    ** Tested that API isn't fetched too often (but might still have to figure out some cleanup for that)
        ++ set [isShown] as dependency
        -- edit isn't called when create is used, and vice-versa
        -- but edit and created are called 2x/button on page refresh (??)

6/19 Focused on resume today so not a lot of work done Some cleanup and set up API routes to implement later

6/22 Took a brief break to deal with health issues + resume So let's see.. what do today?

*** Create Card Set
    -- utilize check boxes to select flash cards
    -- insert into cardset - cardset info
    -- insert into cs_fc - one row per card in the set 

So first we can make sure that checking the boxes selects the cards - print a list on submit
Can do inserts with form actions because not fetching

OK so I made some good progress today.
    * Checkboxes properly build a list of cards to add to the FC
    * Cardset creation is like half way there?
        - actual cardset is created, nice.
        - connection of cardsets_flashcards needs work
    * Set up temporary page /dashboard/cardsets/[id] to help check cs2fc connection
        -- kinda buggy bc can't like, view one, go back, then view another ??
        -- can sometimes, but something funny is going on
    * updated cardset table to use "title" instead of "name"
    * added some functions in data.ts to fetch cardset and cs2fc

6/24 OK, so flash cards are working fully. Card sets are on their way. What do I have left to do? > fix bugginess > make pretty *** > get user session ** > edit card sets * > view flashcards * > view card sets

So I can get user id just using my auth() from auth.ts thanks to next-auth v5
but I can't get uid, only name and email. So I'm using email to query for uid.
^ adding this to data.ts so I don't have to pass around the user in my html.

Now that I have my session UID, I need to update my queries to only grab flash cards for this user.
Also need to make sure my connection tables are being updated properly when adding fc/user
    > fetch flashcards by UID
        - user_fc

    > fetch cardsets by UID
        - user_cs

Currently working on updating fcapi 
    > didn't work when using fetch() from data.ts, maybe bc of nostore()?
    > it's ok, was unnecessary work anyways, don't need to do this.

So let's start with fetching flashcards by UID
    * fetch list of fcid associated to uid using user_fc
        >> DONE
    * fetch list of csid assocaited to uid using user_cs
        >> DONE
    * make sure user_fc is properly populated
        >> DONE
    * make sure user_cs is properly populated
        >> DONE
        
Flashcards page and cardset modal are both properly populated based on user!

Not sure why fcapi is being weird SyntaxError: JSON.parse: unexpected end of data at line 1 column 1 of the JSON data

6/25 *** pre-populate CS Edit checkboxes

>> took a little detour to optimize cardset creation by building dynamic insert instead of doing multiple inserts
>> update getUID to getUSER

***
    Built csapi/[csid]
        >> successfully returns all flashcards associated with cardset
    -- need to work on setting checkbox defaults

6/26 *** pre-populate CS Edit checkboxes

>> detour time lmao
    - restructured CS modal fetches to get flashcard list in page.tsx instead of in the modal (removed useEffect, makes less fetch calls)

OK so now let's look at CS Edit checkboxes.
I think this needs to be done within the modal because it's specific to each cardset (table row)
So each table row should have the csid available to make an API call. Let's make sure we can get the list of cards in use properly first.

7/5 I'M BAAAAAAAAAACK So let's get back to editing card sets.

I need to focus on making sure the correct cards are being fetched.
then I can worry about populating the checkboxes.

GOTTEMMMMMM
***
Edit CS Modal pre-populated with check marks !! 
Added new definition, Cardsets_Flashcards_List, which is basically Flashcard except with "checked: boolean"
So now in cardsets/table.tsx, I do some logic while getting list of flashcards
    Use cs_fc table to get list of flashcards included in each cardset, then add "checked" boolean to each one
    Pass new list that includes "checked"
I think this is a good spot to have it done as we're setting up mapping for this table specifically.

** ok next, gotta make updating cardsets actually work.
Set up cardset_helper definition to hold list of cards + list including checked boolean

Updating card sets is all good!
    Submitting updates the database properly
    Opening edit modal is properly pre-populated

OKKKKK so...
    Cardsets
        +++ Create
        +++ Update
        +++ Delete
        ~~ View (confirmed that proper list is fetched, need to work on interactivity)
        ** Browse others' card sets

Next things I need to do --
    Flash Card View
    Card Set View
    Card Set Browse

    Bug testing and cleanup and make pretty

7/7 Today let's start working on viewing our flash cards. *** Single Flashcard View ** Card Set View

>> Single Flashcard View
    - Modal
    - Start by showing front side view
    - Click flashcard to toggle between front and back

    ~~ DONE ~~

>> Card Set View
    - Modal (?)
    Similar to SFV but option to select whether you were right/wrong (+ 2 buttons)
    Selecting right/wrong moves to next FC
        If right, FC won't be shown again during set
        If wrong, FC will be placed back into stack to try again later
    
    So my main concern here is doing things modally and making sure states are saved properly
    But I want to make sure certain logic doesn't occur until button is pressed, or it will take too long to load.

    OK so I got some basic functionality working, need to make buttons prettier.
    Also slight issue with "good" where it doesn't always move on to the next FC
    Stack closes and resets after completion
        -- having issue with reset

7/8 *** work on CS view resetting properly NICE got it working with useEffect to call flipText and set cardView to front text whenever cardList is changed Updated the GOOD/BAD buttons to be a bit prettier too

>> Card Set View
    ~~ DONE ~~

** Card Set Browse
    > First I have to include a Private/Public option
    > Then I make a BROWSE modal that lists all public card sets regardless of user
    So I can kind of copy a few things I did before but just make sure it fetches different data.

    I'm thinking it will basically be the same Card Set List, but only button available is "Copy" which will add a copy to your user with OG "Created_by"
    If created_by != uid, don't allow for public? 
    Maybe include stats for how many people copied it
    This can all be modal as well.

    So first let's include the option for public/private.
    We already have this as part of our database table, so we just need to include a button that sets the value, and update server action to set the property.
    ~~ Done ~~
        .. cardset create has public/private button
        .. cardset edit has public/private button
        .. tested that public/private value is stored properly for both create/edit
        .. tested that public/private value is displayed properly for both create/edit

7/9 Cleaned up workspace and fixed errors in 'npm run build' Successfully deployed on Vercel Tested Registration - works !! TODO -- Make pretty/cleanup. Confirm password (type x2). Email user. Maybe replace auth with Kinde. Tested Login - nope :( .. OK so, Rejection for invalid credentials is working (might want prettier, larger, better wording) Using correct credentials does not get rejected. So it queried database to confirm I exist. But doesn't move me on to the next page. Trying to brute-force myself past login page not working. So need to check auth logic? Confirmed that login works locally

So I think today I want to spend a bit of time making sure you can actually log in.

7/10 Bruh ok so I used vercel logging to figure out what's going on. Idk why I didnt try this earlier. Anyway realized I need to update environment variable for auth_secret, now i'm good ! Did a bit of work cleaning up the appearance

OK so today let's get card browsing available.

Made progress on CS browsing.
+ Made new page that contains a table of all public CS regardless of user
+ Need to add buttons to 
    -- Preview Card Set
    -- Add Card Set

7/11 ****Don't forget simple profile page so I can change name and such

Work on Browse CS Buttons (add, preview)
So "Add" should basically add an entry to user_cs with the csid
"Preview" should read cs_fc to obtain the specific flashcards as a list of Front + Back

Preview works easy
Copy works for copying over the CSID but doesn't retrieve flashcards (probably bc I fetch via user)
I guess I can all flash cards that are part of a copied set can be copied over too for customization

Gottem!! Preview and Copy both work. Browsing other people's flash cards seems success.

Todo -- disable features for copied card sets (maybe need boolean for copied or not)
    
Actually I'm going to update Copy to make its own CSID

make sure browse doesn't produce duplicates (somehow idk dude lmao)

About

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published