Ability to Register Easily?

[gracewylu]

Hey just wanted to know if there was an easy way to login/register? I think because the passwords in the code are all hashed I don't actually know how to login properly. I feel like I'm possibly missing something really obvious but let me know!

[cjp0116]

You should be able to login using the following credentials. id : admin pw : admin

Once you sign in with admin, you should be able to create new users (only admins can register new users).

On Sun, Mar 14, 2021 at 7:04 PM Grace Lu @.***> wrote:

Hey just wanted to know if there was an easy way to login/register? I think because the passwords in the code are all hashed I don't actually know how to login properly. I feel like I'm possibly missing something really obvious but let me know!

— You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub https://github.com/cjp0116/ticket/issues/2, or unsubscribe https://github.com/notifications/unsubscribe-auth/ALRWQP577IUYGNBC2GKTSCLTDVTLXANCNFSM4ZFUNE4Q .

-- Respectfully, Jae Pil Cho Phone:(213)-248-3654 @.***

[cjp0116]

Hi Grace,

When editing an existing ticket, the input fields are now reflecting previous values now. However, the issue of selecting the last ticket still persists.

I do suspect that it has to do with some built-in behaviors of semantic UI's components (not 100% sure)/ Do you suggest I try re-making it without any 3rd party components?

Thanks!

On Sun, Mar 14, 2021 at 8:04 PM Jae Cho @.***> wrote:

You should be able to login using the following credentials. id : admin pw : admin

Once you sign in with admin, you should be able to create new users (only admins can register new users).

On Sun, Mar 14, 2021 at 7:04 PM Grace Lu @.***> wrote:

Hey just wanted to know if there was an easy way to login/register? I think because the passwords in the code are all hashed I don't actually know how to login properly. I feel like I'm possibly missing something really obvious but let me know!

— You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub https://github.com/cjp0116/ticket/issues/2, or unsubscribe https://github.com/notifications/unsubscribe-auth/ALRWQP577IUYGNBC2GKTSCLTDVTLXANCNFSM4ZFUNE4Q .

-- Respectfully, Jae Pil Cho Phone:(213)-248-3654 @.***

-- Respectfully, Jae Pil Cho Phone:(213)-248-3654 @.***

[gracewylu]

No I don't think the issue is in regards to semantic UI; you're making 2<Confirm> components to delete and edit for each ticket when is redundant. When you click on the Edit/Delete button you don't actually set which ticket got clicked in the state; it simply toggles whether to show the Confirm modal. It now makes sense why it's always showing the last ticket since you're mapping through each one.

I think you should add a new state value like clickedTicket to keep track of which one was clicked. Then create a specific function for your onClick on <Popup> that toggles showEdit (which you are already doing) as well as sets clickedTicket using setClickedTicket to keep track of the one you clicked on. This will require you to move the <Confirm> components out of your .map(). Let me know if this makes sense!

[cjp0116]

I do see what you mean, but I'm having trouble trying to figure out how to move the component out of the .map().

Isn't it inevitable to have that inside the map() since the act of trying to set an clickedTicket state requires some type of unique identifier from that array we were mapping over?

I've tried doing the following, while it does set the state for clicked Tickets, it doesn't seem to trigger the Confirm modal. const handleToggleConfirms = (clickedTicket, typeOfConfirm, t) => { setClickedTicket(clickedTicket); typeOfConfirm === 'edit' ? setShowEdit(true) : setOpenConfirm(true);

return (
  <Confirm
    open={typeOfConfirm === 'edit' ? showEdit : openConfirm }
    header={typeOfConfirm === 'edit' ? `Edit` : 'Delete' + `ticket ${

clickedTicket}`} content={ typeOfConfirm === "edit" ? <EditTicketForm ticketID={t.clickedTicket} edit ticket={t} handleEdit={handleEdit} /> : "The operation is irreversable, are you sure?" } cancelButton="Go back" confirmButton={typeOfConfirm === 'edit' ? 'Edit' : 'Delete'} onCancel={ typeOfConfirm === 'edit' ? setShowEdit(false) : setOpenConfirm( false) } onConfirm={ typeOfConfirm === 'edit' ? handleEdit : () => handleDeleteConfirm( clickedTicket) } /> ) }

// Edit ticket Popup <Popup content={Edit ticket ${t.id}} trigger={ <Button icon="edit" size="small" color="green" circular onClick={() => handleToggleConfirms(t.id, 'edit', t)} /> } />

// delete ticket Popup <Popup content={Delete ticket ${t.id}} trigger={ <Button icon="remove" size="small" color="red" circular onClick={() => handleToggleConfirms(t.id, 'delete', t)} /> } />

On Mon, Mar 15, 2021 at 6:11 PM Grace Lu @.***> wrote:

No I don't think the issue is in regards to semantic UI; you're making 2

components to delete and edit for each ticket when is redundant. When you click on the Edit/Delete button you don't actually set which ticket got clicked in the state; it simply toggles whether to show the Confirm modal. It now makes sense why it's always showing the last ticket since you're mapping through each one. I think you should add a new state value like clickedTicket to keep track of which one was clicked. Then create a specific function for your onClick on that toggles showEdit (which you are already doing) as well as sets clickedTicket using setClickedTicket to keep track of the one you clicked on. This will require you to move the components out of your .map(). Let me know if this makes sense! — You are receiving this because you commented. Reply to this email directly, view it on GitHub , or unsubscribe .

-- Respectfully, Jae Pil Cho Phone:(213)-248-3654 @.***

[cjp0116]

It's been resolved now! :) I've made another component and imported it to the TicketData component, and it was able to select the corresponding ticket. I'll try adding the onConfirm logic in here to see if it behaves correctly.

import React, { useState } from "react"; import { Popup, Confirm, Button } from "semantic-ui-react"; import EditTicketForm from "./NewTicketForm";

const TicketModals = (props) => { const [showForm, setShowForm] = useState({ edit: false, remove: false, });

const toggleEdit = () => { setShowForm(state => ({ ...state, edit : !state.edit })); };

const toggleRemove = () => { setShowForm(state => ({ ...state, remove : !state.remove })) };

return ( <> <Popup content={props.typeOfConfirm === 'edit' ? Edit ticket ${props. ticketID} : Delete ticket ${props.ticketID}} trigger={ <Button icon={props.typeOfConfirm === 'edit' ? 'edit' : 'remove'} size='small' color={props.typeOfConfirm === 'edit' ? 'green' : 'red'} circular onClick={props.typeOfConfirm === 'edit' ? toggleEdit : toggleRemove} /> } /> <Confirm open={props.typeOfConfirm === 'edit' ? showForm.edit : showForm. remove} header={props.typeOfConfirm === 'edit' ? Edit ticket ${props. ticketID} : Delete ticket ${props.ticketID}} content={ props.typeOfConfirm === 'edit' ? <EditTicketForm ticketID={props.ticketID} edit ticket={props. ticket}/> : 'The operation is irreversable, are you sure?' } cancelButton="Go back" confirmButton={props.typeOfConfirm === 'edit' ? 'Edit' : 'Delete'} onCancel={ props.typeOfConfirm === 'edit' ? toggleEdit : toggleRemove } onConfirm={ props.typeOfConfirm === 'edit' ? () => {} : () => {} } /> </> ); };

export default TicketModals;

On Tue, Mar 16, 2021 at 7:09 AM Jae Cho @.***> wrote:

I do see what you mean, but I'm having trouble trying to figure out how to move the component out of the .map().

Isn't it inevitable to have that inside the map() since the act of trying to set an clickedTicket state requires some type of unique identifier from that array we were mapping over?

I've tried doing the following, while it does set the state for clicked Tickets, it doesn't seem to trigger the Confirm modal. const handleToggleConfirms = (clickedTicket, typeOfConfirm, t) => { setClickedTicket(clickedTicket); typeOfConfirm === 'edit' ? setShowEdit(true) : setOpenConfirm(true);

return (
  <Confirm
    open={typeOfConfirm === 'edit' ? showEdit : openConfirm }
    header={typeOfConfirm === 'edit' ? `Edit` : 'Delete' + `ticket ${

clickedTicket}`} content={ typeOfConfirm === "edit" ? <EditTicketForm ticketID={t.clickedTicket} edit ticket={t} handleEdit={handleEdit} /> : "The operation is irreversable, are you sure?" } cancelButton="Go back" confirmButton={typeOfConfirm === 'edit' ? 'Edit' : 'Delete'} onCancel={ typeOfConfirm === 'edit' ? setShowEdit(false) : setOpenConfirm( false) } onConfirm={ typeOfConfirm === 'edit' ? handleEdit : () => handleDeleteConfirm(clickedTicket) } /> ) }

// Edit ticket Popup <Popup content={Edit ticket ${t.id}} trigger={ <Button icon="edit" size="small" color="green" circular onClick={() => handleToggleConfirms(t.id, 'edit', t)} /> } />

// delete ticket Popup <Popup content={Delete ticket ${t.id}} trigger={ <Button icon="remove" size="small" color="red" circular onClick={() => handleToggleConfirms(t.id, 'delete', t)} /> } />

On Mon, Mar 15, 2021 at 6:11 PM Grace Lu @.***> wrote:

No I don't think the issue is in regards to semantic UI; you're making 2

components to delete and edit for each ticket when is redundant. When you click on the Edit/Delete button you don't actually set which ticket got clicked in the state; it simply toggles whether to show the Confirm modal. It now makes sense why it's always showing the last ticket since you're mapping through each one. I think you should add a new state value like clickedTicket to keep track of which one was clicked. Then create a specific function for your onClick on that toggles showEdit (which you are already doing) as well as sets clickedTicket using setClickedTicket to keep track of the one you clicked on. This will require you to move the components out of your .map(). Let me know if this makes sense! — You are receiving this because you commented. Reply to this email directly, view it on GitHub , or unsubscribe .

-- Respectfully, Jae Pil Cho Phone:(213)-248-3654 @.***

-- Respectfully, Jae Pil Cho Phone:(213)-248-3654 @.***

[gracewylu]

Awesome yay glad it worked!