Next.js Discord

Discord Forum

Ticket System

Unanswered
Horse guard wasp posted this in #help-forum
Open in Discord
Horse guard waspOP
Hi, I have been new to NextJS and i like to build a big application, some ticket System with database connection. Because with so big project is it easier to learn all the basics and forget never a function.

But the question is who want to help me with the support, i can't just do it on my own and needs support from you to create this big project.

Sounds Crazy but i did it complete on my own in PHP but for me is this Next Level😆

2 Replies

Horse guard waspOP
Here some question:

i have a ticketlist component with the following code: 
import connection from '../../dbConfig.js';
import formatTicketDate from '../../functions/ticketTime';
import { BsExclamationDiamondFill } from 'react-icons/bs';


// Insert the Tickets as Prop
export async function getServerSideProps() {
  try {
    const ticketlist = await FetchTickets();
    return {
      props: { ticketlist },
    };
  } catch (error) {
    console.error('Error fetching users:', error);
    return {
      props: { ticketlist: [] },
    };
  }
};

// Formatting Ticketitem Date into String
const formatTicketList = (ticketList) => {
  return ticketList.map((ticket) => ({
    ...ticket,
    ticket_date: ticket.ticket_date.toISOString(), // Convert Date to ISO string
  }));
};

// Select all Ticket Items out of database
const FetchTickets = () => {
  return new Promise((resolve, reject) => {
    connection.query('SELECT * FROM tickets', (error, results) => {
      if (error) {
        reject(error);
      } else {
        const formattedResults = formatTicketList(results);
        resolve(formattedResults);
      }
    });
  });
};

function TicketList(props) {
  const ticketDescriptions = props.ticketlist.map((ticket) => (
    <div className='sidelist-item' key={ticket.id}>
      <div className='creator-profile'>
        <div className='profileimage'>
          <img src='./images/charneal.png'/>
        </div>
        
        <div className='ticket-data-box'>
          <div className='ticket-data'>
            <p className='sender'>{ticket.creator_mail}</p>
            <p className='title'>{ticket.ticket_title}</p>
            <p className='content'>{ticket.ticket_description}</p>
          </div>

          <div className='ticket-side-data'>
            <div className='ticket-time'>
              <p>{formatTicketDate(ticket.ticket_date)}</p>
            </div>
            <div className='ticket-priority'>
              <BsExclamationDiamondFill/>
            </div>
          </div>
        </div>
      </div>
    </div>
  ));
  return <div>{ticketDescriptions}</div>;
};

export default TicketList;


if i insert TicketList in my index it returns error because what i have seen is getServerSideProps can't be used into a component page but how to do this?
B33fb0n3
I hope you know the basics of react. Else you should start with that.

First you should start how you should fetch data in the appdir: https://nextjs.org/docs/app/building-your-application/data-fetching/fetching-caching-and-revalidating

After that you can render it however you want 🙂