@aaron-ford

Thanks for the help. I think there were several things I had to correct, but I got it running! I can't login yet (I think I might have a CSRF issue to fix), but it's running.

I built and ran it locally and I get ERROR (7830): Failed to load url inertia/app/ssr.ts (resolved id: inertia/app/ssr.ts). Does the file exist?. The entry point for inertia is inertia/app/ssr.ts as defined in the vite.config.js and config/inertia.js files. But npm run build doesn't create an inertia folder, so I assume that is why it is failing? There is no inertia folder with app/ssr.ts. There is an app folder with ssr.ts in it. So when building and running from the build folder, is the entry point supposed to change somehow? Or is it building wrong and it should be putting an inertia folder in the build? After configuring the server, here are the steps I take to build and run the app:

1. npm run build

2. cp .env build/.env

3. cd build

4. npm ci —omit="dev"

5. pm2 start build/bin/server.js --name myApp

When I run node bin/server.js locally I also get this message: Could not auto-determine entry point from rollupOptions or html files and there are no explicit optimizeDeps.include patterns. Skipping dependency pre-bundling.

I will double check the node versions, but it seems ctx.auth is undefined on the login page, which makes sense since no one is logged in. But since that isn't an issue locally it seems odd. The app is running but the front end doesn't load. Here's the error:

{"type":"TypeError","message":"Cannot read properties of undefined (reading 'use')","stack":"TypeError: Cannot read properties of undefined (reading 'use')

Rather than have someone have to know the ids relations, how would it be best to implement using a string? Like for status ID. I can give the user a list of valid statuses. They want to make an API call with a status of 'Planned'. I can have my validator verify that planned exists in the statues table, that's fine, but I want to call the parameter in the API call status, not statusId, since it isn't an ID. That means the validator needs to validate the status 'Planned' exists in the statuses table, and then when we pass the results of the validation to the store course method, it expects a type of courseValidator, which now has status instead of statusId, which doesn't exist on the table. So I'm not sure if I should transform API parameter names before passing the data to the validator, so when the data gets to the validator and the store action the parameters match the DB, or if I should validate and then transform? Transforming before validating kind of seems to reduce the usefulness of the validator, but transforming after validation means we're changing the type expected by the store action to some new transformed object. What would be the best way to do something like this? I hope that makes sense. Essentially I want to use human readable data in the API which requires a parameter name different than the validator/table, but validate it against DB values so the action can use the validated data to create the data in the DB.

Can we clean up the error responses and not have it return the frames array? Just message, name, status?

How do you prevent hydration errors on the dates? The server is rendering a different date then the front end, which seems to make sense if we are formatting it to the locale of the user, but it doesn't seem to like that.

The reason it could use the same table is because a course is linked to an organization, right? If I wanted to have API keys for something not linked to an organization, I'd have to have a separate table, since the tokenable_id in the table would have to reference a different table? Or if say you wanted someone to be able to make changes to a course but not the overall organization? You'd make a token table that references the courses model, or whatever model you want to grant rights to?

table
        .integer('tokenable_id')
        .notNullable()
        .unsigned()
        .references('id')
        .inTable('otherModelName')
        .onDelete('CASCADE')

  

    

      Copied!
      

        

      
    
  
  
    
    
    
    
  

So if we need multiple access tokens, like say we wanted to make it so courses could have tokens to modify their data within an organization, we could just add the DbAccessTokensProvider.forModel(Courses, {

type: 'course_ api_token',

prefix: 'api'

}

to the courses model, but would we want to copy the migration and make a second course_api_access_tokens table to use for the table parameter in the DbAccessTokensProvider? Or is there a way to use the one api_access_tokens table? Can both use the same type of api_token? Since they are both for api calls? Or do they have to have different types? I assume it would also require adding something like

courseApi: tokensGuard({
      provider: tokensUserProvider({
        tokens: 'accessTokens',
        model: () => import('#models/courses'),
      }),

  

    

      Copied!
      

        

      
    
  
  
    
    
    
    
  

to the auth.ts config file. I assume If everything set up in this video is duplicated for a second api, the rest of the videos in this series just be applicable to either guard.

I have been going through trying to clean up my console errors. I have an error for 'Extraneous non-props attributes (user, messages) were passed to component but could not be automatically inherited because component renders fragment or text root nodes'. I ran your code and see the error exists there too. How do we fix this? I also get Invalid prop: type check failed for prop "href". Expected String with value "null", got Null for the pagination links. I tried modifying the components to allow null for the href, but that didn't work. Does the pagination dto npm package need to be modified?

Update: I wrapped the nav and sheet into a parent div and that seems to fix the hydration issues. Either that, or listing user and messages in the props, but since the nav doesn't directly use them, I went with wrapping it in a div.

The onSubmmit transform did what I needed, thanks! It's been a while since I've done some of the lessons, so I forgot we'd done that. As always, thanks for the help!

Yeah, that sped it up. I was using numbers since I thought it would need to be a number for the vine validation, but it seems to work. The one thing I can't get the validation to work on when using a string is enums. I read that using v-model.number can force it to be a number, but I haven't been able to get that to work. Maybe because FormInput is a custom component that doesn't support the model modifier? Is there a way to to get a FormInput to transform a string to a number for the backend?

I should have checked the component to see if it was modified. Thanks, I have it working now. If you make a video on the filtering, let me know. An omni search would be great, like being able to search by a string and get a list of items where the id/name/description or similar fields match. There's a lot of pages I'll want to have some kind of search/filter on. Hopefully I can figure it out going through your code. I think you've mentioned you already have plans to do a series on testing in AdonisJS, which will be nice. Thanks again for the help!

Are there more lessons for PlotMyCourse other than the building with AdonisJS 6 and Inertia? Or are these changes you made outside the course for your personal production repo? Looks like there are a lot of interesting and useful things I can reference for my own project. The numbered links work for me, but using the arrows to try and move from page to page or jump to the start or end don't work. I'm using the fromPaginator as shown above:

const props = defineProps<{
    users: SimplePaginatorDtoContract<UserDto>
}>()

const users = ref(props.users.data)
const paginationInfo = props.users.meta

  

    

      Copied!
      

        

      
    
  
  
    
    
    
    
  

And I copied the pagination from the production PlotMyCourse repo, replacing the lessons.meta with paginationInfo. The UI updates and highlights the right numbers, but there must not be a link being generated to actually change them. Hovering over them shows no link, but hovering over the numbers does. The controller is adding the start and end as directed:

async index({ request, inertia, auth }: HttpContext) {
    const page = request.input('page', 1)
    const paginator = await User.query().orderBy('username', 'asc').paginate(page, 10)

    paginator.baseUrl(router.makeUrl('users.index'))
    //paginator.queryString(request.qs())

    return inertia.render('admin/users/index', {
      users: UserDto.fromPaginator(paginator, {
        start: paginator.firstPage,
        end: paginator.lastPage,
      }),
    })
  }

  

    

      Copied!
      

        

      
    
  
  
    
    
    
    
  

I've been going through my code and comparing it to yours. Other than the fact you use an action to get your pagination based off supplied filters, it seems similar from what I can tell. Any idea why the links wouldn't generate?

Thanks! I am using your dto package, and had just stumbled upon the knowledge you had built the fromPaginator function into it, but this helped me get it working. I have the initial results showing up, and the links on the bottom (though I have to get them working now). It looks like Shadcn has a pagination component, so I think I'll try setting that up.

When is AdonisJS 7 coming out?

Thanks for your help!

That fixed it, thanks!

I am getting an error from the SettingsShell.vue, I am guessing it is from changing the tailwind config. I have gone back over the last lesson and this one, and I haven't found any differences in the change I made vs what you made.

[postcss]

/plotmycourse/inertia/components/SettingsShell.vue?vue&type=style&index=0&scoped=9c23e674&lang.css:3:5: The text-primary class does not exist. If text-primary is a custom class, make sure it is defined within a @layer directive.

Everything works except the delete. I get

delete from organizations where id = 3 - Cannot delete or update a parent row: a foreign key constraint fails

I feel like maybe I had something like this in a previous lesson, but can't find it. Is this something with how AdonisJS handles relationships in MySQL? Do I have to alter the code slightly to properly delete related modules?

Awesome! Thank you!

Sorry for all the questions. I am getting a lock timeout error when I try to delete. I copied your destroy_lesson code from the repo to make sure our files matched and still get it. I get it trying to delete any lesson. I built my DB fresh and reseeded, just in case. If I remove the await decrement lesson I can delete lessons just fine, just for some reason the lessons are locked when trying to increment:

ERROR (5078): update lessons set order = order - 1 where (`module_id` = 1 and order > 1) and (`organization_id` = 1) - Lock wait timeout exceeded; try restarting transaction.

The query looks right, it seems to be trying to update the right data. Any ideas?

Thanks! I found it. A typo… was missing the in organization. That's why you don't code late at night.

The line

statusId: props.organization.statuses.at(0)?.id

works fine in my SortableModules, but in the SortableLessons, it is breaking the page due to 'Cannot read properties of undefined (reading 'statuses').' I have looked through all the files I thought could be related, but haven't found any differences. Any suggestions on what could be causing it?

Thanks. Just a note, I tried npx shadcn-vue@radix add table and it failed with an error 'Failed to fetch base color from registry.' I had to run it with a version (npx shadcn-vue@0.11.4 add table) to get it to install, despite the many warnings.

I found npx shadcn-vue@0.11.4 add table, that seems to install it, though it does give a bunch of warnings:

npm WARN EBADENGINE Unsupported engine {

npm WARN EBADENGINE package: 'undici@7.4.0',

npm WARN EBADENGINE required: { node: '>=20.18.1' },

npm WARN EBADENGINE current: { node: 'v20.11.0', npm: '10.5.1' }

npm WARN EBADENGINE }

npm WARN deprecated inflight@1.0.6: This module is not supported, and leaks memory. Do not use it. Check out lru-cache if you want a good and tested way to coalesce async requests by a key value, which is much more comprehensive and powerful.

npm WARN deprecated source-map-resolve@0.6.0: See https://github.com/lydell/source-map-resolve#deprecated

npm WARN deprecated glob@7.2.3: Glob versions prior to v9 are no longer supported

I'll try and continue with this, but if there's a better way, please let me know. Thanks!

It looks like shadcn updated recently to use Reka instead of Radix. I tried following the upgrade instructions at https://www.shadcn-vue.com/docs/changelog#update-your-project, by adding

"ui": "~/components/ui",
"lib": "~/lib",
"composables": "~/composables"

  

    

      Copied!
      

        

      
    
  
  
    
    
    
    
  

to the components.json file, and then trying to reinstall the components, but I still get the same message as before:

An invalid components.json file was found at /plotmycourse.

Before you can add components, you must create a valid components.json file by running the init command.

Learn more at https://shadcn-vue.com/docs/components-json.

Should I just delete the components.json file and run the init? Or what is the best route forward for continuity with the course?

Is AdonisJS set up to handle soft deletes? If you didn't want to replace the difficulty and maintain the original relationships? Or if you wanted to delete a course or organization for some reason, and not lose any records you might have to things like users grades?

Also, I feel like I've occasionally seen warnings in the code that I think are due to FormInput type group (remember me on the login page) not having a label or a v-model attribute. Should a group type have those attributes? Or should they be made optional in the FormInput's defined props?

Thanks! I simplified it by adding an is_default column to the organization_users table.

Is there a simple way to query on a relation's relation? For example, if you wanted to have a setting called 'default organization' defined in a settings table, and you assign that setting to a user in a user_settings table, can you query the related organization where the user's user_settings.settings_id = settings.id where settings.name = 'default organization?' Or would you just use joins on anything more complicated than one relation away? Hopefully that makes sense. The purpose is to set it up where if there's an active organization Id and the user is assigned to that organization, use it. Otherwise, see if they have a default organization Id set in their settings and use that. If those both fail, grab the first organization from their list.

From a UI perspective, if someone has a lot of organizations, would you just let the list grow long, or is there a good way to limit the dropdown length and have the menu scroll after a certain point?

Thanks!

I think the button color is coming from inertia_layout.edge. I might have installed dark mode or something in my initial setup, but if I change it to match yours, I get a bunch of errors. I might just ignore it for now. I don't know if that affects the red color of the error. My app.css matches. Thanks for the help!

When you say we might want to add a referrer policy to this page, how do we do that?

I have

<Alert v-if="exceptions.E_INVALID_CREDENTIALS" variant="destructive" class="mb-6">

but the destructive doesn't seem to change my error to be red. Any idea why? Also, my buttons have always been purple instead of black for some reason, maybe that is related?