https://stephenwade.com/_next/static/chunks/pages/employee-portal/EditArticle-b608fbb9601cbef7.js

1(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[400],{17268:(e,t,s)=>{"use strict";s.r(t),s.d(t,{__N_SSP:()=>m,default:()=>g});var a=s(37876),r=s(14232),l=s(77328),i=s.n(l),o=s(72193),c=s(10284),n=s.n(c),h=s(3422),d=s.n(h),p=s(39119),u=s(40406);class x extends r.Component{componentDidMount(){d().get(null).token,this.state.user?(0,p.MC)(this.state.user)||(window.location.href="/garage?tab=preferences"):window.location.href="/employee-portal",this.fetchArticle()}componentDidUpdate(e,t){}async fetchArticle(){let e=await fetch("/api/articles/".concat(this.state.slug)),t=await e.json();this.setState({article:t})}async attemptToEditArticle(){return""===this.state.article.title?void this.setState({errorOccurred:!0,errorMessage:"Please enter a title for the article."}):""===this.state.article.description?void this.setState({errorOccurred:!0,errorMessage:"Please enter a description for the article."}):""===this.state.article.markdown?void this.setState({errorOccurred:!0,errorMessage:"Please enter content for the article."}):void(null===this.state.newArticlePhoto||void 0===this.state.newArticlePhoto?this.editArticle():this.updateArticlePhoto())}editArticle(){let e=d().get(null).token;fetch("/api/articles/".concat(this.state.slug),{method:"PUT",headers:{"Content-Type":"application/json",Authorization:"Bearer ".concat(e)},body:JSON.stringify(this.state.article)}).then(e=>e.json()).then(e=>{this.setState({successOccurred:!0,successMessage:"Article successfully edited.",successOrFailModal:!0,errorOccurred:!1,errorMessage:"",newArticlePhoto:null})}).catch(e=>{console.error("Error:",e)})}updateArticlePhoto(){let e=d().get(null).token,t=this.state.newArticlePhoto;if(!t)return void this.setState({errorOccurred:!0,errorMessage:"Please select an article photo."});let s=new FileReader;s.onloadend=async()=>{let t=s.result.split(",")[1],a=this.state.article.title.toLowerCase().replace(/[^\w\s-]/g,"").replace(/\s+/g,"-").replace(/-+/g,"-").trim(),r=await fetch("/api/articles/article-image",{method:"POST",headers:{"Content-Type":"application/json",Authorization:"Bearer ".concat(e)},body:JSON.stringify({base64Image:t,fileName:a})}),l=await r.json();r.ok?this.setState({article:{...this.state.article,photoURL:l.imageUrl}},()=>this.editArticle()):this.setState({errorOccurred:!0,errorMessage:"Failed to upload article photo."})},s.readAsDataURL(t)}render(){var e,t,s,r,l,c,h,d,p,x,m,g,w,y,j;return(0,a.jsxs)("div",{style:{fontFamily:"Roboto, sans-serif",letterSpacing:"0.0125em"},children:[(0,a.jsx)(i(),{children:(0,a.jsx)("title",{})}),(0,a.jsxs)("div",{style:{backgroundColor:"transparent"},children:[(0,a.jsx)("div",{style:{width:"100%",height:"150px"},className:"background sw-flex sw-justify-center sw-align-center",children:(0,a.jsx)("h1",{className:"sw--white sw--center",children:"Edit an Article"})}),(0,a.jsxs)("div",{className:"sw-flex sw-flex-col sw-container-md",children:[(0,a.jsx)("button",{style:{backgroundColor:"#343a40",width:"150px",height:"45px",margin:"10px 0 0",padding:"6px 12px"},onClick:()=>{window.location.href="/employee-portal/BlogManager"},children:"Return To Blog Manager"}),(0,a.jsxs)("h2",{className:"sw--center",style:{marginTop:"20px"},children:["Welcome, ",null==(e=this.state.user)?void 0:e.firstName," ",null==(t=this.state.user)?void 0:t.lastName,"."]}),(0,a.jsx)("hr",{style:{width:"100%",height:"2px",backgroundColor:"#ccc"}}),(0,a.jsxs)("div",{className:"sw-container-sm sw-flex sw-flex-col",style:{gap:"20px",marginTop:"40px"},children:[(0,a.jsxs)("div",{children:[(0,a.jsx)("label",{className:"sw--small",children:"Article Title"}),(0,a.jsx)("input",{type:"text",className:"sw-input",value:(null==(s=this.state.article)?void 0:s.title)||"",onChange:e=>{this.setState({article:{...this.state.article,title:e.target.value}})}})]}),(0,a.jsxs)("div",{children:[(0,a.jsx)("label",{className:"sw--small",children:"Article Description"}),(0,a.jsx)("textarea",{className:"sw-input",style:{minHeight:"100px"},value:(null==(r=this.state.article)?void 0:r.description)||"",onChange:e=>{this.setState({article:{...this.state.article,description:e.target.value}})}})]}),(0,a.jsxs)("div",{children:[(0,a.jsx)("label",{className:"sw--small",children:"SEO Title (optional)"}),(0,a.jsx)("input",{type:"text",className:"sw-input",placeholder:"".concat((null==(l=this.state.article)?void 0:l.title)||"Article Title"," | Stephen Wade Auto Center Blog"),value:(null==(c=this.state.article)?void 0:c.metaTitle)||"",onChange:e=>{this.setState({article:{...this.state.article,metaTitle:e.target.value}})}}),(0,a.jsxs)("span",{className:"sw--small sw--gray",children:["Replaces the whole browser/search-result title. Aim for under 60 characters. Leave empty to use the article title.",(null==(h=this.state.article)?void 0:h.metaTitle)?" (".concat(this.state.article.metaTitle.length," characters)"):""]})]}),(0,a.jsxs)("div",{children:[(0,a.jsx)("label",{className:"sw--small",children:"SEO Description (optional)"}),(0,a.jsx)("textarea",{className:"sw-input",style:{minHeight:"80px"},placeholder:(null==(d=this.state.article)?void 0:d.description)||"Article Description",value:(null==(p=this.state.article)?void 0:p.metaDescription)||"",onChange:e=>{this.setState({article:{...this.state.article,metaDescription:e.target.value}})}}),(0,a.jsxs)("span",{className:"sw--small sw--gray",children:["Shown in search results instead of the article description. Aim for 140-155 characters. Leave empty to use the article description.",(null==(x=this.state.article)?void 0:x.metaDescription)?" (".concat(this.state.article.metaDescription.length," characters)"):""]})]}),(0,a.jsxs)("div",{children:[(0,a.jsx)("label",{className:"sw--small",children:"Article Category"}),(0,a.jsxs)("select",{className:"sw-input",value:(null==(m=this.state.article)?void 0:m.category)||"",onChange:e=>{this.setState({article:{...this.state.article,category:e.target.value}})},children:[(0,a.jsx)("option",{value:"",children:"Select a category..."}),(0,a.jsx)("option",{value:"Explore Southern Utah",children:"Explore Southern Utah"}),(0,a.jsx)("option",{value:"Car Care Tips",children:"Car Care Tips"}),(0,a.jsx)("option",{value:"Buying Guide",children:"Buying Guide"}),(0,a.jsx)("option",{value:"Sales & Events",children:"Sales & Events"}),(0,a.jsx)("option",{value:"Community",children:"Community"}),(0,a.jsx)("option",{value:"Dealership News",children:"Dealership News"})]})]}),(0,a.jsxs)("div",{children:[(0,a.jsx)("label",{className:"sw--small",children:"Article Content - Markdown"}),(0,a.jsx)("textarea",{className:"sw-input",style:{minHeight:"100px"},value:(null==(g=this.state.article)?void 0:g.markdown)||"",onChange:e=>{this.setState({article:{...this.state.article,markdown:e.target.value}})}})]}),(0,a.jsxs)("div",{children:[(0,a.jsx)("label",{className:"sw--small",children:"YouTube Link (copy and paste url)"}),(0,a.jsx)("input",{type:"text",className:"sw-input",value:(null==(w=this.state.article)?void 0:w.youtubeLink)||"",onChange:e=>{this.setState({article:{...this.state.article,youtubeLink:e.target.value}})}})]}),(0,a.jsxs)("div",{children:[(0,a.jsx)("label",{className:"sw--small sw--center",children:"Change Or Upload Article Photo (Leave Empty For No Change)"}),(0,a.jsxs)("div",{className:"sw-flex sw-flex-col",children:[(null==(y=this.state.article)?void 0:y.photoURL)&&(0,a.jsxs)("div",{className:"sw-flex",children:[(0,a.jsx)("img",{src:this.state.article.photoURL,alt:"Article",style:{width:"300px",borderRadius:"4px"},className:"sw-m-md"}),(0,a.jsx)("button",{className:"sw-danger sw--center",style:{maxWidth:"250px",margin:"auto"},onClick:()=>{this.setState({confirmDeleteModal:!0})},children:"Delete Photo"})]}),(0,a.jsxs)("label",{htmlFor:"profilePicture",style:{display:"flex",alignItems:"center",cursor:"pointer",fontSize:"18px",color:"#555",marginBottom:"6px",borderBottom:"1px solid #ccc",paddingBottom:"4px"},children:[(0,a.jsx)(n(),{path:o.VvZ,size:1.1,style:{marginRight:"8px"}}),null===this.state.newArticlePhoto?(0,a.jsx)("span",{children:"Upload New Article Photo"}):(0,a.jsx)("div",{children:(0,a.jsx)("span",{style:{color:"darkgreen",fontWeight:"bold"},children:"Image Selected"})})]}),(0,a.jsx)("input",{type:"file",id:"profilePicture",name:"profilePicture",accept:"image/*",style:{display:"none"},onChange:e=>{var t;this.setState({newArticlePhoto:(null==(t=e.target.files)?void 0:t[0])||null})}})]})]}),(0,a.jsxs)("div",{children:[(0,a.jsx)("label",{className:"sw--small",children:"Photo Alt Text (optional)"}),(0,a.jsx)("input",{type:"text",className:"sw-input",placeholder:"image alt",value:(null==(j=this.state.article)?void 0:j.photoAlt)||"",onChange:e=>{this.setState({article:{...this.state.article,photoAlt:e.target.value}})}})]}),this.state.errorOccurred?(0,a.jsx)("span",{style:{color:"red",marginTop:"12px",margin:"auto"},children:this.state.errorMessage}):null,(0,a.jsx)("button",{className:"sw-primary sw--center",style:{maxWidth:"250px",margin:"auto"},onClick:()=>{this.attemptToEditArticle()},children:"Apply Edit"})]})]}),(0,a.jsx)(u.A,{BGClose:!0,render:this.state.successOrFailModal,callBack:e=>{this.setState({successOrFailModal:e})},className:"sw-container sw-p-0 sw-align-center",style:{borderRadius:"05x",maxWidth:"600px"},children:(0,a.jsxs)("div",{className:"sw-flex sw-flex-col sw-align-center",style:{marginTop:"32px"},children:[this.state.errorOccurred?(0,a.jsx)("span",{style:{color:"red",marginTop:"24px",fontWeight:"bold"},children:this.state.errorMessage}):null,this.state.successOccurred?(0,a.jsx)("span",{style:{color:"green",marginTop:"24px",fontWeight:"bold"},children:this.state.successMessage}):null,(0,a.jsx)("div",{className:"sw-flex",style:{justifyContent:"space-around",marginTop:"12px"},children:(0,a.jsx)("button",{className:"sw--center sw-m-sm",style:{transition:"filter 0.1s ease-in-out",width:"75px",height:"36px",backgroundColor:"white",color:"black",fontSize:"14px",boxShadow:"none"},onMouseLeave:e=>e.currentTarget.style.backgroundColor="white",onMouseEnter:e=>e.currentTarget.style.backgroundColor="#e6e6e6",onClick:()=>{this.setState({successOrFailModal:!1,errorOccurred:!1,errorMessage:"",successMessage:"",successOccurred:!1})},children:"CLOSE"})})]})}),(0,a.jsxs)(u.A,{BGClose:!0,render:this.state.confirmDeleteModal,callBack:e=>{this.setState({confirmDeleteModal:e})},className:"sw-container sw-p-0 sw-align-center",style:{borderRadius:"0px",maxWidth:"600px"},children:[(0,a.jsx)("div",{style:{backgroundColor:"#1976d2",padding:"18px 0",boxShadow:"0 2px 4px -1px rgba(0,0,0,.2),0 4px 5px 0 rgba(0,0,0,.14),0 1px 10px 0 rgba(0,0,0,.12)"},className:"",children:(0,a.jsx)("span",{className:"sw--white",style:{fontSize:"32px",padding:"4px 16px"},children:"Confirm:"})}),(0,a.jsxs)("div",{className:"sw-flex sw-flex-col sw-align-center",style:{marginTop:"32px"},children:[(0,a.jsx)("p",{className:"sw--center sw-p-md sw-m-0",children:'Note: By clicking "apply" you will remove this image from the article. This cannot be undone.'}),this.state.errorOccurred?(0,a.jsx)("span",{style:{color:"red",marginTop:"12px"},children:this.state.errorMessage}):this.state.successOccurred?(0,a.jsx)("span",{style:{color:"green",marginTop:"12px"},children:this.state.successMessage}):null,(0,a.jsxs)("div",{className:"sw-flex",style:{justifyContent:"space-around",marginTop:"12px"},children:[(0,a.jsx)("button",{className:"sw--center sw-m-sm",style:{transition:"filter 0.1s ease-in-out",width:"100px",height:"36px",backgroundColor:"#1976d2",color:"white",fontSize:"14px",boxShadow:"none"},onMouseLeave:e=>e.currentTarget.style.backgroundColor="#1976d2",onMouseEnter:e=>e.currentTarget.style.backgroundColor="#3299ff",onClick:()=>{this.setState({article:{...this.state.article,photoURL:""},confirmDeleteModal:!1})},children:"APPLY"}),(0,a.jsx)("button",{className:"sw--center sw-m-sm",style:{transition:"filter 0.1s ease-in-out",width:"75px",height:"36px",backgroundColor:"white",color:"black",fontSize:"14px",boxShadow:"none"},onMouseLeave:e=>e.currentTarget.style.backgroundColor="white",onMouseEnter:e=>e.currentTarget.style.backgroundColor="#e6e6e6",onClick:()=>{this.setState({confirmDeleteModal:!1,errorOccurred:!1,errorMessage:"",successMessage:"",successOccurred:!1})},children:"CLOSE"})]})]})]})]})]})}constructor(e){super(e),this.props.user,this.state={user:this.props.user?this.props.user:null,slug:this.props.slug,article:null,newArticlePhoto:null,errorOccurred:!1,errorMessage:"An error has occurred. Please reach out to the SWAC dev team.",successOccurred:!1,successMessage:"",successOrFailModal:!1,confirmDeleteModal:!1}}}var m=!0;let g=x},77328:(e,t,s)=>{e.exports=s(29269)},80980:(e,t,s)=>{(window.__NEXT_P=window.__NEXT_P||[]).push(["/employee-portal/EditArticle",function(){return s(17268)}])}},e=>{e.O(0,[636,6593,8792],()=>e(e.s=80980)),_N_E=e.O()}]);